لون rose في Tailwind CSS

درجات rose

قيم HEX وRGB من Tailwind v3، وقيم OKLCH من Tailwind v4. اضغط على أي قيمة لنسخها.

انسخ اللوحة كاملة

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

أطر عمل أخرى

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.