Stone vs Slate: Warm vs Cool Neutral Foundations
Compare warm stone and cool slate for page foundations and text color systems.
Stone
#78716c
Warm brown/taupe
Slate
#64748b
Cool blue
Side-by-Side Comparison
| Aspect | Stone | Slate |
|---|---|---|
| Temperature | Warm, earthy, inviting | Cool, sharp, professional |
| Psychology | Comfort, nature, authenticity | Intelligence, technology, precision |
| Pairs well with | Amber, orange, green | Blue, indigo, cyan |
| Use case | Restaurant, cafe, craft sites | SaaS, dev tools, analytics |
| Best For | Organic brands, hospitality, warmth | Tech brands, dashboards, coolness |
Our Recommendation
Stone for warm, inviting brand foundations. Slate for cool, tech-forward product foundations.
Tailwind Classes
Stone
Background: bg-stone-500
Text: text-stone-500
Border: border-stone-500
Slate
Background: bg-slate-500
Text: text-slate-500
Border: border-slate-500
#temperature#stone#slate#neutrals#comparison