Yellow Shades
Every named color in the yellow family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 83 colors shown below.
Quick facts (computed from this family's 83 members)
- Average lightness: 57%
- Average saturation: 92%
- 10 of 83 pass WCAG AA as normal text on white
- 73 of 83 pass WCAG AA as normal text on black
- Lightest named member: off white
- Darkest named member: green brown
- Most saturated member: Gold
The color science
Yellow spans roughly 50-65° and is the hue with the highest luminance (perceived brightness) of the full-saturation spectrum colors to the human eye — this is a physiological fact, not a stylistic one: the eye's luminosity function peaks near 555 nanometers, close to where yellow sits, which is exactly why yellow is used for high-visibility safety equipment and school buses (adopted as the US standard 'National School Bus Glossy Yellow' in 1939, chosen specifically for visibility in low-light dawn and dusk conditions after research comparing several candidate colors). Bees and many other pollinating insects also see strongly into the yellow-green range, which is part of why so many flowers evolved yellow petals. Because yellow reflects such a large share of incident light, yellow surfaces also absorb comparatively little heat relative to darker colors under direct sun, a genuine physical property (not just a visual one) that has influenced everything from traditional hot-climate building paint choices to reflective safety-vest material selection.
Common uses in design
In UI design pure yellow is almost never used as body-text color or a large fill because of the accessibility problems below, but it remains the standard for warning-level (not error-level) states, highlighter/annotation overlays, and — because of its luminance — small accent details that need to catch the eye without dominating the layout. Yellow is also the traditional color of taxis in many major cities (New York's yellow cab standard dates to a 1907 decision, reportedly because a study found yellow the easiest color to spot at a distance). School crossing signs and construction-zone signage in the US and several other countries use a distinct fluorescent yellow-green ('school bus yellow' is a separate, more orange-leaning standard) specifically because that variant tests as more visible than either plain yellow or plain green under a wider range of weather and lighting conditions.
Accessibility notes
Yellow is the single hardest color to make WCAG-compliant as text: even fully saturated pure yellow (#FFFF00) on white fails AA badly (around 1.1:1), and most 'accessible yellows' are actually deep gold/amber rather than true yellow — if a design system needs 'yellow' text on light backgrounds, darkening it substantially toward goldenrod is usually the only way to clear 4.5:1. On a dark or near-black background, by contrast, yellow performs extremely well and is a common, genuinely accessible accent choice in dark-mode interfaces. It's worth being specific that this dark-background advantage applies to true, fairly saturated yellow — very pale, desaturated yellows lose much of that contrast benefit and can still struggle against a near-black surface the same way they struggle against white, just for the opposite underlying reason (too little luminance difference rather than too much).
Named examples
Gold and Khaki are the two most distinct named yellows: gold is named for the metal and sits more saturated/warm, while khaki comes from the Urdu/Persian word for 'dust-colored' and was adopted for British and other military uniforms in the 19th century specifically because dust-colored cloth was harder to spot at a distance than the bright red uniforms it replaced, a genuinely documented shift in military camouflage doctrine. LightGoldenRodYellow, despite its long compound name, is one of the palest, least saturated colors in the entire CSS set. LemonChiffon and PaleGoldenRod round out the paler end of the CSS-named yellows, both closer to cream than to a true saturated yellow, and both frequently used as soft background fills rather than as accent or text color for exactly that reason.
Building a yellow design-token scale
Because pure yellow fails contrast so badly as text, most design-system yellow scales are built lightness-first rather than saturation-first — the lightest 2-3 steps (a pale cream/butter yellow) are used for background fills and badge chips, while text-safe yellow tokens are usually deep enough that some systems label them 'gold' or 'amber' rather than 'yellow' to set the right expectation for engineers pulling the token. Tailwind's yellow-400/yellow-500 (used as fill or icon color, never as small text on white) sit at the more saturated end of this compromise; if your product needs yellow body text, testing against your actual background at build time rather than eyeballing it on a bright monitor is worth the extra step, since yellow's contrast failures are easy to miss in casual review. A genuinely useful working rule: if a yellow swatch looks comfortably readable as body text on your own monitor at typical brightness, test it again on a dimmer or older display before trusting that impression, since yellow's contrast margin against white is thin enough that display brightness alone can tip a borderline value from passing to failing. Highlighter and annotation-overlay use cases are a genuine exception worth naming — a semi-transparent yellow overlay behind existing dark text doesn't need to individually clear text-contrast thresholds the way standalone yellow text would, since the underlying text color, not the highlight color, is what's actually being read.