Tailwind Amber

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

Swatches

amber-50
#FFFBEB
Lightest stop — page background in light mode.
amber-100
#FEF3C6
Very light surface — cards and panels on light background.
amber-200
#FEE685
Light divider, hairline, or subtle fill.
amber-300
#FFD230
Muted accent or disabled-state foreground in light mode.
amber-400
#FFB900
Mid-light tint — soft accent, hover wash, decorative fill.
amber-500
#FE9A00
Mid stop — the canonical brand hue for chromatic palettes.
amber-600
#E17100
Mid-dark stop — primary action in light mode for chromatic palettes.
amber-700
#BB4D00
Dark stop — pressed states, deeper emphasis.
amber-800
#973C00
Very dark stop — heavy emphasis, secondary text on light.
amber-900
#7B3306
Near-darkest stop — body text on light, surface on dark.
amber-950
#461901
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 → amber-700
accent-hover → amber-600
background → amber-50
error → amber-700
primary → amber-500
primary-hover → amber-600
success → amber-600
surface → amber-100
surface-elevated → pure-white
text-primary → pure-black
text-secondary → amber-800
text-tertiary → amber-600
warning → amber-300
warning-hover → amber-400

Dark mode (14 roles)

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