لون zinc في Tailwind CSS

درجات zinc

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-zinc-50: oklch(98.5% 0 none);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        zinc: {
          50: '⁦#fafafa⁩',
          100: '⁦#f4f4f5⁩',
          200: '⁦#e4e4e7⁩',
          300: '⁦#d4d4d8⁩',
          400: '⁦#a1a1aa⁩',
          500: '⁦#71717a⁩',
          600: '⁦#52525b⁩',
          700: '⁦#3f3f46⁩',
          800: '⁦#27272a⁩',
          900: '⁦#18181b⁩',
          950: '⁦#09090b⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --zinc-50: ⁦#FAFAFA⁩;
  --zinc-100: ⁦#F4F4F5⁩;
  --zinc-200: ⁦#E4E4E7⁩;
  --zinc-300: ⁦#D4D4D8⁩;
  --zinc-400: ⁦#A1A1AA⁩;
  --zinc-500: ⁦#71717A⁩;
  --zinc-600: ⁦#52525B⁩;
  --zinc-700: ⁦#3F3F46⁩;
  --zinc-800: ⁦#27272A⁩;
  --zinc-900: ⁦#18181B⁩;
  --zinc-950: ⁦#09090B⁩;
}

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