20 Shades of Yellow with Hex Codes

Named Yellow Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Yellow Color Chart: Hex, RGB, HSL & CMYK

Every yellow above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Yellow Scale from Light to Dark

A 12-step lightness scale built from the core yellow hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate yellow design tokens.

What Yellow Communicates

Yellow has the highest relative luminance of any saturated hue, so it draws the eye instantly and fails text contrast on white almost without exception. It is best used as a highlight or a background rather than as text. Mustard and ochre — yellow with the lightness pulled down — behave far better and carry a warm, retro character.

Where yellow works well

• Highlight backgrounds and attention markers
• Caution and pending states in interfaces
• Retro and editorial palettes using mustard and ochre
• Accent pairings against deep navy or charcoal, where yellow has room to shine

Colors that pair with yellow

Copy the Yellow Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --yellow-olive: #808000;
  --yellow-ochre: #CC7722;
  --yellow-darkkhaki: #BDB76B;
  --yellow-honey: #EBA937;
  --yellow-saffron: #F4C430;
  --yellow-citrine: #E4D00A;
  --yellow-gold: #FFD700;
  --yellow-flax: #EEDC82;
  --yellow-mustard: #FFDB58;
  --yellow-khaki: #F0E68C;
  --yellow-palegoldenrod: #EEE8AA;
  --yellow-moccasin: #FFE4B5;
  --yellow-lemon: #FFF700;
  --yellow-butter: #FFFD74;
  --yellow-yellow: #FFFF00;
  --yellow-lightgoldenrodyellow: #FAFAD2;
  --yellow-cornsilk: #FFF8DC;
  --yellow-lemonchiffon: #FFFACD;
  --yellow-canary: #FFFF99;
  --yellow-lightyellow: #FFFFE0;
}

Yellow Color Questions