Color family
Yellow Colors: Names, HEX Codes & Shades
Yellow is the lightest of the pure hues. In this library the yellow family is centered on hue angles of roughly 45° to 70° at medium and high lightness, and includes gold, mustard, khaki and pale cream. Dark, olive-looking yellows are filed under green.
Because yellow is so light, pure yellow (#FFFF00) has a contrast ratio of just 1.07:1 with white but 19.55:1 with black. Yellow text on white is almost invisible, while yellow on a dark background is one of the easiest combinations to read. Every yellow in this family reaches 4.5:1 with black text.
Yellow colors at a glance
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Light Yellow | #FFFFE0 | hsl(60, 100%, 94%) |
| Darkest | Brown Yellow | #B29705 | hsl(51, 95%, 36%) |
| Most saturated | Yellow Tan | #FFE36E | hsl(48, 100%, 72%) |
| Least saturated | Dark Khaki | #BDB76B | hsl(56, 38%, 58%) |
Popular yellow colors
Using yellow colors
- Highlights, markers and badges on dark or neutral backgrounds.
- Backgrounds for notes and callouts, using a pale yellow with dark text.
- Warning symbols, where a dark outline or icon keeps the shape readable.
- Backgrounds behind black text, where the contrast is very high.
Do not use yellow text on white. If you need yellow as an accent on a light page, put it behind dark text.
Gold and mustard are darker and more saturated than pure yellow, so they hold their shape better on white, but check the ratio on each color's page before using one for text.