Color zinc de Tailwind CSS

Los 11 tonos del color zinc de Tailwind CSS, del zinc-50 (el más claro) al zinc-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de zinc

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

zinc-50

zinc-100

zinc-200

zinc-300

zinc-400

zinc-500

zinc-600

zinc-700

zinc-800

zinc-900

zinc-950

Copiar toda la paleta

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

Variables 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;
}

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind zinc-500?

En Tailwind v3, zinc-500 es #71717A, es decir rgb(113, 113, 122). En Tailwind v4 se define como oklch(55.2% 0.016 285.938).

¿Cómo uso Tailwind zinc en mi proyecto?

Con clases como bg-zinc-500, text-zinc-700 o border-zinc-200. En Tailwind v4 también puedes usar la variable CSS var(--color-zinc-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.