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 |
Use darker oranges (#D35400, #E65100) for text on white backgrounds.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 |
Orange works especially well for brands in entertainment, food, and technology sectors wanting to stand out from corporate blue competitors.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.