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 RGBrgb(255, 165, 0) HSLhsl(39, 100%, 50%) CMYKC:0 M:35 Y:100 K:0
Orange Shades and Variations
ShadeHEXDescription Peach#FFDAB9Light, soft Light Orange#FFD580Pastel orange Orange#FFA500CSS orange Dark Orange#FF8C00Deeper orange Coral#FF7F50Pink-orange Tomato#FF6347Red-orange Burnt Orange#CC5500Earthy, 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 white2.9:1Fail for text Dark orange on white3.4:1AA Large White on dark orange4.3:1AA
Use darker oranges (#D35400, #E65100) for text on white backgrounds.
Brand Oranges
BrandHEXName Amazon#FF9900Amazon Orange Nickelodeon#FF6600Nick Orange SoundCloud#FF5500SoundCloud Orange Fanta#F89620Fanta Orange HubSpot#FF7A59HubSpot Orange Home Depot#F96302Home Depot Orange
Orange in UI Frameworks
FrameworkOrangeUse Bootstrap#FD7E14Warning variant Material#FF9800Primary orange | Tailwind | #F97316 | orange-500 |
Orange works especially well for brands in entertainment, food, and technology sectors wanting to stand out from corporate blue competitors.