Red colors
18 red colors, sorted light to dark. The lightest is Tomato at 64 percent lightness, the darkest is Barn Red at 25 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Tomato | #FF6347 | hsl(9, 100%, 64%) | oklch(69.62% 0.1955 32.32) | 2.95:1 | 6.50:1 |
| Indian Red | #CD5C5C | hsl(0, 53%, 58%) | oklch(61.54% 0.1442 22.23) | 3.98:1 | 4.81:1 |
| Vermilion | #E34234 | hsl(5, 76%, 55%) | oklch(61.29% 0.2000 29.14) | 4.12:1 | 4.64:1 |
| Red | #FF0000 | hsl(0, 100%, 50%) | oklch(62.80% 0.2577 29.23) | 4.00:1 | 4.79:1 |
| Orange Red | #FF4500 | hsl(16, 100%, 50%) | oklch(66.02% 0.2294 35.40) | 3.44:1 | 5.56:1 |
| Scarlet | #FF2400 | hsl(8, 100%, 50%) | oklch(63.79% 0.2484 31.02) | 3.82:1 | 5.02:1 |
| Redwood | #A45A52 | hsl(6, 33%, 48%) | oklch(55.20% 0.0986 27.19) | 5.04:1 | 3.79:1 |
| Crimson | #DC143C | hsl(348, 83%, 47%) | oklch(57.12% 0.2219 20.09) | 4.99:1 | 3.84:1 |
| Cardinal | #C41E3A | hsl(350, 73%, 44%) | oklch(53.08% 0.1969 19.54) | 5.84:1 | 3.28:1 |
| Rich Carmine | #D70040 | hsl(342, 100%, 42%) | oklch(55.75% 0.2232 17.46) | 5.30:1 | 3.61:1 |
| Cherry Red | #D2042D | hsl(348, 96%, 42%) | oklch(54.62% 0.2189 22.62) | 5.53:1 | 3.46:1 |
| Sinopia | #CB410B | hsl(17, 90%, 42%) | oklch(56.86% 0.1829 37.56) | 4.88:1 | 3.92:1 |
| Firebrick | #B22222 | hsl(0, 68%, 42%) | oklch(49.68% 0.1797 26.81) | 6.68:1 | 2.87:1 |
| Chinese Red | #AA381E | hsl(11, 70%, 39%) | oklch(50.32% 0.1542 34.17) | 6.38:1 | 3.00:1 |
| Rust | #B7410E | hsl(18, 86%, 39%) | oklch(53.51% 0.1625 39.51) | 5.56:1 | 3.44:1 |
| Carmine | #960018 | hsl(350, 100%, 29%) | oklch(42.43% 0.1717 24.12) | 9.09:1 | 2.11:1 |
| Dark Red | #8B0000 | hsl(0, 100%, 27%) | oklch(39.99% 0.1641 29.23) | 10.01:1 | 1.91:1 |
| Barn Red | #7C0A02 | hsl(4, 97%, 25%) | oklch(37.33% 0.1462 30.21) | 11.05:1 | 1.73:1 |
Where red sits on the wheel
In HSL terms this family covers roughly 345 to 15 degrees, wrapping past zero. Red sits at the wrap point of the hue wheel, which is why a red palette is the one place a naive hue sort falls apart: 5 degrees and 355 degrees are neighbours that a numeric sort puts at opposite ends. Every red here is within a few degrees of pure red or of the crimson and vermilion range just below it.
Working with red in an interface
Red is the most common destructive-action color in interfaces, so a red you introduce for decoration will be read as a warning whether you meant it or not. If red is your brand color, give errors a distinctly darker or more saturated step than the brand step, and never rely on hue alone to tell them apart.
In this set, 12 of 18 red colors clear WCAG AA for normal text on a white background, and 6 of 18 clear it as text on ink black. The most saturated is Red at an OKLCH chroma of 0.258, the most muted is Redwood at 0.099. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Pure red on white lands just under 4:1, which fails WCAG AA for normal text by a margin most people do not expect. Red link text and red body copy on white need a darker step, not a bolder weight.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.