Shades of Red: Names, HEX & RGB Codes
Reds range from soft salmon and coral to deep crimson and maroon. These are the CSS named reds with their exact color codes and the text color that reads best on each.
12 named red colors in CSS
Every name below works directly in CSS (for example color: red;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Light Corallightcoral | #F08080 | rgb(240, 128, 128) | hsl(0, 79%, 72%) | black text, 8.10:1 | |
Salmonsalmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) | black text, 8.39:1 | |
Dark Salmondarksalmon | #E9967A | rgb(233, 150, 122) | hsl(15, 72%, 70%) | black text, 9.10:1 | |
Tomatotomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) | black text, 7.12:1 | |
Indian Redindianred | #CD5C5C | rgb(205, 92, 92) | hsl(0, 53%, 58%) | black text, 5.28:1 | |
Orange Redorangered | #FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) | black text, 6.10:1 | |
Redred | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | black text, 5.25:1 | |
Crimsoncrimson | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) | white text, 4.98:1 | |
Firebrickfirebrick | #B22222 | rgb(178, 34, 34) | hsl(0, 68%, 42%) | white text, 6.67:1 | |
Brownbrown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | white text, 7.08:1 | |
Dark Reddarkred | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) | white text, 10.01:1 | |
Maroonmaroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | white text, 10.94:1 |
Red tint & shade scale
A ten-step scale built from crimson (#DC143C). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using red in design
Red is the standard color for errors, destructive actions and sale badges. Pure red (#FF0000) has only 3.99:1 contrast with white, so white text on a pure red button fails WCAG AA for normal-size text; darker reds like firebrick (#B22222) or darkred (#8B0000) pass comfortably.
A palette to start from
More ideas: warm color palettes, psychology of color, or check any pair in the contrast checker.