Shades of Orange
Every useful orange, generated rather than hand-listed.
There are 37 named CSS colors in the orange family, ranging from Blanched Almond (#ffebcd) at the light end to Espresso (#4b3621) at the dark end. The shades generated on this page all sit at hue 62° in OKLCH, so their lightness steps look evenly spaced instead of bunching up in the shadows the way an HSL ramp does.
Every shade of orange on this page is generated, not copied from a list. Each swatch sits at hue 62° in OKLCH with an even perceptual lightness step, so the ramp reads smoothly instead of bunching up at the dark end the way an HSL ramp does — and nothing is clipped outside what an sRGB display can actually show.
Click any swatch to copy its hex code. The sliders let you change how many shades you get, how intense they are, and how much the hue drifts across the ramp.
Three orange shades worth starting from
If you just need a orange that works, these three are safe picks at the light, mid and dark ends of the range.
| Role | Hex | RGB | Contrast on white |
|---|---|---|---|
| Light orange — backgrounds, tints | #f5cfb0 | rgb(245 207 176) | 1.45:1 |
| Mid orange — accents, buttons | #b96a00 | rgb(185 106 0) | 4.1:1 |
| Dark orange — text, borders | #4d2900 | rgb(77 41 0) | 12.86:1 |
Named shades of orange
24 named colors that fall in the orange range, sorted from darkest to lightest, with the contrast ratio each one achieves against a white background. Anything below 4.5:1 is not safe for body text on white.
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Espresso | #4b3621 | rgb(75 54 33) | hsl(30 38.9% 21.2%) | 11.36:1 |
| Fig | #5c4033 | rgb(92 64 51) | hsl(19 28.7% 28%) | 9.39:1 |
| Walnut | #5c4033 | rgb(92 64 51) | hsl(19 28.7% 28%) | 9.39:1 |
| Sepia | #704214 | rgb(112 66 20) | hsl(30 69.7% 25.9%) | 8.47:1 |
| Cinnamon | #7b3f00 | rgb(123 63 0) | hsl(30.7 100% 24.1%) | 8.22:1 |
| Coffee | #6f4e37 | rgb(111 78 55) | hsl(24.6 33.7% 32.5%) | 7.44:1 |
| Mud | #70543e | rgb(112 84 62) | hsl(26.4 28.7% 34.1%) | 6.94:1 |
| Saddle Brown | #8b4513 | rgb(139 69 19) | hsl(25 75.9% 31%) | 7.1:1 |
| Ginger | #b06500 | rgb(176 101 0) | hsl(34.4 100% 34.5%) | 4.46:1 |
| Burnt Orange | #cc5500 | rgb(204 85 0) | hsl(25 100% 40%) | 4.31:1 |
| Caramel | #af6e4d | rgb(175 110 77) | hsl(20.2 38.9% 49.4%) | 4.07:1 |
| Copper | #b87333 | rgb(184 115 51) | hsl(28.9 56.6% 46.1%) | 3.79:1 |
| Chocolate | #d2691e | rgb(210 105 30) | hsl(25 75% 47.1%) | 3.63:1 |
| Bamboo | #da6304 | rgb(218 99 4) | hsl(26.6 96.4% 43.5%) | 3.64:1 |
| Ochre | #cc7722 | rgb(204 119 34) | hsl(30 71.4% 46.7%) | 3.37:1 |
| Bronze | #cd7f32 | rgb(205 127 50) | hsl(29.8 60.8% 50%) | 3.14:1 |
| Peru | #cd853f | rgb(205 133 63) | hsl(29.6 58.7% 52.5%) | 2.99:1 |
| Camel | #c19a6b | rgb(193 154 107) | hsl(32.8 41% 58.8%) | 2.59:1 |
| Pumpkin | #ff7518 | rgb(255 117 24) | hsl(24.2 100% 54.7%) | 2.69:1 |
| Honey | #eb9605 | rgb(235 150 5) | hsl(37.8 95.8% 47.1%) | 2.36:1 |
| Darkorange | #ff8c00 | rgb(255 140 0) | hsl(32.9 100% 50%) | 2.33:1 |
| Latte | #c8ab8a | rgb(200 171 138) | hsl(31.9 36% 66.3%) | 2.18:1 |
| Marigold | #eaa221 | rgb(234 162 33) | hsl(38.5 82.7% 52.4%) | 2.17:1 |
| Sandy Brown | #f4a460 | rgb(244 164 96) | hsl(27.6 87.1% 66.7%) | 2.03:1 |
Using orange in an interface
The two badges next to each generated shade are its contrast ratio against white and against black. The first step where one of them turns green is the lightest orange you can safely set body text in on that background — everything lighter is decoration, not copy.
For large areas, pick from the light end and let a darker shade of the same hue carry the text. That keeps the whole surface in one hue family, which is what makes an interface feel deliberate rather than assembled.
Frequently asked questions
What are the hex codes for shades of orange?
The ramp at the top of this page generates them — click any swatch to copy it. Three reliable picks are #f5cfb0 for light, #b96a00 for mid and #4d2900 for dark orange.
What is the hex code for orange?
The closest single answer is Chocolate at #d2691e, but orange is a range rather than one value. This page lists 24 named orange shades and generates as many more as you want.
How many shades of orange are there?
Effectively unlimited — an 8-bit display can show over 16 million colors, and a large share of them read as this family. The useful question is how many distinguishable steps you need, which is usually somewhere between 9 and 12 for a design system.
What colors go well with orange?
Its perceptual complement sits at hue 242°, and the two neighbors either side of that make a softer split-complementary set. The palette generator builds all of them from any starting orange.
Which shade of orange is accessible for text?
On a white background you need 4.5:1 for body text. In the table above that is every row at or above 4.5:1 — generally the darker half of the family. The contrast checker will confirm any specific pair and suggest the nearest passing color if it fails.