Cobalt is one of the fifty hues the v2 generator can ramp into ten shades. A cool hue: calm and trustworthy — the backbone of dashboards, links and informational UI.
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: { cobalt: true } },
}).generate();
// emits text-cobalt-*, bg-cobalt-*, border-cobalt-* 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.