Farbpaletten

Tailwind-CSS-Farbe rose

Die 11 Abstufungen der Tailwind-CSS-Farbe rose, von rose-50 (am hellsten) bis rose-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von rose

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

rose-50
rose-100
rose-200
rose-300
rose-400
rose-500
rose-600
rose-700
rose-800
rose-900
rose-950

Ganze Palette kopieren

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

CSS-Variablen (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;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapink

Häufige Fragen

Wie lautet der HEX-Code von Tailwind rose-500?

In Tailwind v3 ist rose-500 #F43F5E, also rgb(244, 63, 94). In Tailwind v4 ist es als oklch(64.5% 0.246 16.439) definiert.

Wie verwende ich Tailwind rose in meinem Projekt?

Mit Klassen wie bg-rose-500, text-rose-700 oder border-rose-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-rose-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.