HSL lied. OKLCH tells the truth.
In a design system, color consistency is structural. When a blue-500 and a yellow-500 don't carry the same visual weight, hierarchies break. Surfaces that should feel equivalent don't. Contrast becomes unpredictable. Designers compensate by hand, nudging individual shades until it “looks right.” Then dark mode arrives and every correction starts over. The root cause is HSL: a 50% lightness in blue looks nothing like 50% lightness in yellow. Equal numbers, unequal perception. Every palette generator on the market works in HSL.
OKLCH solves this at the math level. It's a perceptually uniform color space: equal steps in lightness actually look equal to the human eye. Building the Lyse Library token system (5 palettes, 11 shades each, light and dark mode) made this non-negotiable. But no tool existed that combined OKLCH generation with accessibility checking and multi-format export. The options were either academically correct but unusable, or beautiful but perceptually wrong. So the tool got built from scratch.
One seed color. Twelve shades. Zero guesswork.
The generator takes a single seed color and produces 12 perceptually uniform shades. Fine-grained control over lightness, chroma, and hue curves. The output is mathematically correct and visually balanced. No more eyeballing gradients or adjusting individual swatches by hand. One input, one palette, ready to ship.
But generating colors is only half the problem. The other half is knowing whether they're actually usable. Every shade in Magiklch is checked against APCA readability thresholds in real time. Not WCAG 2.1 contrast ratios, which are known to be unreliable for modern displays. APCA (Accessible Perceptual Contrast Algorithm) measures how text actually appears on screen. The full contrast matrix shows every combination: which shade works for body text, which works for large text, which fails. No ambiguity.
Built for the workflow. Not the demo.
The tool ships with 29 ready-to-use palettes: 22 inspired by Tailwind defaults, 7 custom additions. A catalogue to browse, a shuffle mode to discover unexpected combinations. But the real value is in the output. Every palette exports as CSS custom properties, Tailwind config, or JSON. Copy and ship. The entire tool was built with Lyse Library components, making it both a product and a proof of the design system it was built to serve.
Magiklch also includes Blocks: pre-built UI patterns (login forms, dashboards, landing sections) that preview in real time with the generated palette. The goal is to see how colors behave in context, not just as isolated swatches. A palette that looks balanced in a grid can fall apart in a real interface. Blocks close that gap before the colors ever reach production.
Scratch your own itch. Then open-source it.
Magiklch started as an internal tool to generate Lyse's token palettes. The decision to open-source it came from a simple observation: every design system team faces the same problem. Generating accessible, perceptually uniform color scales is hard, and the existing tools don't take it seriously. Making it public cost nothing and compounded the value.
The deeper lesson was about building tools that serve the workflow, not the other way around. Every feature in Magiklch exists because it solved a real friction point during Lyse's development. The contrast matrix exists because manually checking shade combinations was taking hours. The export formats exist because copying values between tools was error-prone. The Blocks feature exists because palettes that look good in isolation kept breaking in real interfaces. When the tool comes from the work, it tends to be useful to anyone doing similar work.
