Shades of Yellow | Colormapped

Shades of Yellow color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#FFFFE5 HSL lightness 95%

#FFFFB3 HSL lightness 85%

#FFFF80 HSL lightness 75%

#FFFF4D HSL lightness 65%

#FFFF1A HSL lightness 55%

#E5E600 HSL lightness 45%

#B2B300 HSL lightness 35%

#7F8000 HSL lightness 25%

#4C4D00 HSL lightness 15%

Base reference: #FFFF00. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS named yellow and golden colors

These CSS keywords move from near-white cream/yellow values through bright yellow, gold, and deeper golden-brown colors.

ColorCSS keywordHEX

Ivory ivory #FFFFF0

Light Yellow lightyellow #FFFFE0

Lemon Chiffon lemonchiffon #FFFACD

Light Goldenrod Yellow lightgoldenrodyellow #FAFAD2

Pale Goldenrod palegoldenrod #EEE8AA

Khaki khaki #F0E68C

Yellow yellow #FFFF00

Gold gold #FFD700

Goldenrod goldenrod #DAA520

Dark Goldenrod darkgoldenrod #B8860B

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Yellow reaches high apparent brightness quickly, so even mid-range yellow values can feel very light on screen. The computed ramp above makes the lightness steps explicit instead of relying on shade names that can vary between sources.

For UI work, yellow often needs dark text even when the background looks saturated. If the goal is a richer mustard or ochre family, reduce saturation or shift hue rather than only lowering lightness.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.