OKLCH vs HSL:
Why Pixel Art Needs Perceptual Color
For decades, digital art software relied on HSL and HSV for color pickers and ramp generation. While mathematically simple, HSL fails to account for human visual perception, creating unbalanced shading and inconsistent contrast.
1. The Flaw in HSL Lightness
In HSL, pure yellow (#FFFF00) and pure blue (#0000FF) both have a lightness of exactly L = 50%.
However, human eyes perceive yellow as drastically brighter than blue because our green and red cone receptors have peak sensitivity in that wavelength range. In OKLCH (developed by Björn Ottosson in 2020), this is corrected:
2. Shading Ramps & Muddy Transitions
When creating a color ramp in HSL by linearly stepping the Lightness channel from 20% to 80%, different hues produce wildly different visual contrast jumps. A blue ramp will look crushed and dark, while a yellow ramp will blow out into near-white instantly.
OKLCH solves this by modeling lightness (L) on a perceptually uniform curve. A step of +10% in OKLCH feels like the exact same brightness step whether you are working in teal, violet, or amber.
3. Chroma vs HSL Saturation
HSL saturation is normalized relative to lightness (100% saturation at L=50% is vivid, but at L=95% it is nearly white). In OKLCH, Chroma (C) is an absolute, physically grounded measurement of color purity.
This means you can adjust lightness without unintentionally changing the vividness of your palette anchors.
4. Gamut Fitting
Because OKLCH is unbounded, some mathematical coordinates fall outside the standard sRGB display gamut. Our engine uses binary search chroma reduction to clip colors precisely to the sRGB boundary while strictly preserving hue and perceptual lightness.
Try it in action
Build your next pixel art palette with real OKLCH perceptual harmony.