Orange HEX Code
The HEX code for orange is #FFA500. Orange is a secondary color created by mixing red and yellow. It's warm, energetic, and highly visible, making it popular for call-to-action buttons, warnings, and brands wanting to convey enthusiasm and creativity.
Orange Color Values
| Format | Value |
|---|---|
| HEX | #FFA500 |
| RGB | rgb(255, 165, 0) |
| HSL | hsl(39, 100%, 50%) |
| CMYK | C:0 M:35 Y:100 K:0 |
Orange Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Peach | #FFDAB9 | Light, soft |
| Light Orange | #FFD580 | Pastel orange |
| Orange | #FFA500 | CSS orange |
| Dark Orange | #FF8C00 | Deeper orange |
| Coral | #FF7F50 | Pink-orange |
| Tomato | #FF6347 | Red-orange |
| Burnt Orange | #CC5500 | Earthy, deep |
| Rust | #B7410E | Dark, brown-tinted |
Orange in Design
Orange conveys:
- Energy: Action, enthusiasm
- Creativity: Fun, playfulness
- Warmth: Autumn, comfort
- Urgency: CTAs, sales
Using Orange for CTAs
Orange buttons have high conversion rates:
``css
.cta-button {
background-color: #FF6B00;
color: white;
padding: 12px 24px;
border-radius: 6px;
}
.cta-button:hover {
background-color: #E66000;
}
``
Orange Accessibility
| Combination | Contrast | WCAG |
|---|---|---|
| Orange on white | 2.9:1 | Fail for text |
| Dark orange on white | 3.4:1 | AA Large |
| White on dark orange | 4.3:1 | AA |
Brand Oranges
| Brand | HEX | Name |
|---|---|---|
| Amazon | #FF9900 | Amazon Orange |
| Nickelodeon | #FF6600 | Nick Orange |
| SoundCloud | #FF5500 | SoundCloud Orange |
| Fanta | #F89620 | Fanta Orange |
| HubSpot | #FF7A59 | HubSpot Orange |
| Home Depot | #F96302 | Home Depot Orange |
Orange in UI Frameworks
| Framework | Orange | Use |
|---|---|---|
| Bootstrap | #FD7E14 | Warning variant |
| Material | #FF9800 | Primary orange |
| Tailwind | #F97316 | orange-500 |