Culoarea red din Tailwind CSS

Cele 11 nuanțe ale culorii red din Tailwind CSS, de la red-50 (cea mai deschisă) la red-950 (cea mai închisă). Fă clic pe orice valoare ca s-o copiezi.

Nuanțe de red

HEX și RGB din Tailwind v3; OKLCH din Tailwind v4. Fă clic pe o valoare ca s-o copiezi.

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-950

Copiază toată 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'
        }
      }
    }
  }
}

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

Alte culori Tailwind

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

Întrebări frecvente

Care este codul HEX pentru Tailwind red-500?

În Tailwind v3, red-500 este #EF4444, adică rgb(239, 68, 68). În Tailwind v4 este definit ca oklch(63.7% 0.237 25.331).

Cum folosesc Tailwind red în proiectul meu?

Cu clase precum bg-red-500, text-red-700 sau border-red-200. În Tailwind v4 poți folosi și variabila CSS var(--color-red-500) în propriul CSS.

Alte framework-uri

Tailwind CSS, Material Design și Bootstrap sunt mărci ale proprietarilor lor. Valorile provin din documentația și pachetele lor publice: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.