Yellow Colors
Every shade of yellow in one reference — from soft cream and butter to lemon, gold and mustard. Each color shows HEX, RGB and HSL values you can copy in one click.
Yellow color reference
A systematic yellow scale with hex, RGB and HSL values.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Yellow 100 | #FEF9C3 |
254, 249, 195 | 54°, 97%, 88% | |
| Yellow 200 | #FEF08A |
254, 240, 138 | 53°, 98%, 77% | |
| Yellow 300 | #FDE047 |
253, 224, 71 | 50°, 98%, 64% | |
| Yellow 400 | #FACC15 |
250, 204, 21 | 48°, 96%, 53% | |
| Yellow 500 | #EAB308 |
234, 179, 8 | 45°, 93%, 47% | |
| Yellow 600 | #CA8A04 |
202, 138, 4 | 41°, 96%, 40% | |
| Yellow 700 | #A16207 |
161, 98, 7 | 35°, 92%, 33% | |
| Yellow 800 | #854D0E |
133, 77, 14 | 32°, 81%, 29% | |
| Yellow 900 | #713F12 |
113, 63, 18 | 28°, 73%, 26% | |
| Yellow 950 | #422006 |
66, 32, 6 | 26°, 83%, 14% |
Named yellows
Common named yellows from CSS and design practice.
Complementary and harmonious colors
Yellow sits at 60° on the color wheel. Here are the relationships that pair well with yellow.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Purple / Violet |
| Split-complementary | 150° / 210° | Blue-violet / Blue |
| Triadic | 120° / 240° | Cyan / Magenta |
| Analogous | −30° / +30° | Orange / Lime |
Yellow in design and accessibility
Yellow is the brightest color in the visible spectrum and the most luminous in sRGB. It draws attention instantly, which makes it ideal for warnings, highlights and playful accents. But that same brightness makes yellow difficult to use as a surface or as text — the eye struggles to hold it, and it rarely produces sufficient contrast against light backgrounds.
Common uses in interfaces
- Warnings and pending states — the universal color for “caution”.
- Highlights and stars — ratings, favorite markers, badges.
- Playful and children’s brands — brighter, warmer, friendlier.
- Luxury and finance accents — gold variants communicate premium quality.
Accessibility notes
Yellow is the worst color for text on white. Pure yellow has virtually no contrast against white; even #CA8A04 reaches only about 3.7:1 — passes AA Large only. Yellow text should be placed on dark backgrounds, where it becomes extremely readable. For warnings and badges, pair yellow backgrounds with dark text (#1F2937 or darker).
Frequently asked questions
What is the purest yellow hex code?
Pure yellow is #FFFF00 — RGB (255, 255, 0) at hue 60°. It is the brightest color in sRGB. Because of its extreme luminance, most production yellows are slightly desaturated and darker: #FACC15, #EAB308, or #CA8A04.
What colors go well with yellow?
Neutrals — white, gray, charcoal, black — form the safest pairing. Deep purple and navy create a striking complementary contrast. Analogous partners orange and lime produce a warm, cohesive palette. Yellow with black is bold and high-impact; yellow with gray feels professional and modern.
What is the complementary color of yellow?
Purple (or violet). Yellow at 60° is opposite purple at 240°. Split-complementary partners are blue-violet and blue. Full-saturation yellow on purple vibrates visually; using a muted mustard or deep aubergine produces a more refined combination.
Is yellow accessible for text?
Yellow text on white is essentially unusable — pure yellow has almost no contrast, and even dark yellows fail AA. Always pair yellow text with dark backgrounds, or use darker yellows/ambers with lighter backgrounds. Reserve yellow for backgrounds and badges with dark text on top.
How do I generate a full yellow scale?
Use our shades generator. Enter any yellow as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.