Färgpaletter

Tailwind CSS-färgen zinc

De 11 nyanserna av Tailwind CSS-färgen zinc, från zinc-50 (ljusast) till zinc-950 (mörkast). Klicka på ett värde för att kopiera det.

Nyanser av zinc

HEX och RGB från Tailwind v3; OKLCH från Tailwind v4. Klicka på ett värde för att kopiera det.

zinc-50
zinc-100
zinc-200
zinc-300
zinc-400
zinc-500
zinc-600
zinc-700
zinc-800
zinc-900
zinc-950

Kopiera hela paletten

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-variabler (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;
}

Fler Tailwind-färger

slategrayneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Vanliga frågor

Vad är HEX-koden för Tailwind zinc-500?

I Tailwind v3 är zinc-500 #71717A, alltså rgb(113, 113, 122). I Tailwind v4 definieras den som oklch(55.2% 0.016 285.938).

Hur använder jag Tailwind zinc i mitt projekt?

Med klasser som bg-zinc-500, text-zinc-700 eller border-zinc-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-zinc-500) i din egen CSS.

Andra ramverk

Tailwind CSS färgpalettMaterial Design färgpalettBootstraps färgpalettFärgpaletter från ramverk

Tailwind CSS, Material Design och Bootstrap är varumärken som tillhör respektive ägare. Värdena kommer från deras dokumentation och offentliga paket: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.