لون gray في Tailwind CSS

درجات gray

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          50: '⁦#f9fafb⁩',
          100: '⁦#f3f4f6⁩',
          200: '⁦#e5e7eb⁩',
          300: '⁦#d1d5db⁩',
          400: '⁦#9ca3af⁩',
          500: '⁦#6b7280⁩',
          600: '⁦#4b5563⁩',
          700: '⁦#374151⁩',
          800: '⁦#1f2937⁩',
          900: '⁦#111827⁩',
          950: '⁦#030712⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --gray-50: ⁦#F9FAFB⁩;
  --gray-100: ⁦#F3F4F6⁩;
  --gray-200: ⁦#E5E7EB⁩;
  --gray-300: ⁦#D1D5DB⁩;
  --gray-400: ⁦#9CA3AF⁩;
  --gray-500: ⁦#6B7280⁩;
  --gray-600: ⁦#4B5563⁩;
  --gray-700: ⁦#374151⁩;
  --gray-800: ⁦#1F2937⁩;
  --gray-900: ⁦#111827⁩;
  --gray-950: ⁦#030712⁩;
}

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