Tailwind Gray

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

Swatches

gray-50
#F9FAFB
Lightest stop — page background in light mode.
gray-100
#F3F4F6
Very light surface — cards and panels on light background.
gray-200
#E5E7EB
Light divider, hairline, or subtle fill.
gray-300
#D1D5DC
Muted accent or disabled-state foreground in light mode.
gray-400
#99A1AF
Mid-light tint — soft accent, hover wash, decorative fill.
gray-500
#6A7282
Mid stop — the canonical brand hue for chromatic palettes.
gray-600
#4A5565
Mid-dark stop — primary action in light mode for chromatic palettes.
gray-700
#364153
Dark stop — pressed states, deeper emphasis.
gray-800
#1E2939
Very dark stop — heavy emphasis, secondary text on light.
gray-900
#101828
Near-darkest stop — body text on light, surface on dark.
gray-950
#030712
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 → gray-600
accent-hover → gray-500
background → gray-50
error → gray-700
primary → gray-900
primary-hover → gray-800
success → gray-600
surface → gray-100
surface-elevated → pure-white
text-primary → gray-900
text-secondary → gray-700
text-tertiary → gray-500
warning → gray-500
warning-hover → gray-400

Dark mode (14 roles)

accent → gray-400
accent-hover → gray-300
background → gray-950
error → gray-300
primary → gray-100
primary-hover → gray-200
success → gray-400
surface → gray-900
surface-elevated → gray-800
text-primary → gray-50
text-secondary → gray-300
text-tertiary → gray-500
warning → gray-400
warning-hover → gray-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)