Color red de Tailwind CSS

Los 11 tonos del color red de Tailwind CSS, del red-50 (el más claro) al red-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de red

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-950

Copiar toda la paleta

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

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind red-500?

En Tailwind v3, red-500 es #EF4444, es decir rgb(239, 68, 68). En Tailwind v4 se define como oklch(63.7% 0.237 25.331).

¿Cómo uso Tailwind red en mi proyecto?

Con clases como bg-red-500, text-red-700 o border-red-200. En Tailwind v4 también puedes usar la variable CSS var(--color-red-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.