OKLCH for Pixel Art

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.

Pixel art palette example

A 5-color OKLCH palette with predictable lightness steps. Each step is deliberate — no guessing.

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.

Starting from text: AI palette generation

When creating sprites or environments, you often have a scene in mind (such as "deep sea horror", "autumn forest", or "неоновый киберпанк") before picking exact HEX values.

In the OKLCH Studio, you can describe your scene in English or Russian. A local in-browser model turns the prompt into a starting OKLCH palette with balanced lightness steps that you can edit and export.