Shades of Red - 36 Red Color Codes (HEX, RGB) with Names

36 red color codes with names

Black text 5.2:1

Red

HEX: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
CMYK: 0%, 100%, 100%, 0%

Use it: Scale Wheel Contrast Gradient

White text 4.9:1

Crimson

HEX: #DC143C
RGB: rgb(220, 20, 60)
HSL: hsl(348, 83%, 47%)
CMYK: 0%, 91%, 73%, 14%

Use it: Scale Wheel Contrast Gradient

Black text 5.5:1

Scarlet

HEX: #FF2400
RGB: rgb(255, 36, 0)
HSL: hsl(8, 100%, 50%)
CMYK: 0%, 86%, 100%, 0%

Use it: Scale Wheel Contrast Gradient

White text 5.5:1

Cherry Red

HEX: #D2042D
RGB: rgb(210, 4, 45)
HSL: hsl(348, 96%, 42%)
CMYK: 0%, 98%, 79%, 18%

Use it: Scale Wheel Contrast Gradient

Black text 5.2:1

Candy Apple Red

HEX: #FF0800
RGB: rgb(255, 8, 0)
HSL: hsl(2, 100%, 50%)
CMYK: 0%, 97%, 100%, 0%

Use it: Scale Wheel Contrast Gradient

White text 4.7:1

Ruby

HEX: #E0115F
RGB: rgb(224, 17, 95)
HSL: hsl(337, 86%, 47%)
CMYK: 0%, 92%, 58%, 12%

Use it: Scale Wheel Contrast Gradient

White text 9.0:1

Carmine

HEX: #960018
RGB: rgb(150, 0, 24)
HSL: hsl(350, 100%, 29%)
CMYK: 0%, 100%, 84%, 41%

Use it: Scale Wheel Contrast Gradient

White text 5.8:1

Cardinal

HEX: #C41E3A
RGB: rgb(196, 30, 58)
HSL: hsl(350, 73%, 44%)
CMYK: 0%, 85%, 70%, 23%

Use it: Scale Wheel Contrast Gradient

White text 6.6:1

Firebrick

HEX: #B22222
RGB: rgb(178, 34, 34)
HSL: hsl(0, 68%, 42%)
CMYK: 0%, 81%, 81%, 30%

Use it: Scale Wheel Contrast Gradient

White text 10.0:1

Dark Red

HEX: #8B0000
RGB: rgb(139, 0, 0)
HSL: hsl(0, 100%, 27%)
CMYK: 0%, 100%, 100%, 45%

Use it: Scale Wheel Contrast Gradient

White text 5.4:1

Fire Engine Red

HEX: #CE2029
RGB: rgb(206, 32, 41)
HSL: hsl(357, 73%, 47%)
CMYK: 0%, 84%, 80%, 19%

Use it: Scale Wheel Contrast Gradient

White text 5.5:1

Rosso Corsa

HEX: #D40000
RGB: rgb(212, 0, 0)
HSL: hsl(0, 100%, 42%)
CMYK: 0%, 100%, 100%, 17%

Use it: Scale Wheel Contrast Gradient

Black text 4.9:1

Imperial Red

HEX: #ED2939
RGB: rgb(237, 41, 57)
HSL: hsl(355, 84%, 55%)
CMYK: 0%, 83%, 76%, 7%

Use it: Scale Wheel Contrast Gradient

Black text 4.9:1

Chili Red

HEX: #E23D28
RGB: rgb(226, 61, 40)
HSL: hsl(7, 76%, 52%)
CMYK: 0%, 73%, 82%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 5.0:1

Vermilion

HEX: #E34234
RGB: rgb(227, 66, 52)
HSL: hsl(5, 76%, 55%)
CMYK: 0%, 71%, 77%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 5.3:1

Cinnabar

HEX: #E44D2E
RGB: rgb(228, 77, 46)
HSL: hsl(10, 77%, 54%)
CMYK: 0%, 66%, 80%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 5.2:1

Indian Red

HEX: #CD5C5C
RGB: rgb(205, 92, 92)
HSL: hsl(0, 53%, 58%)
CMYK: 0%, 55%, 55%, 20%

Use it: Scale Wheel Contrast Gradient

White text 11.0:1

Barn Red

HEX: #7C0A02
RGB: rgb(124, 10, 2)
HSL: hsl(4, 97%, 25%)
CMYK: 0%, 92%, 98%, 51%

Use it: Scale Wheel Contrast Gradient

White text 5.9:1

Venetian Red

HEX: #C80815
RGB: rgb(200, 8, 21)
HSL: hsl(356, 92%, 41%)
CMYK: 0%, 96%, 90%, 22%

Use it: Scale Wheel Contrast Gradient

Black text 4.5:1

Lust

HEX: #E62020
RGB: rgb(230, 32, 32)
HSL: hsl(0, 80%, 51%)
CMYK: 0%, 86%, 86%, 10%

Use it: Scale Wheel Contrast Gradient

White text 7.4:1

Rufous

HEX: #A81C07
RGB: rgb(168, 28, 7)
HSL: hsl(8, 92%, 34%)
CMYK: 0%, 83%, 96%, 34%

Use it: Scale Wheel Contrast Gradient

White text 10.8:1

Burgundy

HEX: #800020
RGB: rgb(128, 0, 32)
HSL: hsl(345, 100%, 25%)
CMYK: 0%, 100%, 75%, 50%

Use it: Scale Wheel Contrast Gradient

White text 10.9:1

Maroon

HEX: #800000
RGB: rgb(128, 0, 0)
HSL: hsl(0, 100%, 25%)
CMYK: 0%, 100%, 100%, 50%

Use it: Scale Wheel Contrast Gradient

White text 4.6:1

Raspberry

HEX: #E30B5C
RGB: rgb(227, 11, 92)
HSL: hsl(338, 91%, 47%)
CMYK: 0%, 95%, 59%, 11%

Use it: Scale Wheel Contrast Gradient

White text 5.2:1

Amaranth Red

HEX: #D3212D
RGB: rgb(211, 33, 45)
HSL: hsl(356, 73%, 48%)
CMYK: 0%, 84%, 79%, 17%

Use it: Scale Wheel Contrast Gradient

White text 5.1:1

Persian Red

HEX: #CC3333
RGB: rgb(204, 51, 51)
HSL: hsl(0, 60%, 50%)
CMYK: 0%, 75%, 75%, 20%

Use it: Scale Wheel Contrast Gradient

White text 8.0:1

Madder

HEX: #A50021
RGB: rgb(165, 0, 33)
HSL: hsl(348, 100%, 32%)
CMYK: 0%, 100%, 80%, 35%

Use it: Scale Wheel Contrast Gradient

Black text 4.5:1

Alizarin Crimson

HEX: #E32636
RGB: rgb(227, 38, 54)
HSL: hsl(355, 77%, 52%)
CMYK: 0%, 83%, 76%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 5.8:1

Coquelicot

HEX: #FF3800
RGB: rgb(255, 56, 0)
HSL: hsl(13, 100%, 50%)
CMYK: 0%, 78%, 100%, 0%

Use it: Scale Wheel Contrast Gradient

White text 7.5:1

Turkey Red

HEX: #A91101
RGB: rgb(169, 17, 1)
HSL: hsl(6, 99%, 33%)
CMYK: 0%, 90%, 99%, 34%

Use it: Scale Wheel Contrast Gradient

White text 5.8:1

Rose Red

HEX: #C21E56
RGB: rgb(194, 30, 86)
HSL: hsl(340, 73%, 44%)
CMYK: 0%, 85%, 56%, 24%

Use it: Scale Wheel Contrast Gradient

Black text 7.1:1

Tomato

HEX: #FF6347
RGB: rgb(255, 99, 71)
HSL: hsl(9, 100%, 64%)
CMYK: 0%, 61%, 72%, 0%

Use it: Scale Wheel Contrast Gradient

White text 8.9:1

Penn Red

HEX: #990000
RGB: rgb(153, 0, 0)
HSL: hsl(0, 100%, 30%)
CMYK: 0%, 100%, 100%, 40%

Use it: Scale Wheel Contrast Gradient

White text 6.9:1

Upsdell Red

HEX: #AE2029
RGB: rgb(174, 32, 41)
HSL: hsl(356, 69%, 40%)
CMYK: 0%, 82%, 76%, 32%

Use it: Scale Wheel Contrast Gradient

White text 4.8:1

Cadmium Red

HEX: #E30022
RGB: rgb(227, 0, 34)
HSL: hsl(351, 100%, 45%)
CMYK: 0%, 100%, 85%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 4.9:1

Red (Crayola)

HEX: #EE204D
RGB: rgb(238, 32, 77)
HSL: hsl(347, 86%, 53%)
CMYK: 0%, 87%, 68%, 7%

Use it: Scale Wheel Contrast Gradient

Red color scale, 50 to 950

A Tailwind-style scale built from Red (#FF0000), evenly spaced in OKLCH lightness. Paste any other red to build its own scale, or click a swatch for its codes and contrast.

Red Step 500 Your color keeps its exact value at step 500, where its lightness naturally falls. The other ten steps are built around it.

Red

Step 500 · your color

On white 3.99:1 AA Large On black 5.25:1 AA

HEX#FF0000

RGBrgb(255, 0, 0)

HSLhsl(0, 100%, 50%)

CMYKcmyk(0%, 100%, 100%, 0%)

Send to Color Wheel Contrast Checker

Tints mixed with white

Shades mixed with black

Tones mixed with gray

Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.

Contrast on swatchesEach step shows its best text color level and ratio ON

:root {
  --brand-50: #fcf5f4;
  --brand-100: #f8e4e1;
  --brand-200: #f5ccc6;
  --brand-300: #f6a89c;
  --brand-400: #fb6f5e;
  --brand-500: #ff0000;
  --brand-600: #d50000;
  --brand-700: #ae140d;
  --brand-800: #8a1c14;
  --brand-900: #6d1c14;
  --brand-950: #44140f;
}

Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.

Adobe ASE · 11 colorsMeasuring the file size...

What red means

Red has the longest wavelength of visible light, and it grabs attention faster than any other hue. That is why it marks danger, errors and urgent actions everywhere from traffic lights to form fields.

Its meaning depends on the culture. In the West it stands for love and passion as well as danger; in China it is the color of luck and celebration, worn at weddings and the New Year.

Historic reds came from surprising places: carmine from crushed cochineal insects, and vermilion from cinnabar, a toxic mercury mineral. Cadmium reds replaced them in the 1900s.

Tips for using red in design

Never rely on red alone. Red-green color blindness is common, so pair red error states with an icon or text.

Use it sparingly. Red works best as a small accent - one button, one badge - on a calm neutral background.

Darker for text. Bright reds like #FF0000 only reach about 4:1 on white. Shades such as Firebrick or Dark Red pass AA - test yours in the Contrast Checker.

Red color palettes

See red in complete, ready-made palettes - each one with codes and downloads.

Want a palette built around one exact red? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.

Frequently Asked Questions

Red is #FF0000, which is rgb(255, 0, 0) and hsl(0, 100%, 50%). For print it is about 0% cyan, 100% magenta, 100% yellow and 0% black. It is also a CSS color keyword, so you can simply write red in your stylesheet.

There is no fixed number - any red can be made lighter, darker or more muted. This page lists 36 named shades, from Tomato (#FF6347) to Barn Red (#7C0A02). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any red.

Red (#FF0000) has a contrast ratio of 3.99:1 on white and 5.25:1 on black, so it reads best on dark backgrounds or with dark text on top of it. For red text on white, pick a deeper shade such as Lust (#E62020), which reaches 4.57:1. Test any pair with the Contrast Checker.

Crimson (#DC143C) leans slightly toward blue and pink, while Scarlet (#FF2400) leans toward orange. Both are vivid; crimson feels richer, scarlet feels hotter.

Common dark reds include Dark Red (#8B0000), Barn Red (#7C0A02), Burgundy (#800020) and Maroon (#800000). The deepest wine and brown-red tones are collected on shades of maroon.

Pink is a light, softer tint of red, often with a touch of blue. It has its own page with 37 named colors - see shades of pink.

36 red color codes with names

Red

Crimson

Scarlet

Cherry Red

Candy Apple Red

Ruby

Carmine

Cardinal

Firebrick

Dark Red

Fire Engine Red

Rosso Corsa

Imperial Red

Chili Red

Vermilion

Cinnabar

Indian Red

Barn Red

Venetian Red

Lust

Rufous

Burgundy

Maroon

Raspberry

Amaranth Red

Persian Red

Madder

Alizarin Crimson

Coquelicot

Turkey Red

Rose Red

Tomato

Penn Red

Upsdell Red

Cadmium Red

Red (Crayola)

Red color scale, 50 to 950

Colors that go with red

What red means

Tips for using red in design

Red color palettes

Frequently Asked Questions

More color shades

Guides & Tutorials