Skip to content

Yellow #ffff00

The brightest thing on any page.

RGB
255, 255, 0
HSL
60°, 100%, 50%
CMYK
0, 0, 100, 0
Luminance
0.9278

About Yellow

Yellow is the most luminous hue at full saturation — #ffff00 reflects more light to the eye than any other pure color, which makes it both the best highlighter on Earth and the hardest color to read. Its entire design life is a negotiation with that brightness.

It is the color of sunshine and caution simultaneously: the same wavelength that says optimism on a smiley face says “wet floor” on a sign.

History

Yellow ochre is in the oldest cave paintings; Indian Yellow was (legend says) made from the urine of mango-fed cows; chrome yellow gave van Gogh his sunflowers and school buses their federally mandated color — National School Bus Glossy Yellow, chosen in 1939 because black lettering on yellow is legible earlier in peripheral vision than any other combination.

Psychology

Yellow triggers the fastest visual response of any color, which is why taxis, road signs and warning tape claim it. It rates highest for optimism and lowest for luxury; overuse measurably increases visual fatigue and even infant crying in yellow rooms — dose it like seasoning.

In design

Yellow text fails on white catastrophically (1.07:1 — the worst pairing in the palette) and yellow backgrounds demand near-black ink. On dark UIs, amber-yellows (#facc15, #fbbf24) are superb attention accents. Pair with black for maximum-urgency signage, with navy for nautical class, with gray to calm it down.

In culture

Yellow is imperial China’s exclusive color, Buddhism’s golden robes, journalism’s slur (yellow press), cowardice (yellow-bellied) and friendship’s rose. In sport it is a warning card; in cycling, the greatest jersey there is.

Brands that own yellow

Shades of yellow

Every format

HEX#ffff00
RGBrgb(255, 255, 0)
HSLhsl(60, 100%, 50%)
CMYKcmyk(0%, 0%, 100%, 0%)
LABlab(97.1 -21.6 94.5)
LCHlch(97.1 96.9 102.8)
OKLCHoklch(0.968 0.211 109.8)

Copy-ready code

/* CSS */
color: #ffff00;
background-color: #ffff00;
/* Tailwind (arbitrary) */
class="text-[#ffff00] bg-[#ffff00]"
/* SCSS */
$brand: #ffff00;
/* SwiftUI */
Color(red: 1.000, green: 1.000, blue: 0.000)
/* Android */
Color.parseColor("#ffff00")

Accessibility — WCAG contrast

Aa
#ffff00 on white: 1.07:1
AA ✗ fail · AA-large · AAA
Aa
#ffff00 on black: 19.56:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red100.0%
Green100.0%
Blue0.0%

CMYK percentages

Cyan0.0%
Magenta0.0%
Yellow100.0%
Key (black)0.0%

Color previews

#ffff00 text on a black background

contrast 19.56:1

Card sample

#ffff00 text on a white background

contrast 1.07:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ffff00;
Background color
Panel with #ffff00 background
background-color: #ffff00;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ffff00;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 255, 0, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(255, 255, 0, 0.45);
Border & gradient
Gradient panel
border: 3px solid #ffff00;
background: linear-gradient(135deg, #ffff00, #55FF00);

Monochromatic scale

Palettes built from #ffff00

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Yellow, answered

What is the hex code for yellow?

Pure yellow is #ffff00 — red and green channels at maximum. Design favorites include gold #ffd700, amber #ffbf00 and Snapchat’s #fffc00.

Why is yellow text so hard to read?

Yellow’s luminance is close to white’s, so on light backgrounds contrast collapses (1.07:1 on white — the worst in the palette). Yellow needs dark backgrounds, or must serve as background itself under near-black text.

Why are school buses yellow?

The 1939 US standard chose glossy yellow because black-on-yellow is detected fastest in peripheral vision — you notice a school bus before you look at it.

Work with #ffff00 in the Color Lab