Yellow color: code #FFFF00

Yellow

#FFFF00

Color codes

  • HEX#FFFF00
  • RGBrgb(255, 255, 0)
  • HSLhsl(60, 100%, 50%)
  • HSVhsv(60, 100%, 100%)
  • CMYKcmyk(0%, 0%, 100%, 0%)
  • LABlab(97.1% -21.6 94.5)
  • OKLCHoklch(96.8% 0.211 109.8)

About the color Yellow

Yellow has the HEX code #FFFF00, which corresponds to rgb(255, 255, 0) in the RGB model. On the color wheel its hue sits at 60°, with 100% saturation and 50% lightness (hsl(60, 100%, 50%)).

Because of its hue it reads as a warm color: it tends to feel energetic and close, and it visually “advances” in a composition.

As a background it calls for dark text: black reaches a 19.55:1 contrast ratio on it, versus 1.07:1 for white.

For print, the approximate conversion is cmyk(0%, 0%, 100%, 0%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Yellow

Complementary

#FFFF00 · #0000FF

Analogous

#FF8000 · #FFFF00 · #80FF00

Triadic

#FFFF00 · #00FFFF · #FF00FF

Tetradic

#FFFF00 · #00FF80 · #0000FF · #FF0080

Split-complementary

#FFFF00 · #0080FF · #8000FF

Monochromatic

#808000 · #CCCC00 · #FFFF00 · #FFFF4D · #FFFF99

Yellow with white and black text

White text Aa Bb Cc 123
1.07:1 · fails WCAG
Black text Aa Bb Cc 123
19.55:1 · AAA

Test other pairs in the contrast checker

First things first: yellow and legibility

Pure yellow, #FFFF00, is the lightest color on the spectrum after white. In practice, that means two things. First, black text on yellow scores about 19.6:1, one of the most legible pairs you can get, which is why yellow and black dominate warning signs, construction tape and safety signage. Second, yellow on white (or white text on yellow) comes in at just 1.07:1, which is practically invisible.

Never use yellow as a text color on a light background. If your interface needs "yellow text," darken it toward amber or mustard and check it in the contrast checker. The contrast and accessibility guide explains the AA and AAA levels.

Meaning and perception

Yellow tends to evoke sunshine, joy, warmth and optimism, but also attention and caution. In the US it's the color of school buses and taxis in many cities, which adds to its "look here" role. In parts of Asia it was historically associated with royalty, while in some European and Latin American countries yellow flowers carry a sense of farewell. Too much yellow tires the eyes, and that goes for screens as much as walls.

Recommended pairings

ColorEffect
Gray #808080Balances yellow's energy; a modern pairing in interiors.
Navy blue #000080Strong contrast, but more refined than black.
Black #000000Maximum visibility, the language of signage.
Purple #800080The complement on the traditional wheel; vivid and bold.

Where yellow shines

In branding, yellow suits approachable retail and food brands, especially as an accent next to a dark shade. In UI, it's the traditional warning color, sitting between success green and error red. In fashion, pure yellow is tricky near the face; warmer shades like mustard and metallic ones like gold are easier to wear. In print, it's one of the colors that survives conversion best: #FFFF00 becomes cmyk(0%, 0%, 100%, 0%), essentially process yellow itself.

How to use it in CSS

:root {
  --color-yellow: #FFFF00;
  --color-yellow-rgb: 255, 255, 0;
}

.elemento {
  background-color: var(--color-yellow);
  color: #000000;
}

Similar colors

Use Yellow in our tools