Shades of orange
Orange runs from pale peach and apricot through tangerine and pumpkin to burnt orange, rust and copper. Below: 24 named shades with hex codes — tap a chip to copy it.
4 light · 19 medium · 1 dark · 1 pass AA as text on white
- Bisque#FFE4C4
- Peach#FFE5B4
- Peach Puff#FFDAB9
- Apricot#FBCEB1
- Light Salmon#FFA07A
- Orange#FFA500
- Sandy Brown#F4A460
- Atomic tangerine#FF9966
- Dark Salmon#E9967A
- Dark Orange#FF8C00
- Carrot orange#ED9121
- Coral#FF7F50
- Salmon#FA8072
- Tangerine#F28500
- Pumpkin#FF7518
- Tomato#FF6347
- Peru#CD853F
- International orange#FF4F00
- Orange Red#FF4500
- Persimmon#EC5800
- Chocolate#D2691E
- Copper#B87333
- Burnt orange#CC5500
- Rust#B7410E
Orange color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| BisqueCSS | #FFE4C4 | rgb(255, 228, 196) | hsl(33 100% 88%) | (0%, 11%, 23%, 0%) | 1.22:1 | 17.14:1 |
| Peach | #FFE5B4 | rgb(255, 229, 180) | hsl(39 100% 85%) | (0%, 10%, 29%, 0%) | 1.22:1 | 17.11:1 |
| Peach PuffCSS | #FFDAB9 | rgb(255, 218, 185) | hsl(28 100% 86%) | (0%, 15%, 27%, 0%) | 1.31:1 | 15.98:1 |
| Apricot | #FBCEB1 | rgb(251, 206, 177) | hsl(24 90% 84%) | (0%, 18%, 29%, 2%) | 1.44:1 | 14.56:1 |
| Light SalmonCSS | #FFA07A | rgb(255, 160, 122) | hsl(17 100% 74%) | (0%, 37%, 52%, 0%) | 1.98:1 | 10.56:1 |
| OrangeCSS | #FFA500 | rgb(255, 165, 0) | hsl(39 100% 50%) | (0%, 35%, 100%, 0%) | 1.97:1 | 10.63:1 |
| Sandy BrownCSS | #F4A460 | rgb(244, 164, 96) | hsl(28 87% 67%) | (0%, 33%, 61%, 4%) | 2.03:1 | 10.32:1 |
| Atomic tangerine | #FF9966 | rgb(255, 153, 102) | hsl(20 100% 70%) | (0%, 40%, 60%, 0%) | 2.09:1 | 10.00:1 |
| Dark SalmonCSS | #E9967A | rgb(233, 150, 122) | hsl(15 72% 70%) | (0%, 36%, 48%, 9%) | 2.30:1 | 9.10:1 |
| Dark OrangeCSS | #FF8C00 | rgb(255, 140, 0) | hsl(33 100% 50%) | (0%, 45%, 100%, 0%) | 2.33:1 | 9.00:1 |
| Carrot orange | #ED9121 | rgb(237, 145, 33) | hsl(33 85% 53%) | (0%, 39%, 86%, 7%) | 2.42:1 | 8.67:1 |
| CoralCSS | #FF7F50 | rgb(255, 127, 80) | hsl(16 100% 66%) | (0%, 50%, 69%, 0%) | 2.49:1 | 8.40:1 |
| SalmonCSS | #FA8072 | rgb(250, 128, 114) | hsl(6 93% 71%) | (0%, 49%, 54%, 2%) | 2.50:1 | 8.39:1 |
| Tangerine | #F28500 | rgb(242, 133, 0) | hsl(33 100% 47%) | (0%, 45%, 100%, 5%) | 2.58:1 | 8.13:1 |
| Pumpkin | #FF7518 | rgb(255, 117, 24) | hsl(24 100% 55%) | (0%, 54%, 91%, 0%) | 2.68:1 | 7.80:1 |
| TomatoCSS | #FF6347 | rgb(255, 99, 71) | hsl(9 100% 64%) | (0%, 61%, 72%, 0%) | 2.94:1 | 7.12:1 |
| PeruCSS | #CD853F | rgb(205, 133, 63) | hsl(30 59% 53%) | (0%, 35%, 69%, 20%) | 2.99:1 | 7.02:1 |
| International orange | #FF4F00 | rgb(255, 79, 0) | hsl(19 100% 50%) | (0%, 69%, 100%, 0%) | 3.29:1 | 6.37:1 |
| Orange RedCSS | #FF4500 | rgb(255, 69, 0) | hsl(16 100% 50%) | (0%, 73%, 100%, 0%) | 3.44:1 | 6.10:1 |
| Persimmon | #EC5800 | rgb(236, 88, 0) | hsl(22 100% 46%) | (0%, 63%, 100%, 7%) | 3.52:1 | 5.96:1 |
| ChocolateCSS | #D2691E | rgb(210, 105, 30) | hsl(25 75% 47%) | (0%, 50%, 86%, 18%) | 3.63:1 | 5.77:1 |
| Copper | #B87333 | rgb(184, 115, 51) | hsl(29 57% 46%) | (0%, 38%, 72%, 28%) | 3.79:1 | 5.53:1 |
| Burnt orange | #CC5500 | rgb(204, 85, 0) | hsl(25 100% 40%) | (0%, 58%, 100%, 20%) | 4.31:1 | 4.86:1 |
| Rust | #B7410E | rgb(183, 65, 14) | hsl(18 86% 39%) | (0%, 64%, 92%, 28%) | 5.56:1 | 3.77:1 |
Make your own shades of orange
Pick any orange and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using orange in design
Orange is the classic complement to blue and a popular call-to-action color. Mid oranges rarely pass 4.5:1 with white text; burnt orange and rust do better.
To pair it with other hues, start from the color wheel or see colors that go with orange. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of orange are there?
There is no fixed number: screens can show millions of colors and any orange hue can be made lighter, darker or more muted. This page lists 24 named shades of orange — the CSS named colors that fall in the orange family plus widely used names such as tangerine, pumpkin, burnt orange.
What is the hex code for orange?
There is no single official orange. The CSS keyword "orange" is #FFA500; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of orange?
In this list the lightest is Bisque (#FFE4C4) and the darkest is Rust (#B7410E), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of orange are readable as text on white?
1 of the 24 shades reach the WCAG AA ratio of 4.5:1 on white, for example Rust (#B7410E). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with orange?
See the palettes on our "colors that go with orange" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of orange?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of orange" means every variation of the hue, which is how this page uses it.