About
A colour tool that thinks in scales.
Swwwatch helps you discover colours and turn them into full, perceptually even light-to-dark scales you can ship straight into a design system.
Why I built it
A blank colour wheel is too much. Infinite options, no guidance. I'd lose time second-guessing every choice.
I didn't want more freedom. I wanted fewer, better decisions: a way to discover colours, then judge them against clear rules, so I could pick with confidence instead of staring at a wheel.
Most colour tools also stop at five flat swatches. That's a starting point, not a design system. The moment you need a real palette, with hover states, borders, backgrounds and dark mode, you're hand-mixing shades and hoping they feel consistent.
So Swwwatch does two things. It helps you discover colours worth using, and turns them into complete, balanced scales you can hand straight to the build. The rules guide the choices and flag anything that doesn't fit.
It's made to make real work faster.
I built it for my own Webflow projects. But it outputs plain hex codes, so it works with any tool or website that takes them.
The rules it follows
A few principles keep the output predictable and genuinely usable.
OKLCH, not HSL
Steps are spaced by how the eye actually sees them, so a scale looks even instead of bunching up at the bright or dark end.
Eased ramps
A symmetric easing curve balances both ends of the scale at once, so light and dark mirror each other instead of one end jumping. Intensity peaks at your base colour and tapers outwards, so no step turns harsh or muddy.
Every shade stays on screen
Colour that falls outside what a standard display can show normally clips to a flat, slightly wrong shade. Swwwatch eases each step back into range, so the hex you copy is the colour you actually get.
Light and dark are anchored
The lightest and darkest steps are locked, so every scale has a dependable top and bottom.
Neutrals have intent
You choose the undertone, warm, cool, or matched to your primary, instead of a flat, accidental grey.
Clashes get flagged
Add a colour that fights the rest and Swwwatch points it out with a fix, rather than letting it slip into the system.
Technology
Swwwatch is built on OKLCH, a modern colour model that describes colour the way the eye sees it, using lightness, chroma for intensity, and hue.
That's what makes the scales work. Because OKLCH is perceptually uniform, even steps look even, with no bunching at the bright or dark end like you get with HSL or raw hex maths.
On top of that sits the ramp engine: a symmetric easing curve that builds each scale outwards from your colour, balancing the light and dark ends together so both modes hold up.
It also keeps every colour reproducible. Push chroma too hard at the light or dark end and a shade can fall outside the sRGB range a normal screen can show, which clips it to a flat, slightly off colour. Swwwatch checks each step and eases the chroma back until it fits, so what you copy renders exactly.
Both ramps run between the same two blues, generated by Swwwatch. The OKLCH steps stay even on either background, while the naive HSL version bunches in the middle and drifts cooler.