Slate vs Gray for Dark Mode

Compare Tailwind's slate and gray specifically for dark mode background and text choices.

Slate

#64748b

Blue-tinted dark surfaces

Gray

#6b7280

Neutral dark surfaces

Side-by-Side Comparison

AspectSlateGray
UndertoneBlue tint visible in dark modeNo tint, pure dark
MoodRich, moody, developer-friendlyClean, versatile, plain
Pairs well withBlue, indigo, cyan accentsAny accent hue
Use caseCode editors, terminal UIs, dev toolsGeneral dark themes, settings pages
Best ForDark mode with blue accent cohesionDark mode with any accent color

Our Recommendation

Slate dark mode for developer tools and blue-accented UIs. Gray dark mode for flexible, any-accent themes.

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

#neutrals#slate#gray#dark-mode#comparison