I spent years picking colors the same way most of us do. Eyedrop a hex from a mockup, massage it in HSL until it looks right, ship it, and then watch it fall apart. The hover state turns muddy. The chart series that looked distinct on my monitor becomes a blur on a cheap office display. An accessibility audit flags the secondary button text I never thought to check.
So I did what developers do. I got annoyed enough to build a tool. That tool became Shademix, and somewhere along the way it stopped being my personal utility and turned into something thousands of designers, decorators and developers now use every day. Partly because it costs nothing, sure. But mostly, judging by the mail I get, because it fixes the exact chain of small failures I just described. This post is the workflow baked into it. You can follow it with any tools you like, the ideas are not mine to own.
HSL lies about lightness
Here is the root problem. In HSL, hsl(60 100% 50%) and hsl(240 100% 50%) claim identical lightness. Look at them side by side: the yellow glows, the blue is nearly dark. Every palette built by spinning the hue wheel in HSL inherits that dishonesty, which is why one tag color always pops and another always sinks.
OKLCH fixes it. Its lightness channel is perceptual, meaning two colors with equal L genuinely look equally bright. Once you have that, three chores become mechanical. Harmonies: rotate hue, keep L and C, and complementary, triadic, tetradic, split, square and monochromatic schemes all come out visually balanced. Tints and shades: move L alone and the hue stops drifting toward mud. Contrast: keep text near L 0.95 and surfaces under 0.35 and you rarely fail WCAG by accident.
Support is a non-issue now, oklch() works in every current browser:
.btn {
background: #2f6fde; /* old-engine fallback */
background: oklch(0.55 0.17 262);
}
.btn:hover {
background: oklch(0.48 0.17 262); /* only L moves, hue stays clean */
}
Sample the color people actually see
If the brand color lives in a photo or a screenshot, a single-pixel eyedropper will betray you. JPEG compression speckles flat areas with near-misses, and the pixel you happen to hit can sit a visible distance from the color everyone perceives. Sample an area, or take the dominant cluster.
In Shademix this is the Pick tab: drop an image, paste a screenshot with Ctrl or Cmd+V, point the live camera at a wall, or grab from the screen. You get the color in HEX, RGB, HSL, HSV, CMYK, LAB, LCH and OKLCH at once, so whatever the next tool in your chain expects, the value is one tap away. There is also a loupe for the times you really do need one exact pixel.
Name it in the system your client speaks
Developers think in hex. Print shops think in CMYK and Pantone. Architects spec RAL, Scandinavian clients bring NCS, painters bring fan decks. The lookup side of the tool matches any color across ten reference systems and, crucially, shows the delta-E distance on every match. That number is the honesty the usual "closest match" hides. Under 2, nobody can tell the difference. Above 5, everyone can. Knowing which side you are on before ordering paint or a print run has saved me real money more than once.
Build the scheme, then interrogate it
Picking the palette is the fun part. The part that keeps you out of trouble is the interrogation, and it is exactly the part teams skip when it lives in a separate tool they have to remember to open.
So the workflow puts it inline. Run the whole palette through a pairwise WCAG matrix, every foreground against every background, AA and AAA, normal and large text. Five colors is twenty ordered pairs, which is nothing for a machine and torture by hand. Then run the color blindness simulation: protanopia, deuteranopia, tritanopia, achromatopsia. Roughly eight percent of men see color differently, and if your error and success states only differ by hue, some users simply cannot tell them apart. Then the lighting preview, which renders the palette under six illuminants from warm tungsten to north-sky daylight, because a color that changes character between the showroom and the living room is a complaint waiting to be filed. And if anything is headed for paper, the CMYK gamut warning tells you upfront which saturated screen colors will clip on an offset press, and suggests the nearest printable neighbour.
None of this is exotic color science. It is just moved to where you already are, so it actually happens.
Ship values, not screenshots
A palette that lives in a screenshot dies in a screenshot. Export it in the format the code expects: CSS variables, a Tailwind config, JSON, SVG, or straight to design tools as Figma tokens, Sketch or Procreate swatches, Adobe ASE, Photoshop ACO, GIMP GPL. Eleven formats out, nine formats in, so the palette a client mails you as an .ase file lands in the same library as the one you sampled from a site photo. Everything can be filed into per-client projects, compared four at a time as aligned strips, shared as a plain link with the colors encoded in the URL, or exported as a print-ready PDF with crop marks when the deliverable is physical.
The part that surprised people
Shademix runs entirely on your device. Browser, iPhone, iPad, Mac, Vision Pro, and Android on the way. Nothing you sample or import is uploaded anywhere, there is no account, no tracking, and no paywall waiting at the end. When it started spreading I assumed the reason was simply "free". Reading the feedback, the actual reason seems to be that it holds the whole chain, sample, match, harmonize, verify, export, in one place, so the verification steps stop being optional.
Take the workflow even if you never touch the tool: pick in OKLCH, sample areas not pixels, demand the delta-E, run the contrast matrix and the CVD simulation every time, and export real values. Your future self, staring at a hover state that finally is not muddy, will be grateful.
If you want to try it, it is at shademix.com, and the deeper guides with screenshots live on shademix.app. Free, no account, in your browser.
Top comments (1)
"survive contact with real screens" is such a good way to put it. i pick colors from a mockup and then they look totally off once it's live, so i'm reading this closely even if half of oklch is still new to me.