Color Studio

Pick a color and get the rest of the work done: a shade scale that steps evenly to the eye, WCAG and APCA contrast side by side, and design tokens you can paste straight into a stylesheet. Everything runs in your browser.

Shades & tints

An 11-step ramp built in OKLCH, so the steps look evenly spaced rather than merely measuring evenly spaced. Your color keeps its exact value at the step nearest its own lightness — marked below. Each swatch also carries the contrast ratio of white and black text sitting on it, which is the part you actually need when you go to use the scale.

Colour harmony

Partner colours, found by rotating hue in OKLCH rather than HSL. That distinction is the whole point: HSL's hue is an artifact of the RGB cube, so its “complement” of a strong blue arrives as a yellow that is far lighter to the eye and cannot sit beside the original at equal weight. Rotating perceptually holds lightness fixed, so these come back as siblings.

Contrast

WCAG 2.1 is what you get audited against today. APCA is polarity-aware — it scores light-on-dark and dark-on-light as the different problems they actually are, which is why dark interfaces so often pass an audit and still read badly. Both are here because both are true.

Contrast matrix

Every step of the scale against every other. This is the question you actually have once you own a ramp — not “is this colour accessible” but “which two of mine can I put together.” Figures are WCAG 2.1 ratios; a cell is filled when the pair clears 4.5:1 for body text, outlined at 3:1 for large text and UI, and left empty below that.

Colour vision

The scale as it reaches someone with dichromatic vision, simulated by projecting each colour onto the plane their two remaining cone types can span (Brettel, Viénot & Mollon, 1997). Roughly one man in twelve has some form of this. Where two steps converge here, they are carrying no information for that reader — whatever those colours were distinguishing needs a second cue.

In an interface

A ratio tells you whether a pair is legal. It does not tell you whether the colour is doing the job you wanted. This is the scale wearing the shapes it will actually appear in — the steps are picked from your ramp automatically, light surface and dark surface, so you can see which end of it your brand colour is actually usable at.

Design tokens

The scale above, in whatever shape your project wants it. Name it once and every format follows.

Saved colors

Kept in this browser's local storage, on this device only. No account and no server — which also means they don't follow you to another machine.