Couleur red de Tailwind CSS

Les 11 nuances de la couleur red de Tailwind CSS, de red-50 (la plus claire) à red-950 (la plus foncée). Cliquez sur une valeur pour la copier.

Nuances de red

HEX et RGB de Tailwind v3 ; OKLCH de Tailwind v4. Cliquez sur une valeur pour la copier.

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-950

Copier toute la palette

Tailwind v4 (CSS, @theme)

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

Tailwind v3 (tailwind.config.js)

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'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;
}

Autres couleurs Tailwind

slate gray zinc neutral stone orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

Questions fréquentes

Quel est le code HEX de Tailwind red-500 ?

Dans Tailwind v3, red-500 vaut #EF4444, soit rgb(239, 68, 68). Dans Tailwind v4, il est défini comme oklch(63.7% 0.237 25.331).

Comment utiliser Tailwind red dans mon projet ?

Avec des classes comme bg-red-500, text-red-700 ou border-red-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-red-500) dans votre propre CSS.

Autres frameworks

Tailwind CSS, Material Design et Bootstrap sont des marques de leurs propriétaires respectifs. Les valeurs proviennent de leur documentation et de leurs paquets publics : Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.