Shades of Red
← Shades generatorPure red is about 4:1 on white, which is not enough for body text
The most useful thing to know about red on a screen is that #FF0000 measures about 4:1 against white. That is below the 4.5:1 needed for normal text and only just above the 3:1 allowed for large text, so the most alarming colour available is also one of the worst choices for an error message. Red only becomes readable once it darkens: crimson clears the bar at roughly 5:1, firebrick at about 6.7:1, darkred at close to 10:1.
Look at the spread and the family leans light. Salmon, lightcoral, lightsalmon, tomato and indianred are all pale or dusty, and only maroon, darkred, brown and firebrick sit in the dark end. That is an accident of where the names came from rather than a plan, and it means most red palettes need shades generated from a base rather than picked off the list. The tints are already there; the depth is not.
Every CSS red name, with its contrast on white
The 15 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 |
|---|---|---|---|---|
| mistyrose | #ffe4e1 | rgb(255, 228, 225) | 1.20:1 | fails |
| pink | #ffc0cb | rgb(255, 192, 203) | 1.54:1 | fails |
| lightpink | #ffb6c1 | rgb(255, 182, 193) | 1.65:1 | fails |
| coral | #ff7f50 | rgb(255, 127, 80) | 2.50:1 | fails |
| salmon | #fa8072 | rgb(250, 128, 114) | 2.50:1 | fails |
| lightcoral | #f08080 | rgb(240, 128, 128) | 2.59:1 | fails |
| tomato | #ff6347 | rgb(255, 99, 71) | 2.95:1 | fails |
| palevioletred | #db7093 | rgb(219, 112, 147) | 3.11:1 | AA large |
| orangered | #ff4500 | rgb(255, 69, 0) | 3.44:1 | AA large |
| indianred | #cd5c5c | rgb(205, 92, 92) | 3.98:1 | AA large |
| red | #ff0000 | rgb(255, 0, 0) | 4.00:1 | AA large |
| crimson | #dc143c | rgb(220, 20, 60) | 4.99:1 | AA |
| firebrick | #b22222 | rgb(178, 34, 34) | 6.68:1 | AA |
| darkred | #8b0000 | rgb(139, 0, 0) | 10.01:1 | AAA |
| maroon | #800000 | rgb(128, 0, 0) | 10.95:1 | AAA |
Red and maroon arrived with the sixteen HTML colours, which is why maroon is #800000, red halved in one channel. The rest are X11 names borrowed from objects: firebrick from kiln brick, tomato and salmon and coral from the kitchen and the shore, indianred from an iron oxide earth pigment. Orange was not among the original sixteen and had to be added to CSS later, while orangered came in with the X11 set.
Tints, shades and tones of #e01b24
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 red in an interface
Red is the strongest signal in an interface, which is why it should be rationed: if delete, validation errors, unread badges and a promotional banner are all red, none of them reads as urgent. Use crimson or firebrick for error text so it passes contrast, keep pure red for icons and borders, and never let red be the only difference between two states, since red-green deficiency will flatten it.
FAQ
- What is the hex code for crimson?
- Crimson is #DC143C, or rgb(220, 20, 60). It measures about 5:1 against white, which clears AA for normal text where pure red does not, and it is dark enough to read while still looking like a warning. That combination makes it a better default for error copy than #FF0000, which most people reach for first.
- Is maroon the same as dark red?
- Not quite. Maroon is #800000 and darkred is #8B0000, so maroon is the darker of the two by eleven units in the red channel, despite darkred having the word dark in its name. Against white maroon measures near 11:1 and darkred near 10:1. Both are safe for text; the difference between them is not visible in a small swatch.
- How do I make a lighter red without it turning pink?
- Add white to a pure red and you get pink, because a tint moves lightness without changing hue. If you want a lighter red that still reads as red, take some saturation out at the same time, which is a tone rather than a tint, or move slightly toward orange as you lighten. Indianred and lightcoral are both greyed reds of exactly this kind.
