Red 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: { red: true } },
}).generate();
// emits text-red-*, bg-red-*, border-red-* 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.