Tailwind Sky

Tailwind CSS's sky hue family — 11 stops from 50 (lightest) to 950 (darkest), forming a clear sky-blue chromatic 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 tailwindcoolchromatic

Swatches

sky-50
#F0F9FF
Lightest stop — page background in light mode.
sky-100
#DFF2FE
Very light surface — cards and panels on light background.
sky-200
#B8E6FE
Light divider, hairline, or subtle fill.
sky-300
#74D4FF
Muted accent or disabled-state foreground in light mode.
sky-400
#00BCFF
Mid-light tint — soft accent, hover wash, decorative fill.
sky-500
#00A6F4
Mid stop — the canonical brand hue for chromatic palettes.
sky-600
#0084D1
Mid-dark stop — primary action in light mode for chromatic palettes.
sky-700
#0069A8
Dark stop — pressed states, deeper emphasis.
sky-800
#00598A
Very dark stop — heavy emphasis, secondary text on light.
sky-900
#024A70
Near-darkest stop — body text on light, surface on dark.
sky-950
#052F4A
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 → sky-700
accent-hover → sky-600
background → sky-50
error → sky-700
primary → sky-500
primary-hover → sky-600
success → sky-600
surface → sky-100
surface-elevated → pure-white
text-primary → sky-900
text-secondary → sky-800
text-tertiary → sky-600
warning → sky-300
warning-hover → sky-400

Dark mode (14 roles)

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