Tailwind Stone

Tailwind CSS's stone hue family — 11 stops from 50 (lightest) to 950 (darkest), forming a warm-leaning neutral 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 tailwindneutralwarm

Swatches

stone-50
#FAFAF9
Lightest stop — page background in light mode.
stone-100
#F5F5F4
Very light surface — cards and panels on light background.
stone-200
#E7E5E4
Light divider, hairline, or subtle fill.
stone-300
#D6D3D1
Muted accent or disabled-state foreground in light mode.
stone-400
#A6A09B
Mid-light tint — soft accent, hover wash, decorative fill.
stone-500
#79716B
Mid stop — the canonical brand hue for chromatic palettes.
stone-600
#57534D
Mid-dark stop — primary action in light mode for chromatic palettes.
stone-700
#44403B
Dark stop — pressed states, deeper emphasis.
stone-800
#292524
Very dark stop — heavy emphasis, secondary text on light.
stone-900
#1C1917
Near-darkest stop — body text on light, surface on dark.
stone-950
#0C0A09
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 → stone-600
accent-hover → stone-500
background → stone-50
error → stone-700
primary → stone-900
primary-hover → stone-800
success → stone-600
surface → stone-100
surface-elevated → pure-white
text-primary → stone-900
text-secondary → stone-700
text-tertiary → stone-500
warning → stone-500
warning-hover → stone-400

Dark mode (14 roles)

accent → stone-400
accent-hover → stone-300
background → stone-950
error → stone-300
primary → stone-100
primary-hover → stone-200
success → stone-400
surface → stone-900
surface-elevated → stone-800
text-primary → stone-50
text-secondary → stone-300
text-tertiary → stone-500
warning → stone-400
warning-hover → stone-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-18 (upstream version 4.x)