Orange Color Codes: Hex, RGB & HSL Values for Orange
Why Orange Is the Most Energetic Design Color
Orange is the color of action. It combines the urgency of red with the optimism of yellow, creating a hue that's impossible to ignore. Studies show orange CTAs can increase conversion rates by up to 21% compared to more subdued colors. It's warm, friendly, and confident — which is why brands like Amazon, Home Depot, and Fanta use it prominently. Orange screams "click here" without feeling aggressive, making it a designer's secret weapon for driving engagement.
Complete Orange Color Reference Table
| Color Name | Hex Code | RGB | HSL |
|---|---|---|---|
| Orange (Pure) | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| Dark Orange | #FF8C00 | 255, 140, 0 | 33°, 100%, 50% |
| Orange (Web) | #FF6600 | 255, 102, 0 | 24°, 100%, 50% |
| Coral | #FF7F50 | 255, 127, 80 | 16°, 100%, 66% |
| Orange Red | #FF4500 | 255, 69, 0 | 16°, 100%, 50% |
| Tailwind Orange-500 | #F97316 | 249, 115, 22 | 25°, 95%, 53% |
| Tailwind Orange-400 | #FB923C | 251, 146, 60 | 24°, 96%, 61% |
| Tailwind Orange-600 | #EA580C | 234, 88, 12 | 22°, 90%, 48% |
| Pastel Orange | #FFB347 | 255, 179, 71 | 33°, 100%, 64% |
| Burnt Orange | #CC5500 | 204, 85, 0 | 25°, 100%, 40% |
| Light Salmon | #FF9966 | 255, 153, 102 | 20°, 100%, 70% |
| Deep Orange | #E65100 | 230, 81, 0 | 21°, 100%, 45% |
Orange Color Palettes for Design
High-Energy CTA Palette
Optimized for conversions, buttons, and call-to-action elements:
| Role | Hex | RGB |
|---|---|---|
| Primary CTA | #F97316 | 249, 115, 22 |
| Hover State | #EA580C | 234, 88, 12 |
| Background | #FFF7ED | 255, 247, 237 |
| Text | #431407 | 67, 20, 7 |
| Border | #FED7AA | 254, 215, 170 |
Warm Creative Palette
Perfect for food brands, creative portfolios, and lifestyle websites:
| Role | Hex | RGB |
|---|---|---|
| Primary | #FB923C | 251, 146, 60 |
| Secondary | #FDBA74 | 253, 186, 116 |
| Accent | #FED7AA | 254, 215, 170 |
Where to Use Orange in Design
- CTAs and buttons: Orange is the ultimate conversion color. It stands out without being alarming and creates a sense of urgency
- Food & beverage: Orange stimulates appetite — used by Fanta, Sunkist, and countless restaurant brands
- Sports & fitness: Energetic oranges convey power and enthusiasm — common in athletic branding
- SaaS pricing pages: Orange "Upgrade" buttons consistently outperform other colors in A/B tests
- Warning and alert UI: Orange is the universal color for caution — use it for non-critical alerts and attention-grabbing notices
Orange Accessibility Considerations
Orange works well for large UI elements and CTAs but should be used carefully for text. Light oranges fail WCAG contrast against white backgrounds. Use dark text like #431407 or #1C1917 on orange backgrounds. For orange text on white, ensure the shade is dark enough — #EA580C or darker passes WCAG AA. Be aware that orange-red combinations can be indistinguishable for users with protanopia (red color blindness).
Frequently Asked Questions
Pure orange is #FFA500. Web-safe orange is #FFA500 or #FF8C00 (dark orange). The popular Tailwind orange-500 is #F97316.
Pure orange is rgb(255, 165, 0). Dark orange is rgb(255, 140, 0). Orange-red is rgb(255, 69, 0).
Orange spans roughly 15° to 45° on the HSL wheel. Pure orange sits at 39°, with darker burnt oranges around 20-25°.
Orange combines urgency (from red) with optimism (from yellow). It creates a strong visual signal that encourages action without feeling dangerous or aggressive. A/B tests consistently show orange outperforming other CTA colors.
Orange pairs beautifully with navy blue for classic contrast, teal for modern balance, dark gray for sophistication, and cream or white for a clean, warm look. Avoid pairing with similar warm colors that compete for attention.