Generated ramps
Click a step to copy its hex.
Palette cohesion
What holds the ramps together: the shared lightness ladder, each brand ramp’s chroma path, and how the hues spread out.
Lightness ladder
Every ramp shares this lightness rhythm, so a step sits at a consistent lightness across ramps — the backbone of a cohesive palette, not a strict rule every hue obeys the same way. Light to dark, left to right: each row is a ramp, the vertical lines are the shared steps. Yellows and limes are the deliberate exception: they ride lighter where the shared rung would turn them olive, the same move every hand-tuned palette makes to keep yellow usable.
How the ladder is spaced, and why a dot can sit off its line
The steps are not evenly spaced. The ladder is front-loaded: more steps in the light end (50–300), where interfaces live (surfaces, hovers, tinted backgrounds), fewer in the dark end. Spacing is perceptual, not numeric: each step is an equal visual jump in OKLCH lightness, so the gaps look uneven as numbers but even to the eye.
A dot off its line is one of two things: a Fixed brand hex whose own lightness misses its step (the cost of pinning an exact color), or a contract step nudged until it meets its floor. The ladder is contrast-graded: 500 holds 3:1 (UI, large text), 600 holds 4.5:1 as text on its mode’s surface and on its own 050 tint (the toast/alert case), 700 holds 7:1 (AAA) — so AA toast text is 600 and AAA toast text is 800. Generated 600s hold a narrow strength band (4.5–4.65 on the tint) and tints (50–400) share per-step chroma ceilings, so an alert reads the same strength — and its background pops the same — on every ramp; pinned brand hexes stay exempt. In light mode green and cyan need a touch more darkness than red to get there; in dark mode it’s the reds that need the lift. Hues lifted hardest — yellows and golds hugging the gamut’s light cusp — sit out these contracts: chasing 4.5:1 there is what turns them olive, and hand-tuned scales don’t hold yellow to it either. Gently lifted neighbors (oranges, limes) keep every contract, locked against their lifted rungs.
Hue spread & harmony
Hue is the axis the system leaves free. This flags any two hues close enough to read as the same color, plus large gaps in the spread.
How closeness and spread are measured across hues
It flags any two hues closer than 12° (they read as the same color) and any large empty gaps (a lopsided wheel), and shows even spacing 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, since a grey’s hue is not part of the palette’s variety.
Hue across each ramp
Each strip is one ramp at a single lightness and chroma, so the only thing changing left to right is hue.
Contrast & legibility
Check that text and UI stay legible on the surfaces you build on, step by step, against WCAG thresholds.
What the thresholds mean and how the readout works
Contrast follows WCAG 2.1. The gauge places one foreground-on-background pair on a scale against the thresholds; the per-ramp readout lists which steps clear each level as text, on both surfaces and on the ramp’s own 050 tint — the toast/alert surface. AA needs 4.5:1 for normal text and 3:1 for large text or UI; AAA needs 7:1.
Per-ramp legibility
For each ramp, the steps that pass each WCAG level as text on your light and dark surfaces, and on the ramp’s own 050 tint.
Export
Your finished ramps, light and dark together, ready to paste.