Zinc

Industrial precision and modernity — zinc offers clean contemporary depth.

Shades 11

Base #71717a

RGB 113, 113, 122

100

200

300

400

500

600

700

800

All Zinc Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

: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 Config

// 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',
        },
      },
    },
  },
};

SCSS Map

$zinc-palette: (
  50: #fafafa,
  100: #f4f4f5,
  200: #e4e4e7,
  300: #d4d4d8,
  400: #a1a1aa,
  500: #71717a,
  600: #52525b,
  700: #3f3f46,
  800: #27272a,
  900: #18181b,
  950: #09090b,
);