Honied White to Light Goldenrod Yellow Gradient

CSS

background: linear-gradient(90deg, #fcefd1 0%, #fafad2 100%);

From Honied White (#FCEFD1) to Light Goldenrod Yellow (#FAFAD2). The two hues are 18° apart on the color wheel, close enough that the blend stays clean without a muddy middle.

Colors along the gradient

Name	HEX	RGB	HSL	CMYK	OKLCH
Honied White	`#FCEFD1`	252, 239, 209	42°, 88%, 90%	0, 5, 17, 1	95.5% 0.042 87
25% (near Vanilla Ice)	`#FCF2D1`	252, 242, 209	46°, 88%, 90%	0, 4, 17, 1	96.1% 0.044 93
50% (near Vanilla Ice)	`#FBF5D2`	251, 245, 210	51°, 84%, 90%	0, 2, 16, 2	96.6% 0.046 99
75% (near Light Goldenrod Yellow)	`#FBF7D2`	251, 247, 210	54°, 84%, 90%	0, 2, 16, 2	97.0% 0.048 102
Light Goldenrod Yellow	`#FAFAD2`	250, 250, 210	60°, 80%, 90%	0, 0, 16, 2	97.5% 0.052 107

Halfway along, the gradient is #FBF5D2, closest to the named color Vanilla Ice. The stops are mixed in RGB, the way browsers draw a linear gradient by default.

Text on this gradient

Black text reads best on both ends, so one text color works across the whole gradient. The two end colors have a contrast ratio of 1.07:1, so the change is gentle.

Other ways to use it

Top to bottom: linear-gradient(180deg, #fcefd1, #fafad2)
Diagonal: linear-gradient(135deg, #fcefd1, #fafad2)
Radial, from the center out: radial-gradient(circle, #fcefd1, #fafad2)
Tailwind CSS: bg-gradient-to-r from-[#fcefd1] to-[#fafad2]

Gradients like this work well for page headers, buttons, cards and slide backgrounds. Keep body text on a solid color for the best readability.

Questions

What are the HEX codes of the Honied White to Light Goldenrod Yellow gradient?

It starts at #FCEFD1 (Honied White) and ends at #FAFAD2 (Light Goldenrod Yellow), with #FBF5D2 in the middle.

How do I reverse the gradient?

Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #fcefd1, #fafad2) runs from Light Goldenrod Yellow on the left to Honied White on the right.