Zinc color shades

Zinc is one of Tailwind CSS's five grey scales, a grey with a faint cool cast. Here are its 11 steps, zinc 50 (#fafafa) to zinc 950 (#09090b), as Tailwind v3 ships them, with text contrast for each.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#f6f6fdWhite1.1 FailInk16.8 AAA
100#eaeaf1White1.2 FailInk15.1 AAA
200#d7d7deWhite1.4 FailInk12.6 AAA
300#bdbdc5White1.9 FailInk9.7 AAA
400#a0a0a9White2.6 FailInk7.0 AA
500#85858eWhite3.7 AA largeInk4.9 AA
600#6e6e76White5.1 AAInk3.6 AA large
700#57575fWhite7.2 AAAInk2.5 Fail
800#424248White10.0 AAAInk1.8 Fail
900#303035White13.1 AAAInk1.4 Fail
950#1f1f24White16.4 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

@theme {
  --color-zinc-50: #f6f6fd;
  --color-zinc-100: #eaeaf1;
  --color-zinc-200: #d7d7de;
  --color-zinc-300: #bdbdc5;
  --color-zinc-400: #a0a0a9;
  --color-zinc-500: #85858e;
  --color-zinc-600: #6e6e76;
  --color-zinc-700: #57575f;
  --color-zinc-800: #424248;
  --color-zinc-900: #303035;
  --color-zinc-950: #1f1f24;
  --color-accent-1: #dddde7;
  --color-accent-2: #adadb7;
  --color-accent-3: #54545d;
  --color-accent-4: #2d2d35;
}

At a glance

Zinc 50: #fafafa · white text 1.04:1 (Fail), near-black text 17.33:1 (AAA); Source: github.com, checked 2026-11
Zinc 100: #f4f4f5 · white text 1.09:1 (Fail), near-black text 16.46:1 (AAA); Source: github.com, checked 2026-11
Zinc 200: #e4e4e7 · white text 1.26:1 (Fail), near-black text 14.26:1 (AAA); Source: github.com, checked 2026-11
Zinc 300: #d4d4d8 · white text 1.47:1 (Fail), near-black text 12.24:1 (AAA); Source: github.com, checked 2026-11
Zinc 400: #a1a1aa · white text 2.56:1 (Fail), near-black text 7.06:1 (AAA); Source: github.com, checked 2026-11
Zinc 500: #71717a · white text 4.83:1 (AA), near-black text 3.74:1 (AA large); Source: github.com, checked 2026-11
Zinc 600: #52525b · white text 7.72:1 (AAA), near-black text 2.34:1 (Fail); Source: github.com, checked 2026-11
Zinc 700: #3f3f46 · white text 10.44:1 (AAA), near-black text 1.73:1 (Fail); Source: github.com, checked 2026-11
Zinc 800: #27272a · white text 14.89:1 (AAA), near-black text 1.21:1 (Fail); Source: github.com, checked 2026-11
Zinc 900: #18181b · white text 17.71:1 (AAA), near-black text 1.02:1 (Fail); Source: github.com, checked 2026-11
Zinc 950: #09090b · white text 19.89:1 (AAA), near-black text 1.09:1 (Fail); Source: github.com, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Zinc color shades: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Zinc against the other Tailwind greys

Compare the 500 steps: slate #64748b, gray #6b7280, zinc #71717a, neutral #737373 and stone #78716c. Measured in OKLCH, slate has the most colour (chroma 0.041, blue), zinc has a trace of blue (0.014), neutral has none and stone leans warm.

Pick zinc when you want a grey that reads as neutral but sits comfortably next to blue or violet brand colours.

Which zinc steps carry text

White text passes AA from zinc 500 down; near-black text passes up to zinc 400. A common pairing is zinc 900 text on zinc 50, at 16.97:1.

Questions

Is zinc grey warm or cool?

Slightly cool. It has a small amount of blue, less than slate and gray, so it looks almost neutral.

Do these hex codes match Tailwind v4?

These are the Tailwind v3 hex values. Tailwind v4 defines its colours in OKLCH, so its zinc values are written differently and can differ very slightly. Copy as Tailwind in the tool to get your own scale as an @theme block.