Shades of red
Red covers orange-leaning scarlet and vermilion, true reds like cardinal and candy-apple, and dark wine, burgundy and oxblood tones. Below: 22 named shades with hex codes — tap a chip to copy it.
0 light · 12 medium · 10 dark · 14 pass AA as text on white
- Light Coral#F08080
- Tomato#FF6347
- Orange Red#FF4500
- Scarlet#FF2400
- Candy apple red#FF0800
- Red#FF0000
- Indian Red#CD5C5C
- Vermilion#E34234
- Ruby#E0115F
- Brick red#CB4154
- Cadmium red#E30022
- Crimson#DC143C
- Fire engine red#CE2029
- Cardinal#C41E3A
- Firebrick#B22222
- Brown#A52A2A
- Carmine#960018
- Garnet#733635
- Wine#722F37
- Dark Red#8B0000
- Burgundy#800020
- Maroon#800000
Red color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Light CoralCSS | #F08080 | rgb(240, 128, 128) | hsl(0 79% 72%) | (0%, 47%, 47%, 6%) | 2.59:1 | 8.10:1 |
| TomatoCSS | #FF6347 | rgb(255, 99, 71) | hsl(9 100% 64%) | (0%, 61%, 72%, 0%) | 2.94:1 | 7.12:1 |
| Orange RedCSS | #FF4500 | rgb(255, 69, 0) | hsl(16 100% 50%) | (0%, 73%, 100%, 0%) | 3.44:1 | 6.10:1 |
| Scarlet | #FF2400 | rgb(255, 36, 0) | hsl(8 100% 50%) | (0%, 86%, 100%, 0%) | 3.81:1 | 5.50:1 |
| Candy apple red | #FF0800 | rgb(255, 8, 0) | hsl(2 100% 50%) | (0%, 97%, 100%, 0%) | 3.97:1 | 5.28:1 |
| RedCSS | #FF0000 | rgb(255, 0, 0) | hsl(0 100% 50%) | (0%, 100%, 100%, 0%) | 3.99:1 | 5.25:1 |
| Indian RedCSS | #CD5C5C | rgb(205, 92, 92) | hsl(0 53% 58%) | (0%, 55%, 55%, 20%) | 3.97:1 | 5.28:1 |
| Vermilion | #E34234 | rgb(227, 66, 52) | hsl(5 76% 55%) | (0%, 71%, 77%, 11%) | 4.12:1 | 5.09:1 |
| Ruby | #E0115F | rgb(224, 17, 95) | hsl(337 86% 47%) | (0%, 92%, 58%, 12%) | 4.75:1 | 4.41:1 |
| Brick red | #CB4154 | rgb(203, 65, 84) | hsl(352 57% 53%) | (0%, 68%, 59%, 20%) | 4.74:1 | 4.42:1 |
| Cadmium red | #E30022 | rgb(227, 0, 34) | hsl(351 100% 45%) | (0%, 100%, 85%, 11%) | 4.89:1 | 4.28:1 |
| CrimsonCSS | #DC143C | rgb(220, 20, 60) | hsl(348 83% 47%) | (0%, 91%, 73%, 14%) | 4.98:1 | 4.20:1 |
| Fire engine red | #CE2029 | rgb(206, 32, 41) | hsl(357 73% 47%) | (0%, 84%, 80%, 19%) | 5.43:1 | 3.86:1 |
| Cardinal | #C41E3A | rgb(196, 30, 58) | hsl(350 73% 44%) | (0%, 85%, 70%, 23%) | 5.84:1 | 3.59:1 |
| FirebrickCSS | #B22222 | rgb(178, 34, 34) | hsl(0 68% 42%) | (0%, 81%, 81%, 30%) | 6.67:1 | 3.14:1 |
| BrownCSS | #A52A2A | rgb(165, 42, 42) | hsl(0 59% 41%) | (0%, 75%, 75%, 35%) | 7.08:1 | 2.96:1 |
| Carmine | #960018 | rgb(150, 0, 24) | hsl(350 100% 29%) | (0%, 100%, 84%, 41%) | 9.09:1 | 2.30:1 |
| Garnet | #733635 | rgb(115, 54, 53) | hsl(1 37% 33%) | (0%, 53%, 54%, 55%) | 9.09:1 | 2.30:1 |
| Wine | #722F37 | rgb(114, 47, 55) | hsl(353 42% 32%) | (0%, 59%, 52%, 55%) | 9.64:1 | 2.17:1 |
| Dark RedCSS | #8B0000 | rgb(139, 0, 0) | hsl(0 100% 27%) | (0%, 100%, 100%, 45%) | 10.01:1 | 2.09:1 |
| Burgundy | #800020 | rgb(128, 0, 32) | hsl(345 100% 25%) | (0%, 100%, 75%, 50%) | 10.83:1 | 1.93:1 |
| MaroonCSS | #800000 | rgb(128, 0, 0) | hsl(0 100% 25%) | (0%, 100%, 100%, 50%) | 10.94:1 | 1.91:1 |
Make your own shades of red
Pick any red and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using red in design
Red means error, danger or sale in most interfaces, so use it deliberately. Pure #FF0000 is only 3.99:1 on white: pick a darker red for small text.
To pair it with other hues, start from the color wheel or see colors that go with red. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of red are there?
There is no fixed number: screens can show millions of colors and any red hue can be made lighter, darker or more muted. This page lists 22 named shades of red — the CSS named colors that fall in the red family plus widely used names such as scarlet, burgundy, ruby.
What is the hex code for red?
There is no single official red. The CSS keyword "red" is #FF0000; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of red?
In this list the lightest is Light Coral (#F08080) and the darkest is Maroon (#800000), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of red are readable as text on white?
14 of the 22 shades reach the WCAG AA ratio of 4.5:1 on white, for example Dark Red (#8B0000), Burgundy (#800020), Maroon (#800000). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with red?
See the palettes on our "colors that go with red" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of red?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of red" means every variation of the hue, which is how this page uses it.