OKLCH for Pixel Art
Pixel art lives and dies by its palette. A 7-color palette with perceptually even lightness steps looks polished. A palette mixed in HSL with muddy midtones looks amateur — even with great sprites. OKLCH fixes this at the math level.
What makes OKLCH different?
RGB and HSL were designed for screens, not for human perception. In HSL, a yellow at 60° hue and L=50% is perceptually much brighter than a blue at 240° with the same L. Your eye notices the difference — your code doesn't.
OKLCH stands for OK Lightness Chroma Hue. The "OK" comes from the Björn Ottosson model that achieves near-perfect perceptual uniformity. When you step L from 0.4 to 0.5, the brightness change is the same regardless of hue.
// HSL — same "lightness" value, very different perceived brightness
hsl(60, 100%, 50%) ← blinding yellow
hsl(240, 100%, 50%) ← dark navy
// OKLCH — L=0.65 means the same perceived brightness for both
oklch(0.65 0.18 90) ← warm yellow
oklch(0.65 0.18 250) ← cool blue, same lightness
Pixel art palette example
A 5-color OKLCH palette with predictable lightness steps. Each step is deliberate — no guessing.
Deep Shadow
L:18%
C:12
Dark Midtone
L:42%
C:22
Base
L:65%
C:20
Light Highlight
L:82%
C:14
Accent
L:60%
C:22
Lightness progression: 18% → 42% → 65% → 82%. Even steps. Clean shading.
The three controls that matter
- L — Lightness (0–1)
- Controls how bright a color appears to the human eye. Step from 0.15 (shadow) to 0.85 (highlight) in even increments for clean shading. This is the most important axis for pixel art.
- C — Chroma (0–0.37+)
- Controls color saturation. Low C (≈0.05) gives neutral grays. High C (≈0.2+) gives vibrant hues. For pixel art, shadows typically use lower chroma than highlights — it matches how light works physically.
- H — Hue (0–360°)
- The color wheel direction. Shifting hue slightly toward warm (orange/yellow) as you increase L creates the "fantasy lighting" look popular in game palettes.
Try it in the Studio
Generate OKLCH palettes and see the Lightness Ladder in real time.
Open Pixel Palette Studio