Tailwind Green

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

green-50
#F0FDF4
Lightest stop — page background in light mode.
green-100
#DCFCE7
Very light surface — cards and panels on light background.
green-200
#B9F8CF
Light divider, hairline, or subtle fill.
green-300
#7BF1A8
Muted accent or disabled-state foreground in light mode.
green-400
#05DF72
Mid-light tint — soft accent, hover wash, decorative fill.
green-500
#00C950
Mid stop — the canonical brand hue for chromatic palettes.
green-600
#00A63E
Mid-dark stop — primary action in light mode for chromatic palettes.
green-700
#008236
Dark stop — pressed states, deeper emphasis.
green-800
#016630
Very dark stop — heavy emphasis, secondary text on light.
green-900
#0D542B
Near-darkest stop — body text on light, surface on dark.
green-950
#032E15
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 → green-700
accent-hover → green-600
background → green-50
error → green-700
primary → green-500
primary-hover → green-600
success → green-600
surface → green-100
surface-elevated → pure-white
text-primary → green-900
text-secondary → green-800
text-tertiary → green-600
warning → green-300
warning-hover → green-400

Dark mode (14 roles)

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