21 Shades of Red with Hex Codes

Named Red Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Red Color Chart: Hex, RGB, HSL & CMYK

Every red above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Red Scale from Light to Dark

A 12-step lightness scale built from the core red hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate red design tokens.

What Red Communicates

Red is the highest-arousal hue and the hardest to use quietly. Pure red is the interface convention for destructive actions and errors, which means using it decoratively costs you that signal. Darker brick and wine reds carry heritage and warmth without the alarm. Red also darkens dramatically for viewers with protanopia, so red text on dark backgrounds is a common accessibility failure.

Where red works well

• Errors, destructive actions, and validation failures
• Sale badges and urgency messaging, used sparingly enough to stay loud
• Food and hospitality brands, where red is associated with appetite
• Heritage and luxury marks using deeper wine and oxblood tones

Colors that pair with red

Copy the Red Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --red-oxblood: #4A0000;
  --red-blood-red: #660000;
  --red-barn-red: #7C0A02;
  --red-maroon: #800000;
  --red-darkred: #8B0000;
  --red-brown: #A52A2A;
  --red-firebrick: #B22222;
  --red-cardinal: #C41E3A;
  --red-rust: #B7410E;
  --red-cherry-red: #D2042D;
  --red-crimson: #DC143C;
  --red-ruby: #E0115F;
  --red-vermilion: #E34234;
  --red-red: #FF0000;
  --red-indianred: #CD5C5C;
  --red-candy-apple-red: #FF0800;
  --red-scarlet: #FF2400;
  --red-lightcoral: #F08080;
  --red-salmon: #FA8072;
  --red-darksalmon: #E9967A;
  --red-lightsalmon: #FFA07A;
}

Red Color Questions