لون slate في Tailwind CSS

درجات slate

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        slate: {
          50: '⁦#f8fafc⁩',
          100: '⁦#f1f5f9⁩',
          200: '⁦#e2e8f0⁩',
          300: '⁦#cbd5e1⁩',
          400: '⁦#94a3b8⁩',
          500: '⁦#64748b⁩',
          600: '⁦#475569⁩',
          700: '⁦#334155⁩',
          800: '⁦#1e293b⁩',
          900: '⁦#0f172a⁩',
          950: '⁦#020617⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --slate-50: ⁦#F8FAFC⁩;
  --slate-100: ⁦#F1F5F9⁩;
  --slate-200: ⁦#E2E8F0⁩;
  --slate-300: ⁦#CBD5E1⁩;
  --slate-400: ⁦#94A3B8⁩;
  --slate-500: ⁦#64748B⁩;
  --slate-600: ⁦#475569⁩;
  --slate-700: ⁦#334155⁩;
  --slate-800: ⁦#1E293B⁩;
  --slate-900: ⁦#0F172A⁩;
  --slate-950: ⁦#020617⁩;
}

ألوان أخرى في 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.