← Back to All Colors
Tailwind Slate Color Palette
Cool gray with blue undertones, popular for dark mode and professional UIs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
slate-50
#f8fafc
100
slate-100
#f1f5f9
200
slate-200
#e2e8f0
300
slate-300
#cbd5e1
400
slate-400
#94a3b8
500
slate-500
#64748b
600
slate-600
#475569
700
slate-700
#334155
800
slate-800
#1e293b
900
slate-900
#0f172a
950
slate-950
#020617
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| slate-50 | #f8fafc | rgb(248, 250, 252) | hsl(210, 40%, 98%) | oklch(0.984 0.003 247.858) | |
| slate-100 | #f1f5f9 | rgb(241, 245, 249) | hsl(210, 40%, 96%) | oklch(0.968 0.007 247.896) | |
| slate-200 | #e2e8f0 | rgb(226, 232, 240) | hsl(214, 32%, 91%) | oklch(0.929 0.013 255.508) | |
| slate-300 | #cbd5e1 | rgb(203, 213, 225) | hsl(213, 27%, 84%) | oklch(0.869 0.022 252.894) | |
| slate-400 | #94a3b8 | rgb(148, 163, 184) | hsl(215, 20%, 65%) | oklch(0.704 0.04 256.788) | |
| slate-500 | #64748b | rgb(100, 116, 139) | hsl(215, 16%, 47%) | oklch(0.554 0.046 257.417) | |
| slate-600 | #475569 | rgb(71, 85, 105) | hsl(215, 19%, 35%) | oklch(0.446 0.043 257.281) | |
| slate-700 | #334155 | rgb(51, 65, 85) | hsl(215, 25%, 27%) | oklch(0.372 0.044 257.287) | |
| slate-800 | #1e293b | rgb(30, 41, 59) | hsl(217, 33%, 17%) | oklch(0.279 0.041 260.031) | |
| slate-900 | #0f172a | rgb(15, 23, 42) | hsl(222, 47%, 11%) | oklch(0.208 0.042 265.755) | |
| slate-950 | #020617 | rgb(2, 6, 23) | hsl(229, 84%, 5%) | oklch(0.129 0.042 264.695) |
Usage Examples
Background
bg-slate-500Text
text-slate-500Sample Text
Border
border-slate-300Ring
ring-slate-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