Tailwind Red: 11 Shades, Contrast & Codes

Tailwind CSS 4.3.3

red: current colors

11 shades with exact official OKLCH values. Use bg-red-500, text-red-500 or border-red-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

Color	Exact OKLCH	CSS variable
red-50	`oklch(97.1% 0.013 17.38)`	`--color-red-50`
red-100	`oklch(93.6% 0.032 17.717)`	`--color-red-100`
red-200	`oklch(88.5% 0.062 18.334)`	`--color-red-200`
red-300	`oklch(80.8% 0.114 19.571)`	`--color-red-300`
red-400	`oklch(70.4% 0.191 22.216)`	`--color-red-400`
red-500	`oklch(63.7% 0.237 25.331)`	`--color-red-500`
red-600	`oklch(57.7% 0.245 27.325)`	`--color-red-600`
red-700	`oklch(50.5% 0.213 27.518)`	`--color-red-700`
red-800	`oklch(44.4% 0.177 26.899)`	`--color-red-800`
red-900	`oklch(39.6% 0.141 25.723)`	`--color-red-900`
red-950	`oklch(25.8% 0.092 26.042)`	`--color-red-950`

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#FEF2F2
White
1.09
Black
19.19
100#FEE2E2
White
1.22
Black
17.19
200#FECACA
White
1.44
Black
14.51
300#FCA5A5
White
1.89
Black
11.06
400#F87171
White
2.76
Black
7.59
500#EF4444
White
3.76
Black
5.58
600#DC2626
White
4.82
Black
4.34
700#B91C1C
White
6.47
Black
3.24
800#991B1B
White
8.31
Black
2.52
900#7F1D1D
White
10.01
Black
2.09
950#450A0A
White
16.14
Black
1.30

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
red-50	`#FEF2F2`	`rgb(254, 242, 242)`	`oklch(0.971 0.013 17.4)`	1.09	19.19
red-100	`#FEE2E2`	`rgb(254, 226, 226)`	`oklch(0.936 0.031 17.7)`	1.22	17.19
red-200	`#FECACA`	`rgb(254, 202, 202)`	`oklch(0.885 0.059 18.3)`	1.44	14.51
red-300	`#FCA5A5`	`rgb(252, 165, 165)`	`oklch(0.808 0.103 19.6)`	1.89	11.06
red-400	`#F87171`	`rgb(248, 113, 113)`	`oklch(0.711 0.166 22.2)`	2.76	7.59
red-500	`#EF4444`	`rgb(239, 68, 68)`	`oklch(0.637 0.208 25.3)`	3.76	5.58
red-600	`#DC2626`	`rgb(220, 38, 38)`	`oklch(0.577 0.215 27.3)`	4.82	4.34
red-700	`#B91C1C`	`rgb(185, 28, 28)`	`oklch(0.505 0.190 27.5)`	6.47	3.24
red-800	`#991B1B`	`rgb(153, 27, 27)`	`oklch(0.444 0.161 26.9)`	8.31	2.52
red-900	`#7F1D1D`	`rgb(127, 29, 29)`	`oklch(0.396 0.133 25.7)`	10.01	2.09
red-950	`#450A0A`	`rgb(69, 10, 10)`	`oklch(0.258 0.089 26.0)`	16.14	1.30

Legibility

Which shades pass on each other

Every shade as text on every other shade. 28 of 110 pairings pass 4.5:1 for body text, and 24 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.11	1.32	1.73	2.52	3.44	4.41	5.91	7.59	9.15	14.75
100	1.11	same shade	1.18	1.55	2.26	3.08	3.95	5.29	6.80	8.20	13.21
200	1.32	1.18	same shade	1.31	1.91	2.60	3.33	4.47	5.74	6.92	11.15
300	1.73	1.55	1.31	same shade	1.45	1.98	2.54	3.40	4.37	5.27	8.50
400	2.52	2.26	1.91	1.45	same shade	1.36	1.74	2.33	3.00	3.62	5.83
500	3.44	3.08	2.60	1.98	1.36	same shade	1.28	1.71	2.20	2.66	4.28
600	4.41	3.95	3.33	2.54	1.74	1.28	same shade	1.33	1.72	2.07	3.34
700	5.91	5.29	4.47	3.40	2.33	1.71	1.33	same shade	1.28	1.54	2.49
800	7.59	6.80	5.74	4.37	3.00	2.20	1.72	1.28	same shade	1.20	1.94
900	9.15	8.20	6.92	5.27	3.62	2.66	2.07	1.54	1.20	same shade	1.61
950	14.75	13.21	11.15	8.50	5.83	4.28	3.34	2.49	1.94	1.61	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 800 and 900, ΔE2000 5.4
Protanopia

Closest neighbors: 50 and 100, ΔE2000 3.1
Deuteranopia

Closest neighbors: 50 and 100, ΔE2000 3.3
Tritanopia

Closest neighbors: 800 and 900, ΔE2000 6.4
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 2.7

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
}

Tailwind config

// tailwind.config.js — red is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          950: '#450a0a',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own red; these pin the v3 values. */
  --color-red-50: oklch(0.971 0.013 17.4);
  --color-red-100: oklch(0.936 0.031 17.7);
  --color-red-200: oklch(0.885 0.059 18.3);
  --color-red-300: oklch(0.808 0.103 19.6);
  --color-red-400: oklch(0.711 0.166 22.2);
  --color-red-500: oklch(0.637 0.208 25.3);
  --color-red-600: oklch(0.577 0.215 27.3);
  --color-red-700: oklch(0.505 0.190 27.5);
  --color-red-800: oklch(0.444 0.161 26.9);
  --color-red-900: oklch(0.396 0.133 25.7);
  --color-red-950: oklch(0.258 0.089 26.0);
}

Design tokens (W3C DTCG)

{
  "color": {
    "red": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.949, 0.949],
          "hex": "#fef2f2"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.8863, 0.8863],
          "hex": "#fee2e2"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.7922, 0.7922],
          "hex": "#fecaca"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9882, 0.6471, 0.6471],
          "hex": "#fca5a5"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9725, 0.4431, 0.4431],
          "hex": "#f87171"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9373, 0.2667, 0.2667],
          "hex": "#ef4444"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8627, 0.149, 0.149],
          "hex": "#dc2626"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7255, 0.1098, 0.1098],
          "hex": "#b91c1c"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6, 0.1059, 0.1059],
          "hex": "#991b1b"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.498, 0.1137, 0.1137],
          "hex": "#7f1d1d"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2706, 0.0392, 0.0392],
          "hex": "#450a0a"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let red50 = Color(.sRGB, red: 0.996, green: 0.949, blue: 0.949, opacity: 1)
    static let red100 = Color(.sRGB, red: 0.996, green: 0.886, blue: 0.886, opacity: 1)
    static let red200 = Color(.sRGB, red: 0.996, green: 0.792, blue: 0.792, opacity: 1)
    static let red300 = Color(.sRGB, red: 0.988, green: 0.647, blue: 0.647, opacity: 1)
    static let red400 = Color(.sRGB, red: 0.973, green: 0.443, blue: 0.443, opacity: 1)
    static let red500 = Color(.sRGB, red: 0.937, green: 0.267, blue: 0.267, opacity: 1)
    static let red600 = Color(.sRGB, red: 0.863, green: 0.149, blue: 0.149, opacity: 1)
    static let red700 = Color(.sRGB, red: 0.725, green: 0.110, blue: 0.110, opacity: 1)
    static let red800 = Color(.sRGB, red: 0.600, green: 0.106, blue: 0.106, opacity: 1)
    static let red900 = Color(.sRGB, red: 0.498, green: 0.114, blue: 0.114, opacity: 1)
    static let red950 = Color(.sRGB, red: 0.271, green: 0.039, blue: 0.039, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Red50 = Color(0xFFFEF2F2)
    val Red100 = Color(0xFFFEE2E2)
    val Red200 = Color(0xFFFECACA)
    val Red300 = Color(0xFFFCA5A5)
    val Red400 = Color(0xFFF87171)
    val Red500 = Color(0xFFEF4444)
    val Red600 = Color(0xFFDC2626)
    val Red700 = Color(0xFFB91C1C)
    val Red800 = Color(0xFF991B1B)
    val Red900 = Color(0xFF7F1D1D)
    val Red950 = Color(0xFF450A0A)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind red 11 shades, 50 to 950