SwatchAtlas

Shades of Red: Color Names & Hex Codes

There are 8 CSS named colors in the red range, from the lightest, Coral, to the darkest, Dark Red. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.

Red Color Chart

Ordered from lightest to darkest by relative luminance. Click a name for its full color page.

#FF7F50

Coral

rgb(255, 127, 80) · coral

Warm, vibrant orange-leaning pinkish red.

#FA8072

Salmon

rgb(250, 128, 114) · salmon

Soft, warm pink-orange red, like salmon flesh.

#FF6347

Tomato

rgb(255, 99, 71) · tomato

Bright, cheerful warm red-orange.

#CD5C5C

Indian Red

rgb(205, 92, 92) · indianred

Muted chestnut red with gentle pink-coral tint.

#FF0000

Red

rgb(255, 0, 0) · red

Pure screen red: full red channel and nothing else.

#DC143C

Crimson

rgb(220, 20, 60) · crimson

Strong, vivid deep ruby red.

#B22222

Firebrick

rgb(178, 34, 34) · firebrick

Deep earthy brick red with high stability.

#8B0000

Dark Red

rgb(139, 0, 0) · darkred

Deep blood-red with no green or blue.

Light, Mid-tone and Dark Shades of Red

Mid-tone shades of red

Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text reads best on 5 of them and white text on 1. Coral, Salmon, Tomato, Indian Red, Red and Crimson.

Dark shades of red

Deep tones for headers, buttons and bold brand color. White text has the higher contrast on all 2 of them. Firebrick and Dark Red.

Red Hex Codes and Contrast

Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.

Red-range named colors in CSS Color 4
ColorHEXRGBHSLOn blackOn whiteBest text
#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)8.4:12.5:1Black
#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)8.4:12.5:1Black
#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)7.13:12.95:1Black
#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)5.28:13.98:1Black
#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)5.25:14:1Black
#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)4.21:14.99:1White
#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)3.14:16.68:1White
#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)2.1:110.01:1White

Shades of Red FAQ

What are the shades of red in CSS?

CSS Color 4 does not group its named colors into families, but 8 of them fall in the red range. From lightest to darkest: Coral (#FF7F50), Salmon (#FA8072), Tomato (#FF6347), Indian Red (#CD5C5C), Red (#FF0000), Crimson (#DC143C), Firebrick (#B22222) and Dark Red (#8B0000).

What is the hex code for red?

The CSS named color red is #FF0000, which is RGB(255, 0, 0). The other shades on this page each have their own code.

Which shade of red can I use for text on a white background?

Crimson, Firebrick and Dark Red are the only ones of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Dark Red reaches 10.01:1.

Are burgundy, maroon and scarlet CSS colors?

Only maroon is (#800000). Burgundy and scarlet are not CSS named colors, so they have no standard hex code. The nearest CSS colors are maroon or Dark Red (#8B0000) for burgundy, and Red (#FF0000) or Tomato (#FF6347) for scarlet.

Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).