Guide 01
The color wheel generator
How one base hue becomes primary, secondary and accent — and why harmony rules are a starting point, not a law.
- HSL
- Harmony
- Accent ratio
Website color system generator
One hue in. A whole interface palette out.
Curiosityjivar takes a niche and a base hue and builds the full set: primary, secondary and accent, background and surface layers, text and border tokens, hover and active states, light and dark variants, gradient recipes and glassmorphism blends — each one contrast-checked before you copy it.
- Tokens per system
- 24
- Contrast target
- 4.5:1
- Export formats
- HEX · RGB · HSL
Live generator
Live website preview
Ship the palette, not a screenshot
Every surface, border and text token below is generated from the hue you picked. Nothing here is hand-tweaked.
Primary action
Secondary
Surface / card
Contrast —
Pick a hue, then copy any token.
Five working guides
How a color system actually gets built
Each guide covers one layer of the system in detail — the decisions, the trade-offs and the parts that usually break in production.
Guide 02
Contrast & accessibility
The WCAG ratios that matter, where the maths misleads you, and how to test hover and focus states properly.
- WCAG 2.2
- 4.5:1
- Focus states
Guide 03
Gradients & glassmorphism
Interpolation spaces, banding, and the four-value recipe behind a frosted panel that still passes contrast.
- OKLCH
- Backdrop filter
- Noise
Guide 04
Light & dark variations
Elevation by lightness instead of shadow, desaturating for dark grounds, and keeping one token map for both themes.
- Elevation
- Saturation
- Theme swap
Guide 05
Tokens, export & preview
Naming that survives a redesign, HEX vs RGB vs HSL in real code, and what a live preview should actually prove.
- Naming
- CSS vars
- Handoff
Talk to us
Bring us your niche
Send the brand constraints you already have and we will tell you which parts of the system a generator can and cannot decide for you.
- Audit
- Handoff
- Support
Why a system, not a palette
Five swatches are a mood board. Twenty-four tokens are a product.
A palette picker gives you colours you like. An interface needs colours that behave: a border that reads as a border at 1px, a disabled state that still looks clickable-but-not-now, a hover that shifts enough to be felt without flashing. Those relationships are ratios between values, and ratios are exactly what a generator is good at holding steady.
Curiosityjivar treats the palette as a dependency graph. Change the base hue and every derived token recalculates: surfaces step by fixed lightness increments, borders sit at a set distance from the surface behind them, hover states move by a consistent amount in the same direction, and text tokens are clamped so they never fall under the contrast floor for their size class.
What it cannot do is decide taste. Brand warmth, cultural colour associations and the one accent your marketing team will defend to the death are human calls. The generator's job is to take that decision and propagate it everywhere without drift.
- Scales, not guessesSurface, border and text steps are derived from a single lightness ramp so contrast stays predictable.
- States built inHover, active, focus ring and disabled are generated alongside the base token, never bolted on later.
- Both themes at onceLight and dark variants share token names, so a theme swap is a variable change, not a rewrite.
- Checked before copyEvery text-on-surface pair is measured against WCAG thresholds before the value reaches your clipboard.