Violet is one of the fifty hues the v2 generator can ramp into ten shades. A mid-spectrum hue with broad utility across surfaces, text and accents.
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: { violet: true } },
}).generate();
// emits text-violet-*, bg-violet-*, border-violet-* 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.