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 |
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 |