What is the hex code for red?

The CSS keyword red is #FF0000, which is rgb(255 0 0) or oklch(0.628 0.258 29.2). Tailwind's red-500 is #FB2C36, a softer red that many design systems use instead.

How many shades of red have CSS color names?

This page lists 12 CSS named colors in the red family, from lightsalmon (#FFA07A) at the light end to maroon (#800000) at the dark end. Every one can be used directly in CSS by name.

What colors go well with red?

Red pairs well with white, gray and teal. For a guaranteed match, open any red shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.

How do I make a red color scale for my design system?

Pick a red you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Shades of red

Red is the most urgent hue on screen. It reads as energy, warning and appetite, and it is the hue whose lightness swings hardest between its bright and deep shades.

red · #FF0000

12 red color names

Every CSS named color in the red family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

lightsalmon#ffa07argb(255 160 122)oklch(0.794 0.125 42.4)darksalmon#e9967argb(233 150 122)oklch(0.751 0.108 39.4)salmon#fa8072rgb(250 128 114)oklch(0.735 0.152 28.1)lightcoral#f08080rgb(240 128 128)oklch(0.725 0.138 21)tomato#ff6347rgb(255 99 71)oklch(0.696 0.196 32.3)orangered#ff4500rgb(255 69 0)oklch(0.66 0.229 35.4)red#ff0000rgb(255 0 0)oklch(0.628 0.258 29.2)indianred#cd5c5crgb(205 92 92)oklch(0.615 0.144 22.2)crimson#dc143crgb(220 20 60)oklch(0.571 0.222 20.1)firebrick#b22222rgb(178 34 34)oklch(0.497 0.18 26.8)darkred#8b0000rgb(139 0 0)oklch(0.4 0.164 29.2)maroon#800000rgb(128 0 0)oklch(0.377 0.155 29.2)

Tailwind red scales

The Tailwind v4 default palette families closest to red, 50 to 950.

red

50 100 200 300 400 500 600 700 800 900 950

rose

50 100 200 300 400 500 600 700 800 900 950

Using red in a UI

In interfaces, reserve saturated red for destructive actions and errors, and reach for the 600–700 shades for text so it passes WCAG AA on white.

red-colors.css

:root {
  --lightsalmon: oklch(0.794 0.125 42.4); /* #ffa07a */
  --darksalmon: oklch(0.751 0.108 39.4); /* #e9967a */
  --salmon: oklch(0.735 0.152 28.1); /* #fa8072 */
  --lightcoral: oklch(0.725 0.138 21); /* #f08080 */
  --tomato: oklch(0.696 0.196 32.3); /* #ff6347 */
  --orangered: oklch(0.66 0.229 35.4); /* #ff4500 */
  --red: oklch(0.628 0.258 29.2); /* #ff0000 */
  --indianred: oklch(0.615 0.144 22.2); /* #cd5c5c */
  --crimson: oklch(0.571 0.222 20.1); /* #dc143c */
  --firebrick: oklch(0.497 0.18 26.8); /* #b22222 */
  --darkred: oklch(0.4 0.164 29.2); /* #8b0000 */
  --maroon: oklch(0.377 0.155 29.2); /* #800000 */
}

Generate a red scale Build a palette

Frequently asked questions

What is the hex code for red?: The CSS keyword red is #FF0000, which is rgb(255 0 0) or oklch(0.628 0.258 29.2). Tailwind's red-500 is #FB2C36, a softer red that many design systems use instead.
How many shades of red have CSS color names?: This page lists 12 CSS named colors in the red family, from lightsalmon (#FFA07A) at the light end to maroon (#800000) at the dark end. Every one can be used directly in CSS by name.
What colors go well with red?: Red pairs well with white, gray and teal. For a guaranteed match, open any red shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a red color scale for my design system?: Pick a red you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

Orange Yellow Green Teal Blue Purple Pink Brown Gray White