← Back to All Colors
Tailwind Stone Color Palette
Warm gray with brown undertones, great for earthy and organic designs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
stone-50
#fafaf9
100
stone-100
#f5f5f4
200
stone-200
#e7e5e4
300
stone-300
#d6d3d1
400
stone-400
#a8a29e
500
stone-500
#78716c
600
stone-600
#57534e
700
stone-700
#44403c
800
stone-800
#292524
900
stone-900
#1c1917
950
stone-950
#0c0a09
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| stone-50 | #fafaf9 | rgb(250, 250, 249) | hsl(60, 9%, 98%) | oklch(0.985 0.001 106.423) | |
| stone-100 | #f5f5f4 | rgb(245, 245, 244) | hsl(60, 5%, 96%) | oklch(0.97 0.001 106.424) | |
| stone-200 | #e7e5e4 | rgb(231, 229, 228) | hsl(20, 6%, 90%) | oklch(0.923 0.003 48.717) | |
| stone-300 | #d6d3d1 | rgb(214, 211, 209) | hsl(24, 6%, 83%) | oklch(0.869 0.005 56.366) | |
| stone-400 | #a8a29e | rgb(168, 162, 158) | hsl(24, 6%, 64%) | oklch(0.709 0.01 56.259) | |
| stone-500 | #78716c | rgb(120, 113, 108) | hsl(25, 5%, 45%) | oklch(0.553 0.013 58.071) | |
| stone-600 | #57534e | rgb(87, 83, 78) | hsl(33, 5%, 32%) | oklch(0.444 0.011 73.639) | |
| stone-700 | #44403c | rgb(68, 64, 60) | hsl(30, 6%, 25%) | oklch(0.374 0.01 67.558) | |
| stone-800 | #292524 | rgb(41, 37, 36) | hsl(12, 6%, 15%) | oklch(0.268 0.007 34.298) | |
| stone-900 | #1c1917 | rgb(28, 25, 23) | hsl(24, 10%, 10%) | oklch(0.216 0.006 56.043) | |
| stone-950 | #0c0a09 | rgb(12, 10, 9) | hsl(20, 14%, 4%) | oklch(0.147 0.004 49.25) |
Usage Examples
Background
bg-stone-500Text
text-stone-500Sample Text
Border
border-stone-300Ring
ring-stone-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