Shades of Yellow: Color Names & Hex Codes
There are 8 CSS named colors in the yellow range, from the lightest, Light Yellow, to the darkest, Goldenrod. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Yellow Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Light, Mid-tone and Dark Shades of Yellow
Light shades of yellow
Pale enough to work as backgrounds. Black text has the higher contrast on all 8 of them. Light Yellow, Lemon Chiffon, Yellow, Pale Goldenrod, Khaki, Gold, Dark Khaki and Goldenrod.
Yellow Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#FFFFE0 | rgb(255, 255, 224) | hsl(60, 100%, 94%) | 20.63:1 | 1.02:1 | Black | |
#FFFACD | rgb(255, 250, 205) | hsl(54, 100%, 90%) | 19.81:1 | 1.06:1 | Black | |
#FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | 19.56:1 | 1.07:1 | Black | |
#EEE8AA | rgb(238, 232, 170) | hsl(55, 67%, 80%) | 16.76:1 | 1.25:1 | Black | |
#F0E68C | rgb(240, 230, 140) | hsl(54, 77%, 75%) | 16.4:1 | 1.28:1 | Black | |
#FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | 14.97:1 | 1.4:1 | Black | |
#BDB76B | rgb(189, 183, 107) | hsl(56, 38%, 58%) | 10.15:1 | 2.07:1 | Black | |
#DAA520 | rgb(218, 165, 32) | hsl(43, 74%, 49%) | 9.38:1 | 2.24:1 | Black |
Shades of Yellow FAQ
What are the shades of yellow in CSS?
CSS Color 4 does not group its named colors into families, but 8 of them fall in the yellow range. From lightest to darkest: Light Yellow (#FFFFE0), Lemon Chiffon (#FFFACD), Yellow (#FFFF00), Pale Goldenrod (#EEE8AA), Khaki (#F0E68C), Gold (#FFD700), Dark Khaki (#BDB76B) and Goldenrod (#DAA520).
What is the hex code for yellow?
The CSS named color yellow is #FFFF00, which is RGB(255, 255, 0). The other shades on this page each have their own code.
Which shade of yellow can I use for text on a white background?
None of these shades reaches 4.5:1 on white; the highest is Goldenrod at 2.24:1.
Are mustard, lemon and canary yellow CSS colors?
No. Mustard, lemon and canary are common names, not CSS named colors, so none has a standard hex code. Gold (#FFD700) is close to mustard, Lemon Chiffon (#FFFACD) is a pale lemon, and Yellow (#FFFF00) is the bright pure yellow.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).