Couleur rose de Tailwind CSS

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

Nuances de rose

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

rose-50

rose-100

rose-200

rose-300

rose-400

rose-500

rose-600

rose-700

rose-800

rose-900

rose-950

Copier toute la palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        rose: {
          50: '#fff1f2',
          100: '#ffe4e6',
          200: '#fecdd3',
          300: '#fda4af',
          400: '#fb7185',
          500: '#f43f5e',
          600: '#e11d48',
          700: '#be123c',
          800: '#9f1239',
          900: '#881337',
          950: '#4c0519'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --rose-50: #FFF1F2;
  --rose-100: #FFE4E6;
  --rose-200: #FECDD3;
  --rose-300: #FDA4AF;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --rose-700: #BE123C;
  --rose-800: #9F1239;
  --rose-900: #881337;
  --rose-950: #4C0519;
}

Autres couleurs Tailwind

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

Questions fréquentes

Quel est le code HEX de Tailwind rose-500 ?

Dans Tailwind v3, rose-500 vaut #F43F5E, soit rgb(244, 63, 94). Dans Tailwind v4, il est défini comme oklch(64.5% 0.246 16.439).

Comment utiliser Tailwind rose dans mon projet ?

Avec des classes comme bg-rose-500, text-rose-700 ou border-rose-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-rose-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.