Shades of Orange
← Shades generatorSeven keywords, one late arrival, and not one of them safe for body text
Orange is the keyword that arrived late. The X11 list that CSS inherited its colour names from went from red straight into brown with almost nothing in between, so orange was added by name in CSS2.1 to close a gap that authors kept running into. The seven entries here still show that thin coverage: coral, tomato and orangered lean red, peachpuff and sandybrown lean pale, and darkorange separates from orange by hue rather than lightness, sitting about six degrees redder at the same saturation.
Check the ratio column and a pattern appears immediately. Orange against white is about 1.97 to 1, darkorange 2.33, coral 2.50, tomato 2.95. The strongest entry in the family is orangered at roughly 3.44 to 1, which clears the 3 to 1 bar for large text and nothing more. No named orange passes AA for body copy, and by the time you darken one far enough to get there, most people looking at it will call it brown.
Every CSS orange name, with its contrast on white
The 20 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| floralwhite | #fffaf0 | rgb(255, 250, 240) | 1.04:1 | fails |
| seashell | #fff5ee | rgb(255, 245, 238) | 1.07:1 | fails |
| oldlace | #fdf5e6 | rgb(253, 245, 230) | 1.08:1 | fails |
| linen | #faf0e6 | rgb(250, 240, 230) | 1.12:1 | fails |
| papayawhip | #ffefd5 | rgb(255, 239, 213) | 1.13:1 | fails |
| blanchedalmond | #ffebcd | rgb(255, 235, 205) | 1.17:1 | fails |
| antiquewhite | #faebd7 | rgb(250, 235, 215) | 1.17:1 | fails |
| moccasin | #ffe4b5 | rgb(255, 228, 181) | 1.23:1 | fails |
| peachpuff | #ffdab9 | rgb(255, 218, 185) | 1.31:1 | fails |
| gold | #ffd700 | rgb(255, 215, 0) | 1.40:1 | fails |
| orange | #ffa500 | rgb(255, 165, 0) | 1.97:1 | fails |
| lightsalmon | #ffa07a | rgb(255, 160, 122) | 1.99:1 | fails |
| sandybrown | #f4a460 | rgb(244, 164, 96) | 2.03:1 | fails |
| goldenrod | #daa520 | rgb(218, 165, 32) | 2.24:1 | fails |
| darksalmon | #e9967a | rgb(233, 150, 122) | 2.31:1 | fails |
| darkorange | #ff8c00 | rgb(255, 140, 0) | 2.33:1 | fails |
| coral | #ff7f50 | rgb(255, 127, 80) | 2.50:1 | fails |
| salmon | #fa8072 | rgb(250, 128, 114) | 2.50:1 | fails |
| tomato | #ff6347 | rgb(255, 99, 71) | 2.95:1 | fails |
| orangered | #ff4500 | rgb(255, 69, 0) | 3.44:1 | AA large |
The names read like a kitchen inventory because that is roughly how they were made: someone at a workstation needed a label, picked a familiar object and typed it in. Tomato, coral, peachpuff and sandybrown all date from that hand-maintained file. Orange is the exception, added to the web set later because its absence was too obvious to leave. Orangered is the only compound here describing a position between two hues rather than a thing.
Tints, shades and tones of #ffa500
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using orange in an interface
Orange earns its keep as a surface and a signal, not as text. It works for warning banners, active states, chart series and anything with a dark label sitting on top of it. What goes wrong is orange text on white, orange on cream, and orange next to red where the two collapse into one another at small sizes. If you need an orange that reads as text, take a shade several steps down and accept that it will look brown.
FAQ
- What hex code is orange in CSS?
- The keyword orange is #FFA500, rgb(255, 165, 0). It is fully saturated with a hue near 39 degrees, which puts it closer to yellow than most people expect. Darkorange, #FF8C00, is the same lightness and saturation but about six degrees redder, so the difference you see between them is hue, not depth.
- What is the difference between coral and tomato?
- Both sit in the red end of the orange band, but tomato is redder and slightly darker. Tomato is #FF6347 at hue 9, coral is #FF7F50 at hue 16, and coral carries a little more lightness. Side by side, tomato reads as a warm red and coral as a pale orange. Alone, most people would not name either correctly.
- How do I get a readable orange for text?
- Mix it toward black until the contrast ratio against white clears 4.5 to 1, which the generator reports as you drag. Expect to land somewhere near saddlebrown territory. If the result has to stay recognisably orange, invert the problem: put the orange behind dark text instead, where a ratio of 2 to 1 against white is no longer the number that matters.
