Tailwind Slate

Tailwind CSS's slate hue family — 11 stops from 50 (lightest) to 950 (darkest), forming a neutral gray-blue scale. Use directly as a brand palette or pair with an accent hue from another tailwind-* atom.

13 swatches 14 light roles 14 dark roles tailwindneutralcool

Swatches

slate-50
#F8FAFC
Lightest stop — page background in light mode.
slate-100
#F1F5F9
Very light surface — cards and panels on light background.
slate-200
#E2E8F0
Light divider, hairline, or subtle fill.
slate-300
#CAD5E2
Muted accent or disabled-state foreground in light mode.
slate-400
#90A1B9
Mid-light tint — soft accent, hover wash, decorative fill.
slate-500
#62748E
Mid stop — the canonical brand hue for chromatic palettes.
slate-600
#45556C
Mid-dark stop — primary action in light mode for chromatic palettes.
slate-700
#314158
Dark stop — pressed states, deeper emphasis.
slate-800
#1D293D
Very dark stop — heavy emphasis, secondary text on light.
slate-900
#0F172B
Near-darkest stop — body text on light, surface on dark.
slate-950
#020618
Darkest stop — page background in dark mode.
pure-white
#FFFFFF
Maximum-elevation surface and high-contrast text in dark mode.
pure-black
#000000
High-contrast text on light chromatic hues where the deepest stop reads as the hue, not black.

Mode role mappings

Light mode (14 roles)

accent → slate-600
accent-hover → slate-500
background → slate-50
error → slate-700
primary → slate-900
primary-hover → slate-800
success → slate-600
surface → slate-100
surface-elevated → pure-white
text-primary → slate-900
text-secondary → slate-700
text-tertiary → slate-500
warning → slate-500
warning-hover → slate-400

Dark mode (14 roles)

accent → slate-400
accent-hover → slate-300
background → slate-950
error → slate-300
primary → slate-100
primary-hover → slate-200
success → slate-400
surface → slate-900
surface-elevated → slate-800
text-primary → slate-50
text-secondary → slate-300
text-tertiary → slate-500
warning → slate-400
warning-hover → slate-500

Provenance

Source
https://tailwindcss.com/docs/colors
License
MIT
Attribution
Tailwind CSS colors, Copyright Tailwind Labs Inc., MIT licensed. Hex values derived from canonical OKLCH definitions in packages/tailwindcss/theme.css via the W3C CSS Color Module Level 4 OKLCH → sRGB conversion.
Imported
2026-05-17 (upstream version 4.3.0)