Yellow Background
#FFFF00 · rgb(255, 255, 0)
About the yellow background
Yellow (#FFFF00) is the brightest color a screen can emit besides white — red and green channels fully on, blue off. It's optimism, caution and attention rolled into one: highlighters, taxis, warning signs and smiley faces.
Its intensity means it's rarely a long-reading background, but for accents, banners and attention moments nothing beats it. Black text on yellow is the legendary maximum-readability pairing at about 19.6:1 contrast.
What to use a yellow background for
- Highlight-style accents and attention banners
- Warning and safety interfaces
- Children's brands and playful marketing
- Maximum-contrast accessibility pairings with black
How to use yellow in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page yellow background */
body {
margin: 0;
background-color: #FFFF00;
}
/* A single section or element */
.hero {
background-color: rgb(255, 255, 0);
} Yellow shades and tints
Click any swatch to copy it. Tints mix yellow with white; shades mix it with black.
Yellow background FAQ
Why is black-on-yellow so readable?
Yellow #FFFF00 is nearly as bright as white, so black text on it hits about 19.6:1 contrast — second only to pure white. That's why caution signs and highlighters both use the pairing.
Is a full yellow background bad for eyes?
At 100% saturation, yes — extended reading on pure yellow causes visual fatigue for many people. It shines as an accent; for content areas use pastel yellows like #FFF9C4 instead.
What is the hex code for yellow?
Yellow is #FFFF00 in hexadecimal, rgb(255, 255, 0) in RGB and hsl(60, 100%, 50%) in HSL. Paste #FFFF00 into any CSS background-color property to use it.
How do I set a yellow background in CSS?
Add background-color: #FFFF00; to any element, or apply it to the whole page: body { background-color: #FFFF00; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 255, 0) — with identical results.