Tailwind Cyan

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

cyan-50
#ECFEFF
Lightest stop — page background in light mode.
cyan-100
#CEFAFE
Very light surface — cards and panels on light background.
cyan-200
#A2F4FD
Light divider, hairline, or subtle fill.
cyan-300
#53EAFD
Muted accent or disabled-state foreground in light mode.
cyan-400
#00D3F2
Mid-light tint — soft accent, hover wash, decorative fill.
cyan-500
#00B8DB
Mid stop — the canonical brand hue for chromatic palettes.
cyan-600
#0092B8
Mid-dark stop — primary action in light mode for chromatic palettes.
cyan-700
#007595
Dark stop — pressed states, deeper emphasis.
cyan-800
#005F78
Very dark stop — heavy emphasis, secondary text on light.
cyan-900
#104E64
Near-darkest stop — body text on light, surface on dark.
cyan-950
#053345
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 → cyan-700
accent-hover → cyan-600
background → cyan-50
error → cyan-700
primary → cyan-500
primary-hover → cyan-600
success → cyan-600
surface → cyan-100
surface-elevated → pure-white
text-primary → cyan-900
text-secondary → cyan-800
text-tertiary → cyan-600
warning → cyan-300
warning-hover → cyan-400

Dark mode (14 roles)

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