Shades of Yellow
Every useful yellow, generated rather than hand-listed.
There are 36 named CSS colors in the yellow family, ranging from Lightyellow (#ffffe0) at the light end to Hazel (#8e7618) at the dark end. The shades generated on this page all sit at hue 100° in OKLCH, so their lightness steps look evenly spaced instead of bunching up in the shadows the way an HSL ramp does.
Every shade of yellow on this page is generated, not copied from a list. Each swatch sits at hue 100° in OKLCH with an even perceptual lightness step, so the ramp reads smoothly instead of bunching up at the dark end the way an HSL ramp does — and nothing is clipped outside what an sRGB display can actually show.
Click any swatch to copy its hex code. The sliders let you change how many shades you get, how intense they are, and how much the hue drifts across the ramp.
Three yellow shades worth starting from
If you just need a yellow that works, these three are safe picks at the light, mid and dark ends of the range.
| Role | Hex | RGB | Contrast on white |
|---|---|---|---|
| Light yellow — backgrounds, tints | #e0d9ac | rgb(224 217 172) | 1.43:1 |
| Mid yellow — accents, buttons | #928100 | rgb(146 129 0) | 3.92:1 |
| Dark yellow — text, borders | #3b3300 | rgb(59 51 0) | 12.65:1 |
Named shades of yellow
24 named colors that fall in the yellow range, sorted from darkest to lightest, with the contrast ratio each one achieves against a white background. Anything below 4.5:1 is not safe for body text on white.
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Hazel | #8e7618 | rgb(142 118 24) | hsl(47.8 71.1% 32.5%) | 4.42:1 |
| Olive | #808000 | rgb(128 128 0) | hsl(60 100% 25.1%) | 4.2:1 |
| Shadow | #8a795d | rgb(138 121 93) | hsl(37.3 19.5% 45.3%) | 4.22:1 |
| Dark Goldenrod | #b8860b | rgb(184 134 11) | hsl(42.7 88.7% 38.2%) | 3.25:1 |
| Dijon | #c49102 | rgb(196 145 2) | hsl(44.2 98% 38.8%) | 2.84:1 |
| Brass | #b5a642 | rgb(181 166 66) | hsl(52.2 46.6% 48.4%) | 2.47:1 |
| Goldenrod | #daa520 | rgb(218 165 32) | hsl(42.9 74.4% 49%) | 2.24:1 |
| Sand | #c2b280 | rgb(194 178 128) | hsl(45.5 35.1% 63.1%) | 2.11:1 |
| Gold Leaf | #d4af37 | rgb(212 175 55) | hsl(45.9 64.6% 52.4%) | 2.1:1 |
| Darkkhaki | #bdb76b | rgb(189 183 107) | hsl(55.6 38.3% 58%) | 2.07:1 |
| Sage | #bcb88a | rgb(188 184 138) | hsl(55.2 27.2% 63.9%) | 2.03:1 |
| Mango | #fdbe02 | rgb(253 190 2) | hsl(44.9 98.4% 50%) | 1.67:1 |
| Saffron | #f4c430 | rgb(244 196 48) | hsl(45.3 89.9% 57.3%) | 1.64:1 |
| Amber | #ffbf00 | rgb(255 191 0) | hsl(44.9 100% 50%) | 1.65:1 |
| Yolk | #fbc531 | rgb(251 197 49) | hsl(44 96.2% 58.8%) | 1.6:1 |
| Bitter Lemon | #cae00d | rgb(202 224 13) | hsl(66.3 89% 46.5%) | 1.48:1 |
| Pear | #d1e231 | rgb(209 226 49) | hsl(65.8 75.3% 53.9%) | 1.44:1 |
| Straw | #e4d96f | rgb(228 217 111) | hsl(54.4 68.4% 66.5%) | 1.45:1 |
| Bisque Beige | #e6d3b3 | rgb(230 211 179) | hsl(37.6 50.5% 80.2%) | 1.47:1 |
| Gold | #ffd700 | rgb(255 215 0) | hsl(50.6 100% 50%) | 1.4:1 |
| Sunflower | #ffda03 | rgb(255 218 3) | hsl(51.2 100% 50.6%) | 1.37:1 |
| Mustard | #ffdb58 | rgb(255 219 88) | hsl(47.1 100% 67.3%) | 1.35:1 |
| Wheat | #f5deb3 | rgb(245 222 179) | hsl(39.1 76.7% 83.1%) | 1.31:1 |
| Lime Zest | #d9f10a | rgb(217 241 10) | hsl(66.2 92% 49.2%) | 1.27:1 |
Using yellow in an interface
The two badges next to each generated shade are its contrast ratio against white and against black. The first step where one of them turns green is the lightest yellow you can safely set body text in on that background — everything lighter is decoration, not copy.
For large areas, pick from the light end and let a darker shade of the same hue carry the text. That keeps the whole surface in one hue family, which is what makes an interface feel deliberate rather than assembled.
Frequently asked questions
What are the hex codes for shades of yellow?
The ramp at the top of this page generates them — click any swatch to copy it. Three reliable picks are #e0d9ac for light, #928100 for mid and #3b3300 for dark yellow.
What is the hex code for yellow?
The closest single answer is Saffron at #f4c430, but yellow is a range rather than one value. This page lists 24 named yellow shades and generates as many more as you want.
How many shades of yellow are there?
Effectively unlimited — an 8-bit display can show over 16 million colors, and a large share of them read as this family. The useful question is how many distinguishable steps you need, which is usually somewhere between 9 and 12 for a design system.
What colors go well with yellow?
Its perceptual complement sits at hue 280°, and the two neighbors either side of that make a softer split-complementary set. The palette generator builds all of them from any starting yellow.
Which shade of yellow is accessible for text?
On a white background you need 4.5:1 for body text. In the table above that is every row at or above 4.5:1 — generally the darker half of the family. The contrast checker will confirm any specific pair and suggest the nearest passing color if it fails.