Yellow HEX Code
The HEX code for pure yellow is #FFFF00. Yellow is created by combining maximum red and green with no blue in the RGB color model. It's one of the most attention-grabbing colors, making it popular for warnings, highlights, and call-to-action elements.
Yellow Color Values
| Format | Value |
|---|---|
| HEX | #FFFF00 |
| RGB | rgb(255, 255, 0) |
| HSL | hsl(60, 100%, 50%) |
| CMYK | C:0 M:0 Y:100 K:0 |
Yellow Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Yellow | #FFFFE0 | Pale, cream-like |
| Lemon | #FFF44F | Bright, citrus |
| Yellow | #FFFF00 | Pure yellow |
| Gold | #FFD700 | Metallic, warm |
| Amber | #FFBF00 | Orange-yellow |
| Mustard | #FFDB58 | Earthy, muted |
| Saffron | #F4C430 | Warm, spicy |
| Dark Yellow | #CCCC00 | Olive-tinted |
Yellow in Design
Yellow conveys:
- Attention: Warnings, highlights
- Optimism: Happiness, positivity
- Energy: Action, excitement
- Caution: Safety signs, alerts
Using Yellow Effectively
``css
/* Warning/alert styling */
.alert-warning {
background-color: #FFF3CD;
border-color: #FFECB5;
color: #856404;
}
/* Highlight text */
.highlight {
background-color: #FFFF00;
}
/* Softer accent */
.accent {
color: #F4C430;
}
`
Yellow Accessibility Concerns
Pure yellow (#FFFF00) has low contrast against white backgrounds:
| Combination | Contrast Ratio | WCAG |
|---|---|---|
| Yellow on white | 1.07:1 | Fail |
| Yellow on black | 19.56:1 | AAA |
| Dark yellow on white | 3.2:1 | AA Large |
For text, use dark yellow (#B8860B) or gold (#FFD700) on white backgrounds.Brand Yellows
| Brand | HEX | Name |
|---|---|---|
| McDonald's | #FFC300 | Golden Arches |
| IKEA | #FFDA1A | Swedish Yellow |
| Snapchat | #FFFC00 | Snap Yellow |
| DHL | #FFCC00 | DHL Yellow |
| IMDb | #F5C518 | IMDb Yellow |
Yellow in UI Design
| Use Case | Recommended Yellow |
|---|---|
| Warnings | #FFC107 (Bootstrap warning) |
| Highlights | #FFEB3B (Material yellow) |
| Stars/ratings | #FFD700 (Gold) |
| Sale badges | #FFFF00 or #FFD700 |
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.