Shades of Orange: Color Names & Hex Codes
There are 7 CSS named colors in the orange range, from the lightest, Papaya Whip, to the darkest, Orange Red. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Orange Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Light, Mid-tone and Dark Shades of Orange
Light shades of orange
Pale enough to work as backgrounds. Black text has the higher contrast on all 6 of them. Papaya Whip, Peach Puff, Orange, Light Salmon, Dark Salmon and Dark Orange.
Mid-tone shades of orange
Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text has the higher contrast on this color. Orange Red.
Orange Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#FFEFD5 | rgb(255, 239, 213) | hsl(37, 100%, 92%) | 18.56:1 | 1.13:1 | Black | |
#FFDAB9 | rgb(255, 218, 185) | hsl(28, 100%, 86%) | 15.98:1 | 1.31:1 | Black | |
#FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | 10.63:1 | 1.97:1 | Black | |
#FFA07A | rgb(255, 160, 122) | hsl(17, 100%, 74%) | 10.56:1 | 1.99:1 | Black | |
#E9967A | rgb(233, 150, 122) | hsl(15, 72%, 70%) | 9.11:1 | 2.31:1 | Black | |
#FF8C00 | rgb(255, 140, 0) | hsl(33, 100%, 50%) | 9:1 | 2.33:1 | Black | |
#FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) | 6.1:1 | 3.44:1 | Black |
Shades of Orange FAQ
What are the shades of orange in CSS?
CSS Color 4 does not group its named colors into families, but 7 of them fall in the orange range. From lightest to darkest: Papaya Whip (#FFEFD5), Peach Puff (#FFDAB9), Orange (#FFA500), Light Salmon (#FFA07A), Dark Salmon (#E9967A), Dark Orange (#FF8C00) and Orange Red (#FF4500).
What is the hex code for orange?
The CSS named color orange is #FFA500, which is RGB(255, 165, 0). The other shades on this page each have their own code.
Which shade of orange can I use for text on a white background?
None of these shades reaches 4.5:1 on white; the highest is Orange Red at 3.44:1.
Are peach, burnt orange and tangerine CSS colors?
No. Peach, burnt orange, tangerine and apricot are not CSS named colors, so none has a standard hex code. Peach Puff (#FFDAB9) is the nearest CSS color for peach, and Dark Orange (#FF8C00) is the nearest for tangerine.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).