Slate vs Gray for Headings and Text
Compare slate and gray for heading colors and body text in Tailwind CSS design systems.
Slate
#64748b
Blue undertone in text
Gray
#6b7280
Neutral, no undertone
Side-by-Side Comparison
| Aspect | Slate | Gray |
|---|---|---|
| Readability | Excellent, blue tint adds depth | Excellent, universally readable |
| Brand cohesion | Reinforces blue/tech branding | Color-agnostic, flexible |
| Pairs well with | Blue primary, indigo accents | Any primary color |
| Use case | API docs, technical blogs, SaaS | Shops, news sites, general content |
| Best For | Tech content, documentation | General content, e-commerce |
Our Recommendation
Slate headings for tech-branded content. Gray headings for universal, brand-agnostic readability.
Tailwind Classes
Slate
Background: bg-slate-500
Text: text-slate-500
Border: border-slate-500
Gray
Background: bg-gray-500
Text: text-gray-500
Border: border-gray-500
#typography#slate#gray#headings#comparison