Turn a few brand colors into full color ramps that stay consistent with each other, ready to drop into a design system.
Type a single hex and the tool builds the full 11-step ramp from it, or paste a whole existing ramp and pick which colors drive it.
Each ramp follows one policy:
Each hex you pick is placed at the rung nearest its own lightness and becomes an anchor. Lightness itself is always taken from the shared ladder, so the picked hexes steer the curves, not the rungs. The main hex is the primary anchor (under Fixed it is reproduced exactly); guides are extra anchors at other lightnesses that bend the hue path.
The hue curve responds to your picks under every policy: between two anchors it interpolates along the shortest path on the wheel, and beyond the outermost anchors it holds flat. This lets a red stay a true red across its range instead of drifting pink.
The chroma curve is policy-dependent. Only Fixed follows your anchor chroma. Adaptive takes chroma from the system curve scaled to the cap, and Neutral crushes it to near-zero. So under Adaptive and Neutral the guides steer hue only.
Fixed ramps keep your exact input color and its chroma, placed at the rung its lightness fits: use these for colors branding dictates. Adaptive ramps keep only the hue; lightness follows the shared ladder and vibrance follows the cap: use these for accents and semantic colors. Neutral ramps keep the hue but hard-cap chroma very low, so a grey with a faint cast stays a subtle grey.
On any multi-color ramp: the main hex (marked with a star) is kept exactly under Fixed; the other swatches you select become guides that steer the ramp's hue at their lightness.
Tune how the model builds your ramps: the vibrance cap and the shared chroma curve. The defaults work for most palettes, so open this only if you want to push saturation or reshape where colors peak.
Chroma is governed by one shared shape, the same for every ramp. It is a set of ratios across the 11 steps, not chroma values: near-colorless at the lightest tint (about 8% of the peak), rising to full strength at the peak step, then easing back down but holding fairly rich in the darks. Because the shape is shared, every ramp rises and falls in chroma the same way, which is what makes them read as a family even though each hue peaks at a different absolute saturation. This curve is a deliberate default, tuned by hand around the usual convention that chroma is strongest in the mid-tones. What makes it a system rather than per-hue hand-tuning is that one curve serves every ramp.
To turn the shape into actual color, every ratio is multiplied by one peak value per ramp, called huePeak. The cap is what sets that value: for each Adaptive ramp, huePeak is the hue's own sRGB gamut at the peak step's lightness, clamped down to the cap if it would exceed it. So the cap does not change the shape of the curve at all; it only controls how loud the multiplier is. Lower it and the whole curve scales down uniformly. Raise it and vivid hues climb until their gamut stops them; the bell rises and falls exactly the same way, just louder.
The peak step matters because the gamut is measured there. Each hue has more or less room at different lightnesses, so moving the peak point changes what huePeak can be for every hue in the palette. A hue whose gamut sits below the cap is gamut-bound and the cap never touches it. A hue above the cap is pulled down to it exactly. The cap can only ever pull a hue down, never up, because a color cannot be pushed past its own gamut. That means your least-saturated hue governs the family: to make every Adaptive ramp share one vibrance you lower the cap to that weakest hue, and raising it above lets the vivid hues pull ahead. The graph marks the lowest peak as the real ceiling on cohesion. Fixed ramps bypass all of this, keeping your input chroma instead. Neutral ramps crush chroma to near-zero. Both ignore the cap and the curve.
See what holds the ramps together: the shared lightness ladder, the chroma paths of your brand ramps, and how the hues spread and drift.
Every ramp locks to this one lightness ladder, so the same step lands at the same lightness in all of them.
The steps are not evenly spaced. The ladder is front-loaded: more steps sit in the light end (50–300) and fewer in the dark end. Interfaces are surface-heavy: surfaces, hovers, and tinted backgrounds nearly all live in the light tints, so that is where you need fine control; the dark end only needs a handful of steps. The spacing is also perceptual, not numeric: each step is an equal visual jump in lightness (measured in OKLCH), which is why the gaps look uneven as raw numbers but even to the eye.
Hue is the axis the system leaves free. This check flags any two hues close enough to read as the same color, plus large gaps in the spread.
It flags any two hues closer than 15° (they will read as the same color) and large empty gaps (a lopsided wheel), and shows what even spacing would be for reference. Cohesion to the eye comes mostly from hue relationships, so this is the axis worth checking by hand. Neutral ramps are left out here, since a grey's hue is not part of the palette's variety.
Each strip is one ramp drawn at a single lightness and chroma, so the only thing changing left to right is hue. A single-hex ramp is flat. A multi-hex ramp drifts, since its anchors pull the hue toward a different angle at the light and dark ends.
Check that text and UI stay legible on the surfaces you build on, step by step, against WCAG thresholds.
Check legibility against the surfaces you build on.
Contrast follows WCAG 2.1. The gauge places a foreground-on-background pair on a scale against the thresholds; the per-ramp plots trace each step's contrast as text across both surfaces and on the ramp's own step-100, so you can see where a ramp crosses into legible. AA needs 4.5:1 for normal text and 3:1 for large text or UI; AAA needs 7:1.
Each plot runs light steps on the left to dark on the right. The solid line is contrast as text on the light surface, the dashed line on the dark surface, and the dotted line on the ramp's own step-100 (the alert pattern). Line color marks the level reached: green clears AA (4.5), amber only large text or UI (3), dim fails.