Amber is one of the fifty hues the v2 generator can ramp into ten shades. A warm hue: energetic, attention-drawing — best for CTAs, warnings and accents in small doses.
Ramp structure#
| Step | Role |
|---|---|
| 100–300 | Tinted surfaces, light-mode backgrounds, badges |
| 400–600 | Primary interactive range: buttons, links, highlights |
| 700–900 | Dark surfaces, strong text, dark-mode fills |
| 950 | Deepest step — near-black tinted backgrounds |
Generating it#
const css = new CSSGenerator({
theme: { colors: { amber: true } },
}).generate();
// emits text-amber-*, bg-amber-*, border-amber-* rampsIn themes#
The five presets bias different hue families: Neon Cyber favors saturated steps, Pastel Dream clamps saturation, Nature pulls selectively on it. See Themes.