Yellow colors
18 yellow colors, sorted light to dark. The lightest is Peach Yellow at 83 percent lightness, the darkest is Citrine at 47 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Peach Yellow | #FADFAD | hsl(39, 89%, 83%) | oklch(91.39% 0.0711 82.73) | 1.29:1 | 14.78:1 |
| Vanilla | #F3E5AB | hsl(48, 75%, 81%) | oklch(91.93% 0.0760 96.15) | 1.26:1 | 15.13:1 |
| Pale Goldenrod | #EEE8AA | hsl(55, 67%, 80%) | oklch(92.10% 0.0798 103.18) | 1.25:1 | 15.27:1 |
| Khaki | #F0E68C | hsl(54, 77%, 75%) | oklch(91.35% 0.1119 102.83) | 1.28:1 | 14.95:1 |
| Jasmine | #F8DE7E | hsl(47, 90%, 73%) | oklch(90.23% 0.1198 94.62) | 1.33:1 | 14.34:1 |
| Flax | #EEDC82 | hsl(50, 76%, 72%) | oklch(89.00% 0.1126 98.29) | 1.38:1 | 13.85:1 |
| Royal Yellow | #FADA5E | hsl(48, 94%, 67%) | oklch(89.24% 0.1454 94.78) | 1.38:1 | 13.90:1 |
| Corn | #FBEC5D | hsl(54, 95%, 67%) | oklch(92.94% 0.1606 103.32) | 1.22:1 | 15.73:1 |
| Mustard | #FFDB58 | hsl(47, 100%, 67%) | oklch(89.85% 0.1513 93.66) | 1.35:1 | 14.15:1 |
| Lemon | #FFF44F | hsl(56, 100%, 65%) | oklch(94.80% 0.1768 105.51) | 1.15:1 | 16.68:1 |
| Vegas Gold | #C5B358 | hsl(50, 48%, 56%) | oklch(76.35% 0.1138 98.31) | 2.11:1 | 9.08:1 |
| Old Gold | #CFB53B | hsl(49, 61%, 52%) | oklch(77.42% 0.1393 96.80) | 2.03:1 | 9.41:1 |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) | oklch(96.80% 0.2110 109.77) | 1.07:1 | 17.82:1 |
| Gold | #FFD700 | hsl(51, 100%, 50%) | oklch(88.68% 0.1822 95.33) | 1.40:1 | 13.64:1 |
| Amber | #FFBF00 | hsl(45, 100%, 50%) | oklch(84.03% 0.1724 84.08) | 1.65:1 | 11.58:1 |
| Canary | #FFEF00 | hsl(56, 100%, 50%) | oklch(93.50% 0.1981 104.67) | 1.19:1 | 16.04:1 |
| Goldenrod | #DAA520 | hsl(43, 74%, 49%) | oklch(75.16% 0.1469 83.99) | 2.24:1 | 8.55:1 |
| Citrine | #E4D00A | hsl(55, 92%, 47%) | oklch(84.77% 0.1765 102.37) | 1.58:1 | 12.14:1 |
Where yellow sits on the wheel
In HSL terms this family covers roughly 45 to 70 degrees. Yellow is the lightest family in sRGB: pure yellow has a relative luminance of about 0.93, close to white. That single fact drives almost every practical decision about it.
Working with yellow in an interface
Yellow works as a background or a highlight and rarely as text. Because its luminance is so high, dark ink on yellow passes AA easily, which makes it the safest of the vivid families for a filled surface.
In this set, 0 of 18 yellow colors clear WCAG AA for normal text on a white background, and 18 of 18 clear it as text on ink black. The most saturated is Yellow at an OKLCH chroma of 0.211, the most muted is Peach Yellow at 0.071. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
White text on yellow is the single most common contrast failure in this family and it cannot be fixed by making the yellow more saturated. Saturation does not move luminance far enough. Change the text color instead.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.