Color family
Orange Colors: Names, HEX Codes & Shades
Orange sits between red and yellow on the color wheel, at hue angles of roughly 15° to 45°. The family covers bright oranges, warm corals and peach-like tints. Very dark oranges are filed under brown, because a darker, less saturated orange is what most people call brown.
Orange is a bright color, and that has a practical effect: orange (#FFA500) reaches only 1.97:1 contrast with white but 10.63:1 with black, so text on an orange background is usually black or very dark. Check each color's page for its exact ratios.
Orange colors at a glance
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Peach | #FFB07C | hsl(24, 100%, 74%) |
| Darkest | Brown Orange | #B96902 | hsl(34, 98%, 37%) |
| Most saturated | Tangerine | #FF9408 | hsl(34, 100%, 52%) |
| Least saturated | Dull Orange | #D8863B | hsl(29, 67%, 54%) |
Popular orange colors
Using orange colors
- Buttons and highlights that must stand out on both light and dark pages.
- Warning and caution states, always together with an icon or a label.
- Food, autumn and sunset themed designs.
- An accent next to blue: orange and blue are close to opposite on the color wheel, which makes a strong, easy to read pairing.
White text on a bright orange usually fails WCAG AA. Use dark text, or darken the orange until white text reaches 4.5:1.
For a softer look, use a peach or coral tint as a background and keep a deeper orange for links and buttons.