Barva zinc v Tailwind CSS

11 odstínů barvy zinc v Tailwind CSS, od zinc-50 (nejsvětlejší) po zinc-950 (nejtmavší). Klikni na libovolnou hodnotu a zkopíruješ ji.

Odstíny zinc

HEX a RGB z Tailwindu v3; OKLCH z Tailwindu v4. Kliknutím na hodnotu ji zkopíruješ.

zinc-50

zinc-100

zinc-200

zinc-300

zinc-400

zinc-500

zinc-600

zinc-700

zinc-800

zinc-900

zinc-950

Zkopírovat celou paletu

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'
        }
      }
    }
  }
}

Proměnné 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;
}

Další barvy Tailwindu

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

Časté otázky

Jaký je HEX kód Tailwind zinc-500?

V Tailwindu v3 je zinc-500 #71717A, tedy rgb(113, 113, 122). V Tailwindu v4 je definovaná jako oklch(55.2% 0.016 285.938).

Jak použít Tailwind zinc ve svém projektu?

Pomocí tříd jako bg-zinc-500, text-zinc-700 nebo border-zinc-200. V Tailwindu v4 můžeš ve vlastním CSS použít i proměnnou CSS var(--color-zinc-500).

Další frameworky

Tailwind CSS, Material Design a Bootstrap jsou ochranné známky svých vlastníků. Hodnoty pocházejí z jejich dokumentace a veřejných balíčků: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.