Shades of Red

Shades of red include crimson, maroon, scarlet, tomato, fire brick, coral, and burgundy. The base red color's hex value in HTML is #FF0000. Browse named reds below, copy HEX codes, or generate a full palette in Shade Color.

All Shades of Red

49 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named red colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Red

#FF0000 Palette

W 4.0:1 Fail B 5.3:1 AA

Dark Red

#8B0000 Palette

W 10.0:1 AAA B 2.1:1 Fail

Crimson

#DC143C Palette

W 5.0:1 AA B 4.2:1 Fail

Indian Red

#CD5C5C Palette

W 4.0:1 Fail B 5.3:1 AA

Light Coral

#F08080 Palette

W 2.6:1 Fail B 8.1:1 AAA

Salmon

#FA8072 Palette

W 2.5:1 Fail B 8.4:1 AAA

Dark Salmon

#E9967A Palette

W 2.3:1 Fail B 9.1:1 AAA

Light Salmon

#FFA07A Palette

W 2.0:1 Fail B 10.6:1 AAA

Coral

#FF7F50 Palette

W 2.5:1 Fail B 8.4:1 AAA

Tomato

#FF6347 Palette

W 2.9:1 Fail B 7.1:1 AAA

Orange Red

#FF4500 Palette

W 3.4:1 Fail B 6.1:1 AA

Maroon

#800000 Palette

W 10.9:1 AAA B 1.9:1 Fail

Brown

#A52A2A Palette

W 7.1:1 AAA B 3.0:1 Fail

Scarlet

#FF2400 Palette

W 3.8:1 Fail B 5.5:1 AA

Cinnabar

#E34234 Palette

W 4.1:1 Fail B 5.1:1 AA

Carmine

#960018 Palette

W 9.1:1 AAA B 2.3:1 Fail

Cardinal

#C41E3A Palette

W 5.8:1 AA B 3.6:1 Fail

Burgundy

#800020 Palette

W 10.8:1 AAA B 1.9:1 Fail

Wine

#722F37 Palette

W 9.6:1 AAA B 2.2:1 Fail

Oxblood

#4A0000 Palette

W 16.3:1 AAA B 1.3:1 Fail

Rose Red

#C21E56 Palette

W 5.8:1 AA B 3.6:1 Fail

Amaranth

#E52B50 Palette

W 4.4:1 Fail B 4.8:1 AA

Candy Apple

#FF0800 Palette

W 4.0:1 Fail B 5.3:1 AA

Ferrari Red

#FF2800 Palette

W 3.8:1 Fail B 5.6:1 AA

Imperial Red

#ED2939 Palette

W 4.2:1 Fail B 5.0:1 AA

Persian Red

#CC3333 Palette

W 5.1:1 AA B 4.1:1 Fail

Venetian Red

#C80815 Palette

W 6.0:1 AA B 3.5:1 Fail

Alizarin

#E32636 Palette

W 4.6:1 AA B 4.6:1 AA

Coquelicot

#FF3800 Palette

W 3.6:1 Fail B 5.8:1 AA

Poppy

#E35335 Palette

W 3.8:1 Fail B 5.6:1 AA

Rust

#B7410E Palette

W 5.6:1 AA B 3.8:1 Fail

Brick Red

#CB4154 Palette

W 4.7:1 AA B 4.4:1 Fail

Terra Cotta

#E2725B Palette

W 3.1:1 Fail B 6.8:1 AA

Bittersweet

#FE6F5E Palette

W 2.7:1 Fail B 7.6:1 AAA

Watermelon

#FC6C85 Palette

W 2.8:1 Fail B 7.6:1 AAA

Strawberry

#FC5A8D Palette

W 3.0:1 Fail B 7.0:1 AA

Falu Red

#801818 Palette

W 10.2:1 AAA B 2.1:1 Fail

Upsdell Red

#AE2029 Palette

W 6.9:1 AA B 3.0:1 Fail

OU Crimson

#841617 Palette

W 10.0:1 AAA B 2.1:1 Fail

Red Devil

#860111 Palette

W 10.4:1 AAA B 2.0:1 Fail

Sangria

#92000A Palette

W 9.4:1 AAA B 2.2:1 Fail

Barn Red

#7C0A02 Palette

W 11.0:1 AAA B 1.9:1 Fail

Turkey Red

#A91101 Palette

W 7.6:1 AAA B 2.8:1 Fail

Cadmium Red

#E30022 Palette

W 4.9:1 AA B 4.3:1 Fail

Permanent Red

#E60026 Palette

W 4.8:1 AA B 4.4:1 Fail

Signal Red

#CE2029 Palette

W 5.4:1 AA B 3.9:1 Fail

Racing Red

#FF1E00 Palette

W 3.9:1 Fail B 5.4:1 AA

Lava

#CF1020 Palette

W 5.6:1 AA B 3.7:1 Fail

Blood Red

#660000 Palette

W 13.4:1 AAA B 1.6:1 Fail

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Yellow

Shades of Black

About Shades of Red

This page is a named-red color card for precise codes and contrast checks. Generate a full red scale in Shade Color when you need design tokens.

Want a full Red theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Red-50 … 950.
Copy the HEX values into CSS variables for production.

Red Shades Glossary

Each named red lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Fixed reference swatches for alerts, brands, and QA.

Crimson: #DC143C hsl(348, 83%, 47%) W 5.0:1 AA B 4.2:1 Fail

CSS color: #DC143C; Tailwind bg-[#DC143C]
Scarlet: #FF2400 hsl(8, 100%, 50%) W 3.8:1 Fail B 5.5:1 AA

CSS color: #FF2400; Tailwind bg-[#FF2400]
Burgundy: #800020 hsl(345, 100%, 25%) W 10.8:1 AAA B 1.9:1 Fail

CSS color: #800020; Tailwind bg-[#800020]
Coral: #FF7F50 hsl(16, 100%, 66%) W 2.5:1 Fail B 8.4:1 AAA

CSS color: #FF7F50; Tailwind bg-[#FF7F50]
Maroon: #800000 hsl(0, 100%, 25%) W 10.9:1 AAA B 1.9:1 Fail

CSS color: #800000; Tailwind bg-[#800000]
Tomato: #FF6347 hsl(9, 100%, 64%) W 2.9:1 Fail B 7.1:1 AAA

CSS color: #FF6347; Tailwind bg-[#FF6347]
Red: #FF0000 hsl(0, 100%, 50%) W 4.0:1 Fail B 5.3:1 AA

CSS color: #FF0000; Tailwind bg-[#FF0000]
Dark Red: #8B0000 hsl(0, 100%, 27%) W 10.0:1 AAA B 2.1:1 Fail

CSS color: #8B0000; Tailwind bg-[#8B0000]
Indian Red: #CD5C5C hsl(0, 53%, 58%) W 4.0:1 Fail B 5.3:1 AA

CSS color: #CD5C5C; Tailwind bg-[#CD5C5C]
Light Coral: #F08080 hsl(0, 79%, 72%) W 2.6:1 Fail B 8.1:1 AAA

CSS color: #F08080; Tailwind bg-[#F08080]
Salmon: #FA8072 hsl(6, 93%, 71%) W 2.5:1 Fail B 8.4:1 AAA

CSS color: #FA8072; Tailwind bg-[#FA8072]
Dark Salmon: #E9967A hsl(15, 72%, 70%) W 2.3:1 Fail B 9.1:1 AAA

CSS color: #E9967A; Tailwind bg-[#E9967A]
Light Salmon: #FFA07A hsl(17, 100%, 74%) W 2.0:1 Fail B 10.6:1 AAA

CSS color: #FFA07A; Tailwind bg-[#FFA07A]
Orange Red: #FF4500 hsl(16, 100%, 50%) W 3.4:1 Fail B 6.1:1 AA

CSS color: #FF4500; Tailwind bg-[#FF4500]
Brown: #A52A2A hsl(0, 59%, 41%) W 7.1:1 AAA B 3.0:1 Fail

CSS color: #A52A2A; Tailwind bg-[#A52A2A]
Cinnabar: #E34234 hsl(5, 76%, 55%) W 4.1:1 Fail B 5.1:1 AA

CSS color: #E34234; Tailwind bg-[#E34234]
Carmine: #960018 hsl(350, 100%, 29%) W 9.1:1 AAA B 2.3:1 Fail

CSS color: #960018; Tailwind bg-[#960018]
Cardinal: #C41E3A hsl(350, 73%, 44%) W 5.8:1 AA B 3.6:1 Fail

CSS color: #C41E3A; Tailwind bg-[#C41E3A]
Wine: #722F37 hsl(353, 42%, 32%) W 9.6:1 AAA B 2.2:1 Fail

CSS color: #722F37; Tailwind bg-[#722F37]
Oxblood: #4A0000 hsl(0, 100%, 15%) W 16.3:1 AAA B 1.3:1 Fail

CSS color: #4A0000; Tailwind bg-[#4A0000]
Rose Red: #C21E56 hsl(340, 73%, 44%) W 5.8:1 AA B 3.6:1 Fail

CSS color: #C21E56; Tailwind bg-[#C21E56]
Amaranth: #E52B50 hsl(348, 78%, 53%) W 4.4:1 Fail B 4.8:1 AA

CSS color: #E52B50; Tailwind bg-[#E52B50]
Candy Apple: #FF0800 hsl(2, 100%, 50%) W 4.0:1 Fail B 5.3:1 AA

CSS color: #FF0800; Tailwind bg-[#FF0800]
Ferrari Red: #FF2800 hsl(9, 100%, 50%) W 3.8:1 Fail B 5.6:1 AA

CSS color: #FF2800; Tailwind bg-[#FF2800]
Imperial Red: #ED2939 hsl(355, 84%, 55%) W 4.2:1 Fail B 5.0:1 AA

CSS color: #ED2939; Tailwind bg-[#ED2939]
Persian Red: #CC3333 hsl(0, 60%, 50%) W 5.1:1 AA B 4.1:1 Fail

CSS color: #CC3333; Tailwind bg-[#CC3333]
Venetian Red: #C80815 hsl(356, 92%, 41%) W 6.0:1 AA B 3.5:1 Fail

CSS color: #C80815; Tailwind bg-[#C80815]
Alizarin: #E32636 hsl(355, 77%, 52%) W 4.6:1 AA B 4.6:1 AA

CSS color: #E32636; Tailwind bg-[#E32636]
Coquelicot: #FF3800 hsl(13, 100%, 50%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #FF3800; Tailwind bg-[#FF3800]
Poppy: #E35335 hsl(10, 76%, 55%) W 3.8:1 Fail B 5.6:1 AA

CSS color: #E35335; Tailwind bg-[#E35335]
Rust: #B7410E hsl(18, 86%, 39%) W 5.6:1 AA B 3.8:1 Fail

CSS color: #B7410E; Tailwind bg-[#B7410E]
Brick Red: #CB4154 hsl(352, 57%, 53%) W 4.7:1 AA B 4.4:1 Fail

CSS color: #CB4154; Tailwind bg-[#CB4154]
Terra Cotta: #E2725B hsl(10, 70%, 62%) W 3.1:1 Fail B 6.8:1 AA

CSS color: #E2725B; Tailwind bg-[#E2725B]
Bittersweet: #FE6F5E hsl(6, 99%, 68%) W 2.7:1 Fail B 7.6:1 AAA

CSS color: #FE6F5E; Tailwind bg-[#FE6F5E]
Watermelon: #FC6C85 hsl(350, 96%, 71%) W 2.8:1 Fail B 7.6:1 AAA

CSS color: #FC6C85; Tailwind bg-[#FC6C85]
Strawberry: #FC5A8D hsl(341, 96%, 67%) W 3.0:1 Fail B 7.0:1 AA

CSS color: #FC5A8D; Tailwind bg-[#FC5A8D]
Falu Red: #801818 hsl(0, 68%, 30%) W 10.2:1 AAA B 2.1:1 Fail

CSS color: #801818; Tailwind bg-[#801818]
Upsdell Red: #AE2029 hsl(356, 69%, 40%) W 6.9:1 AA B 3.0:1 Fail

CSS color: #AE2029; Tailwind bg-[#AE2029]
OU Crimson: #841617 hsl(359, 71%, 30%) W 10.0:1 AAA B 2.1:1 Fail

CSS color: #841617; Tailwind bg-[#841617]
Red Devil: #860111 hsl(353, 99%, 26%) W 10.4:1 AAA B 2.0:1 Fail

CSS color: #860111; Tailwind bg-[#860111]
Sangria: #92000A hsl(356, 100%, 29%) W 9.4:1 AAA B 2.2:1 Fail

CSS color: #92000A; Tailwind bg-[#92000A]
Barn Red: #7C0A02 hsl(4, 97%, 25%) W 11.0:1 AAA B 1.9:1 Fail

CSS color: #7C0A02; Tailwind bg-[#7C0A02]
Turkey Red: #A91101 hsl(6, 99%, 33%) W 7.6:1 AAA B 2.8:1 Fail

CSS color: #A91101; Tailwind bg-[#A91101]
Cadmium Red: #E30022 hsl(351, 100%, 45%) W 4.9:1 AA B 4.3:1 Fail

CSS color: #E30022; Tailwind bg-[#E30022]
Permanent Red: #E60026 hsl(350, 100%, 45%) W 4.8:1 AA B 4.4:1 Fail

CSS color: #E60026; Tailwind bg-[#E60026]
Signal Red: #CE2029 hsl(357, 73%, 47%) W 5.4:1 AA B 3.9:1 Fail

CSS color: #CE2029; Tailwind bg-[#CE2029]
Racing Red: #FF1E00 hsl(7, 100%, 50%) W 3.9:1 Fail B 5.4:1 AA

CSS color: #FF1E00; Tailwind bg-[#FF1E00]
Lava: #CF1020 hsl(355, 86%, 44%) W 5.6:1 AA B 3.7:1 Fail

CSS color: #CF1020; Tailwind bg-[#CF1020]
Blood Red: #660000 hsl(0, 100%, 20%) W 13.4:1 AAA B 1.6:1 Fail

CSS color: #660000; Tailwind bg-[#660000]

FAQ

How to use this page?

Copy any red HEX or open it in Shade Color to build matching tints and shades.

What is the most popular shade of red?

Crimson is a classic popular red for alerts, media, and brand marks—deep enough to feel serious, bright enough to pop.

What is the base red HEX value?

The reference base red on this page uses #FF0000. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Red-50 through Red-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.