Yellow #FFFF00 colour

#FFFF00 is the CSS colour yellow. RGB 255, 255, 0, HSL 60, 100%, 50%. Black text passes AAA (19.56:1), white fails (1.07:1). Tints, shades and palettes.

#FFFF00

CSS name: yellow, one of the 16 original HTML colours
Nearest other: greenyellow #adff2f
Described as: a vivid yellow
Red, green, blue: 255, 255, 0
Material 2014: Yellow A200
Web safe: Yes, one of the 216 web-safe colours
Luminance: 0.9278 (WCAG relative luminance, 0 is black, 1 is white)

Colour codes

HEX	`#ffff00`
HEX (short)	`#ff0`
RGB	`rgb(255, 255, 0)`
RGB (percent)	`rgb(100% 100% 0%)`
HSL	`hsl(60, 100%, 50%)`
HSV / HSB	`hsv(60, 100%, 100%)`
HWB	`hwb(60 0% 0%)`
CMYK (naive)	`cmyk(0%, 0%, 100%, 0%)`
CIELAB (D50)	`lab(97.61% -15.75 93.38)`
OKLCH	`oklch(96.8% 0.211 109.77)`
Decimal	`16776960`

CMYK here is the plain formula with no colour profile, so treat it as a starting point; a printer's profile gives the real ink values. CIELAB uses a D50 white point, as CSS lab() does. HSV is not a CSS function, so it is shown for design apps only.

Contrast with white and black text

White text, 1.07:1The quick brown fox jumps over the lazy dog.

Black text, 19.56:1The quick brown fox jumps over the lazy dog.

Text	Ratio	AA normal (4.5)	AA large (3)	AAA normal (7)	AAA large (4.5)
White	1.07:1	Fail	Fail	Fail	Fail
Black	19.56:1	Pass	Pass	Pass	Pass

Black text is the better choice on #FFFF00 (19.56:1). Ratios use the WCAG 2.2 formula; large text means at least 24px, or 18.66px bold. Check another pair.

Tints and shades

Mixed with white, then with black, in ten even steps (straight sRGB mixing, as most design tools do).

9%#ffff17 18%#ffff2e 27%#ffff46 36%#ffff5d 45%#ffff74 55%#ffff8b 64%#ffffa2 73%#ffffb9 82%#ffffd1 91%#ffffe8

9%#e8e800 18%#d1d100 27%#b9b900 36%#a2a200 45%#8b8b00 55%#747400 64%#5d5d00 73%#464600 82%#2e2e00 91%#171700

Colour harmonies

Hue turned around the HSL colour wheel, saturation and lightness kept.

Complementary

The hue opposite on the colour wheel (180°).

#ffff00 #0000ff

Analogous

Neighbours 30° either side.

#ff8000 #ffff00 #80ff00

Triadic

Three hues 120° apart.

#ffff00 #00ffff #ff00ff

Split complementary

The two hues either side of the complement (150° and 210°).

#ffff00 #0080ff #8000ff

Tetradic (square)

Four hues 90° apart.

#ffff00 #00ff80 #0000ff #ff0080

How it looks with colour blindness

Normal vision#ffff00 Protanopia#fff400 Deuteranopia#fffa31 Tritanopia#ffeed9 Achromatopsia#f7f7f7

Simulated with the Machado, Oliveira and Fernandes (2009) matrices at full severity, applied in linear RGB; achromatopsia shows the colour's luminance as grey. Milder forms (protanomaly, deuteranomaly) are far more common and shift colours less. Never use colour as the only way to carry meaning.

Material Yellow palette

50#fffde7 100#fff9c4 200#fff59d 300#fff176 400#ffee58 500#ffeb3b 600#fdd835 700#fbc02d 800#f9a825 900#f57f17 A100#ffff8d A200#ffff00 A400#ffea00 A700#ffd600

CSS

Text colour	`color: #ffff00;`
Background	`background-color: #ffff00;`
Border	`border: 1px solid #ffff00;`
Half transparent	`background-color: rgb(255 255 0 / 50%);`
Custom property	`--colour-main: #ffff00;`
Gradient to a darker shade	`background: linear-gradient(135deg, #ffff00, #999900);`
Gradient from a lighter tint	`background: linear-gradient(180deg, #ffff66, #ffff00);`
Text on this colour	`background-color: #ffff00; color: #000;`

Similar named colours

Distance is measured in OKLab, scaled by 100; under about 2 is hard to tell apart side by side.

Convert #FFFF00 to other formats · Build a palette from it · Check contrast · All named colours

Colour names from CSS Color Module Level 4. Palette values from the Tailwind CSS v3 default palette (MIT licence) and the Material Design 2014 colour palette as published in Material Design Lite (Apache License 2.0). All other values are calculated from the hex code.