Tailwind Fuchsia

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

fuchsia-50
#FDF4FF
Lightest stop — page background in light mode.
fuchsia-100
#FAE8FF
Very light surface — cards and panels on light background.
fuchsia-200
#F6CFFF
Light divider, hairline, or subtle fill.
fuchsia-300
#F4A8FF
Muted accent or disabled-state foreground in light mode.
fuchsia-400
#ED6AFF
Mid-light tint — soft accent, hover wash, decorative fill.
fuchsia-500
#E12AFB
Mid stop — the canonical brand hue for chromatic palettes.
fuchsia-600
#C800DE
Mid-dark stop — primary action in light mode for chromatic palettes.
fuchsia-700
#A800B7
Dark stop — pressed states, deeper emphasis.
fuchsia-800
#8A0194
Very dark stop — heavy emphasis, secondary text on light.
fuchsia-900
#721378
Near-darkest stop — body text on light, surface on dark.
fuchsia-950
#4B004F
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 → fuchsia-700
accent-hover → fuchsia-600
background → fuchsia-50
error → fuchsia-700
primary → fuchsia-500
primary-hover → fuchsia-600
success → fuchsia-600
surface → fuchsia-100
surface-elevated → pure-white
text-primary → fuchsia-900
text-secondary → fuchsia-800
text-tertiary → fuchsia-600
warning → fuchsia-300
warning-hover → fuchsia-400

Dark mode (14 roles)

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