Tailwind CSS 的 rose

Tailwind CSS rose 的 11 個色階，從最淺的 rose-50 排到最深的 rose-950。點一下數值就能複製。

rose 的色階

HEX 與 RGB 為 Tailwind v3 的值，OKLCH 為 Tailwind v4 的值。點一下數值就能複製。

rose-50

rose-100

rose-200

rose-300

rose-400

rose-500

rose-600

rose-700

rose-800

rose-900

rose-950

一次複製整組調色盤

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 變數（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;
}

Tailwind 的其他顏色

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

常見問題

Tailwind rose-500 的 HEX 色碼是多少？

在 Tailwind v3 中，rose-500 是 #F43F5E，也就是 rgb(244, 63, 94)。在 Tailwind v4 中定義為 oklch(64.5% 0.246 16.439)。

怎麼在專案中使用 Tailwind rose？

使用 bg-rose-500、text-rose-700、border-rose-200 等 class。在 Tailwind v4 中，也可以在自己的 CSS 裡使用 CSS 變數 var(--color-rose-500)。

其他框架

Tailwind CSS、Material Design 與 Bootstrap 為各自所有者的商標。數值依據各專案的官方文件與公開套件：Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2。