Orange colors
18 orange colors, sorted light to dark. The lightest is Light Salmon at 74 percent lightness, the darkest is Burnt Orange at 40 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Light Salmon | #FFA07A | hsl(17, 100%, 74%) | oklch(79.38% 0.1248 42.42) | 1.99:1 | 9.62:1 |
| Salmon | #FA8072 | hsl(6, 93%, 71%) | oklch(73.50% 0.1515 28.06) | 2.50:1 | 7.65:1 |
| Atomic Tangerine | #FF9966 | hsl(20, 100%, 70%) | oklch(77.89% 0.1393 46.57) | 2.10:1 | 9.11:1 |
| Sandy Brown | #F4A460 | hsl(28, 87%, 67%) | oklch(78.40% 0.1269 59.71) | 2.03:1 | 9.41:1 |
| Coral | #FF7F50 | hsl(16, 100%, 66%) | oklch(73.51% 0.1680 40.25) | 2.50:1 | 7.66:1 |
| Pastel Orange | #FFB347 | hsl(35, 100%, 64%) | oklch(82.08% 0.1486 72.10) | 1.78:1 | 10.74:1 |
| Terracotta | #E2725B | hsl(10, 70%, 62%) | oklch(67.74% 0.1444 32.94) | 3.09:1 | 6.19:1 |
| Tangerine | #FF8A3D | hsl(24, 100%, 62%) | oklch(75.00% 0.1668 50.54) | 2.35:1 | 8.16:1 |
| Apricot | #FBB040 | hsl(36, 96%, 62%) | oklch(81.04% 0.1499 72.99) | 1.84:1 | 10.38:1 |
| Burnt Sienna | #E97451 | hsl(14, 78%, 62%) | oklch(68.85% 0.1535 37.41) | 2.97:1 | 6.45:1 |
| Honey Amber | #FFB03A | hsl(36, 100%, 61%) | oklch(81.44% 0.1553 72.34) | 1.82:1 | 10.50:1 |
| Amber Glow | #E08E45 | hsl(28, 71%, 57%) | oklch(71.81% 0.1327 59.69) | 2.58:1 | 7.40:1 |
| Carrot | #ED9121 | hsl(33, 85%, 53%) | oklch(73.67% 0.1576 64.05) | 2.42:1 | 7.90:1 |
| Orange | #FFA500 | hsl(39, 100%, 50%) | oklch(79.27% 0.1710 70.67) | 1.97:1 | 9.69:1 |
| Dark Orange | #FF8C00 | hsl(33, 100%, 50%) | oklch(75.05% 0.1791 58.28) | 2.33:1 | 8.20:1 |
| Marigold | #FF9F00 | hsl(37, 100%, 50%) | oklch(78.22% 0.1722 67.58) | 2.06:1 | 9.31:1 |
| Chocolate | #D2691E | hsl(25, 75%, 47%) | oklch(63.44% 0.1550 50.27) | 3.63:1 | 5.27:1 |
| Burnt Orange | #CC5500 | hsl(25, 100%, 40%) | oklch(59.48% 0.1687 45.48) | 4.31:1 | 4.44:1 |
Where orange sits on the wheel
In HSL terms this family covers roughly 15 to 45 degrees. Orange occupies a narrow slice of the wheel between red and yellow, and it is the family where lightness moves fastest: a 10 degree hue shift changes the perceived warmth far less than a 10 percent lightness shift does.
Working with orange in an interface
Oranges hold up well as accent and highlight colors because they stay distinguishable from both the red and the yellow families at small sizes. They are also the family that most often needs a dark text color rather than white, since mid oranges land in the awkward band where neither reaches AA comfortably.
In this set, 0 of 18 orange colors clear WCAG AA for normal text on a white background, and 17 of 18 clear it as text on ink black. The most saturated is Dark Orange at an OKLCH chroma of 0.179, the most muted is Light Salmon at 0.125. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Orange on white almost never passes AA for normal text, and orange with white text almost never passes either. If you need readable orange text, darken well past the point where it still looks orange in isolation, or move the color to a background and put ink on it.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.