Shades of yellow
Yellow goes from cream and canary through lemon and golden yellow to mustard, amber and dark goldenrod. Below: 33 named shades with hex codes — tap a chip to copy it.
29 light · 4 medium · 0 dark · 0 pass AA as text on white
- Light Yellow#FFFFE0
- Cream#FFFDD0
- Canary#FFFF99
- Lemon Chiffon#FFFACD
- Cornsilk#FFF8DC
- Light Gold Enrodyellow#FAFAD2
- Yellow#FFFF00
- Beige#F5F5DC
- Papaya Whip#FFEFD5
- Lemon#FFF700
- Blanched Almond#FFEBCD
- Antique White#FAEBD7
- Moccasin#FFE4B5
- Maize#FBEC5D
- Pale Gold Enrod#EEE8AA
- Navajo White#FFDEAD
- Khaki#F0E68C
- Wheat#F5DEB3
- Banana yellow#FFE135
- Golden yellow#FFDF00
- Jasmine#F8DE7E
- Mustard#FFDB58
- Naples yellow#FADA5E
- Flax#EEDC82
- School bus yellow#FFD800
- Gold#FFD700
- Mikado yellow#FFC40C
- Amber#FFBF00
- Saffron#F4C430
- Dark Khaki#BDB76B
- Gold Enrod#DAA520
- Dark Gold Enrod#B8860B
- Olive#808000
Yellow color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Light YellowCSS | #FFFFE0 | rgb(255, 255, 224) | hsl(60 100% 94%) | (0%, 0%, 12%, 0%) | 1.01:1 | 20.63:1 |
| Cream | #FFFDD0 | rgb(255, 253, 208) | hsl(57 100% 91%) | (0%, 1%, 18%, 0%) | 1.03:1 | 20.21:1 |
| Canary | #FFFF99 | rgb(255, 255, 153) | hsl(60 100% 80%) | (0%, 0%, 40%, 0%) | 1.04:1 | 20.01:1 |
| Lemon ChiffonCSS | #FFFACD | rgb(255, 250, 205) | hsl(54 100% 90%) | (0%, 2%, 20%, 0%) | 1.06:1 | 19.80:1 |
| CornsilkCSS | #FFF8DC | rgb(255, 248, 220) | hsl(48 100% 93%) | (0%, 3%, 14%, 0%) | 1.06:1 | 19.71:1 |
| Light Gold EnrodyellowCSS | #FAFAD2 | rgb(250, 250, 210) | hsl(60 80% 90%) | (0%, 0%, 16%, 2%) | 1.06:1 | 19.66:1 |
| YellowCSS | #FFFF00 | rgb(255, 255, 0) | hsl(60 100% 50%) | (0%, 0%, 100%, 0%) | 1.07:1 | 19.55:1 |
| BeigeCSS | #F5F5DC | rgb(245, 245, 220) | hsl(60 56% 91%) | (0%, 0%, 10%, 4%) | 1.10:1 | 18.97:1 |
| Papaya WhipCSS | #FFEFD5 | rgb(255, 239, 213) | hsl(37 100% 92%) | (0%, 6%, 16%, 0%) | 1.13:1 | 18.55:1 |
| Lemon | #FFF700 | rgb(255, 247, 0) | hsl(58 100% 50%) | (0%, 3%, 100%, 0%) | 1.13:1 | 18.55:1 |
| Blanched AlmondCSS | #FFEBCD | rgb(255, 235, 205) | hsl(36 100% 90%) | (0%, 8%, 20%, 0%) | 1.16:1 | 18.01:1 |
| Antique WhiteCSS | #FAEBD7 | rgb(250, 235, 215) | hsl(34 78% 91%) | (0%, 6%, 14%, 2%) | 1.17:1 | 17.92:1 |
| MoccasinCSS | #FFE4B5 | rgb(255, 228, 181) | hsl(38 100% 85%) | (0%, 11%, 29%, 0%) | 1.23:1 | 17.01:1 |
| Maize | #FBEC5D | rgb(251, 236, 93) | hsl(54 95% 67%) | (0%, 6%, 63%, 2%) | 1.21:1 | 17.25:1 |
| Pale Gold EnrodCSS | #EEE8AA | rgb(238, 232, 170) | hsl(55 67% 80%) | (0%, 3%, 29%, 7%) | 1.25:1 | 16.75:1 |
| Navajo WhiteCSS | #FFDEAD | rgb(255, 222, 173) | hsl(36 100% 84%) | (0%, 13%, 32%, 0%) | 1.28:1 | 16.30:1 |
| KhakiCSS | #F0E68C | rgb(240, 230, 140) | hsl(54 77% 75%) | (0%, 4%, 42%, 6%) | 1.28:1 | 16.40:1 |
| WheatCSS | #F5DEB3 | rgb(245, 222, 179) | hsl(39 77% 83%) | (0%, 9%, 27%, 4%) | 1.31:1 | 15.98:1 |
| Banana yellow | #FFE135 | rgb(255, 225, 53) | hsl(51 100% 60%) | (0%, 12%, 79%, 0%) | 1.30:1 | 16.07:1 |
| Golden yellow | #FFDF00 | rgb(255, 223, 0) | hsl(52 100% 50%) | (0%, 13%, 100%, 0%) | 1.32:1 | 15.80:1 |
| Jasmine | #F8DE7E | rgb(248, 222, 126) | hsl(47 90% 73%) | (0%, 10%, 49%, 3%) | 1.33:1 | 15.74:1 |
| Mustard | #FFDB58 | rgb(255, 219, 88) | hsl(47 100% 67%) | (0%, 14%, 65%, 0%) | 1.35:1 | 15.52:1 |
| Naples yellow | #FADA5E | rgb(250, 218, 94) | hsl(48 94% 67%) | (0%, 13%, 62%, 2%) | 1.37:1 | 15.25:1 |
| Flax | #EEDC82 | rgb(238, 220, 130) | hsl(50 76% 72%) | (0%, 8%, 45%, 7%) | 1.38:1 | 15.19:1 |
| School bus yellow | #FFD800 | rgb(255, 216, 0) | hsl(51 100% 50%) | (0%, 15%, 100%, 0%) | 1.39:1 | 15.07:1 |
| GoldCSS | #FFD700 | rgb(255, 215, 0) | hsl(51 100% 50%) | (0%, 16%, 100%, 0%) | 1.40:1 | 14.97:1 |
| Mikado yellow | #FFC40C | rgb(255, 196, 12) | hsl(45 100% 52%) | (0%, 23%, 95%, 0%) | 1.59:1 | 13.15:1 |
| Amber | #FFBF00 | rgb(255, 191, 0) | hsl(45 100% 50%) | (0%, 25%, 100%, 0%) | 1.65:1 | 12.70:1 |
| Saffron | #F4C430 | rgb(244, 196, 48) | hsl(45 90% 57%) | (0%, 20%, 80%, 4%) | 1.64:1 | 12.78:1 |
| Dark KhakiCSS | #BDB76B | rgb(189, 183, 107) | hsl(56 38% 58%) | (0%, 3%, 43%, 26%) | 2.06:1 | 10.14:1 |
| Gold EnrodCSS | #DAA520 | rgb(218, 165, 32) | hsl(43 74% 49%) | (0%, 24%, 85%, 15%) | 2.23:1 | 9.38:1 |
| Dark Gold EnrodCSS | #B8860B | rgb(184, 134, 11) | hsl(43 89% 38%) | (0%, 27%, 94%, 28%) | 3.25:1 | 6.45:1 |
| OliveCSS | #808000 | rgb(128, 128, 0) | hsl(60 100% 25%) | (0%, 0%, 100%, 50%) | 4.19:1 | 5.00:1 |
Make your own shades of yellow
Pick any yellow and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using yellow in design
Yellow is the lightest hue at full saturation, so it almost never works as text on white. Use it for highlights and backgrounds with dark text, or as warning fills.
To pair it with other hues, start from the color wheel or see colors that go with yellow. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of yellow are there?
There is no fixed number: screens can show millions of colors and any yellow hue can be made lighter, darker or more muted. This page lists 33 named shades of yellow — the CSS named colors that fall in the yellow family plus widely used names such as mustard, lemon, canary.
What is the hex code for yellow?
There is no single official yellow. The CSS keyword "yellow" is #FFFF00; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of yellow?
In this list the lightest is Light Yellow (#FFFFE0) and the darkest is Olive (#808000), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of yellow are readable as text on white?
None of these shades reaches 4.5:1 on white, so use them as backgrounds with dark text instead.
What colors go with yellow?
See the palettes on our "colors that go with yellow" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of yellow?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of yellow" means every variation of the hue, which is how this page uses it.