Color family
Shades of orange
A light, bright orange leaning yellow. The reference orange is #FFA500, as defined by the CSS named color.
| HEX | #FFA500 | |
|---|---|---|
| RGB | rgb(255, 165, 0) | |
| HSL | hsl(39, 100%, 50%) | |
| HSV | hsv(39, 100%, 100%) | |
| OKLCH | oklch(79.3% 0.171 70.7) | |
| CMYK* | 0, 35, 100, 0 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is orange?
Orange lies between red and yellow, and the fruit gave the colour its English name: before oranges reached Europe, the colour was simply called yellow-red. The CSS keyword orange is a warm, yellowish orange; deeper oranges such as burnt orange and rust move toward brown, lighter ones such as peach and apricot toward beige.
Orange hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of orange in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Orange | #FFA500 | CSS named color | Reference shown on this page |
| Orange | #F97306 | xkcd Color Survey | Noticeably different · 55% similar |
| Orange | #FFA500 | Color Names (meodai) | Same color |
Orange vs Coral
#FFA500
#FF7F50
Coral is a pinker, lighter orange; pure orange has no pink in it. In numbers: the two are 58% similar (OKLab distance 0.106). See Coral for its own codes.
Named shades of orange
44 names in the CSS keywords and the xkcd Color Survey belong to the orange family. To give a fuller range, 16 more orange names come from the Color Names list. They are sorted from light to dark; click a swatch to copy its code, or open the ones with their own page.
Light orange shades 17
Medium orange shades 43
Tints and shades of orange
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with orange
Classic color-wheel combinations built on #FFA500, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Orange with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a orange background, black text is the better choice.
Use orange in CSS
.orange {
color: #FFA500;
/* or */ color: rgb(255 165 0);
/* or */ color: hsl(39 100% 50%);
/* or */ color: oklch(79.3% 0.171 70.7);
/* CSS keyword */ color: orange;
}