← Back to All Colors
Tailwind Zinc Color Palette
Modern neutral gray, slightly warmer than gray with minimal color cast.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
zinc-50
#fafafa
100
zinc-100
#f4f4f5
200
zinc-200
#e4e4e7
300
zinc-300
#d4d4d8
400
zinc-400
#a1a1aa
500
zinc-500
#71717a
600
zinc-600
#52525b
700
zinc-700
#3f3f46
800
zinc-800
#27272a
900
zinc-900
#18181b
950
zinc-950
#09090b
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| zinc-50 | #fafafa | rgb(250, 250, 250) | hsl(0, 0%, 98%) | oklch(0.985 0 0) | |
| zinc-100 | #f4f4f5 | rgb(244, 244, 245) | hsl(240, 5%, 96%) | oklch(0.967 0.001 286.375) | |
| zinc-200 | #e4e4e7 | rgb(228, 228, 231) | hsl(240, 6%, 90%) | oklch(0.92 0.004 286.32) | |
| zinc-300 | #d4d4d8 | rgb(212, 212, 216) | hsl(240, 5%, 84%) | oklch(0.871 0.006 286.286) | |
| zinc-400 | #a1a1aa | rgb(161, 161, 170) | hsl(240, 5%, 65%) | oklch(0.705 0.015 286.067) | |
| zinc-500 | #71717a | rgb(113, 113, 122) | hsl(240, 4%, 46%) | oklch(0.552 0.016 285.938) | |
| zinc-600 | #52525b | rgb(82, 82, 91) | hsl(240, 5%, 34%) | oklch(0.442 0.017 285.786) | |
| zinc-700 | #3f3f46 | rgb(63, 63, 70) | hsl(240, 5%, 26%) | oklch(0.37 0.013 285.805) | |
| zinc-800 | #27272a | rgb(39, 39, 42) | hsl(240, 4%, 16%) | oklch(0.274 0.006 286.033) | |
| zinc-900 | #18181b | rgb(24, 24, 27) | hsl(240, 6%, 10%) | oklch(0.21 0.006 285.885) | |
| zinc-950 | #09090b | rgb(9, 9, 11) | hsl(240, 10%, 4%) | oklch(0.141 0.005 285.823) |
Usage Examples
Background
bg-zinc-500Text
text-zinc-500Sample Text
Border
border-zinc-300Ring
ring-zinc-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow