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 RGBrgb(255, 255, 0) HSLhsl(60, 100%, 50%) CMYKC:0 M:0 Y:100 K:0
Yellow Shades and Variations
ShadeHEXDescription Light Yellow#FFFFE0Pale, cream-like Lemon#FFF44FBright, citrus Yellow#FFFF00Pure yellow Gold#FFD700Metallic, warm Amber#FFBF00Orange-yellow Mustard#FFDB58Earthy, muted Saffron#F4C430Warm, 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 white1.07:1Fail Yellow on black19.56:1AAA Dark yellow on white3.2:1AA Large
For text, use dark yellow (#B8860B) or gold (#FFD700) on white backgrounds.
Brand Yellows
BrandHEXName McDonald's#FFC300Golden Arches IKEA#FFDA1ASwedish Yellow Snapchat#FFFC00Snap Yellow DHL#FFCC00DHL Yellow IMDb#F5C518IMDb Yellow
Yellow in UI Design
Use CaseRecommended Yellow Warnings#FFC107 (Bootstrap warning) Highlights#FFEB3B (Material yellow) Stars/ratings#FFD700 (Gold) Sale badges#FFFF00 or #FFD700