Tailwind Rose

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

Swatches

rose-50
#FFF1F2
Lightest stop — page background in light mode.
rose-100
#FFE4E6
Very light surface — cards and panels on light background.
rose-200
#FFCCD3
Light divider, hairline, or subtle fill.
rose-300
#FFA1AD
Muted accent or disabled-state foreground in light mode.
rose-400
#FF637E
Mid-light tint — soft accent, hover wash, decorative fill.
rose-500
#FF2056
Mid stop — the canonical brand hue for chromatic palettes.
rose-600
#EC003F
Mid-dark stop — primary action in light mode for chromatic palettes.
rose-700
#C70036
Dark stop — pressed states, deeper emphasis.
rose-800
#A50036
Very dark stop — heavy emphasis, secondary text on light.
rose-900
#8B0836
Near-darkest stop — body text on light, surface on dark.
rose-950
#4D0218
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 → rose-700
accent-hover → rose-600
background → rose-50
error → rose-700
primary → rose-500
primary-hover → rose-600
success → rose-600
surface → rose-100
surface-elevated → pure-white
text-primary → rose-900
text-secondary → rose-800
text-tertiary → rose-600
warning → rose-300
warning-hover → rose-400

Dark mode (14 roles)

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