Tailwind CSS rose color

The 11 shades of Tailwind CSS rose, from rose-50 (lightest) to rose-950 (darkest). Click any value to copy it.

rose shades

HEX and RGB from Tailwind v3; OKLCH from Tailwind v4. Click a value to copy it.

rose-50

rose-100

rose-200

rose-300

rose-400

rose-500

rose-600

rose-700

rose-800

rose-900

rose-950

Copy the whole 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'
        }
      }
    }
  }
}

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

More Tailwind colors

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

Frequently asked questions

What is the HEX code for Tailwind rose-500?

In Tailwind v3, rose-500 is #F43F5E, which is rgb(244, 63, 94). In Tailwind v4 it is defined as oklch(64.5% 0.246 16.439).

How do I use Tailwind rose in my project?

With classes like bg-rose-500, text-rose-700 or border-rose-200. In Tailwind v4 you can also use the CSS variable var(--color-rose-500) in your own CSS.

Other frameworks

Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.