Tailwind Zinc

Eleven steps from zinc-50 to zinc-950. zinc-500 is #71717a. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. zinc-50 #fafafa · rgb(250, 250, 250) Black 20.1:1 AAA · White 1.0:1 Fail
  2. zinc-100 #f4f4f5 · rgb(244, 244, 245) Black 19.1:1 AAA · White 1.1:1 Fail
  3. zinc-200 #e4e4e7 · rgb(228, 228, 231) Black 16.6:1 AAA · White 1.3:1 Fail
  4. zinc-300 #d4d4d8 · rgb(212, 212, 216) Black 14.2:1 AAA · White 1.5:1 Fail
  5. zinc-400 #a1a1aa · rgb(161, 161, 170) Black 8.2:1 AAA · White 2.6:1 Fail
  6. zinc-500 #71717a · rgb(113, 113, 122) Black 4.3:1 Fail · White 4.8:1 AA
  7. zinc-600 #52525b · rgb(82, 82, 91) Black 2.7:1 Fail · White 7.7:1 AAA
  8. zinc-700 #3f3f46 · rgb(63, 63, 70) Black 2.0:1 Fail · White 10.4:1 AAA
  9. zinc-800 #27272a · rgb(39, 39, 42) Black 1.4:1 Fail · White 14.9:1 AAA
  10. zinc-900 #18181b · rgb(24, 24, 27) Black 1.2:1 Fail · White 17.7:1 AAA
  11. zinc-950 #09090b · rgb(9, 9, 11) Black 1.1:1 Fail · White 19.9:1 AAA

Copy into CSS

The official zinc steps as Tailwind theme variables.

@theme {
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
}