Why does Huetone use the LCH color space for color palettes?

Updated

Huetone uses LCH because it is a perceptually uniform color space: equal numeric changes in lightness, chroma, and hue correspond to roughly equal visual changes. That makes palettes predictable and helps with accessibility. If you have ever built a scale in HSL and watched yellow look far brighter than blue at the same "lightness," LCH is the fix. The trade-off is that LCH values are less familiar than hex codes and need conversion before use in most design tools.

The problem with HSL and RGB for palettes

HSL and RGB are device-oriented, not perception-oriented. Their numbers describe how to mix light, not how a person will see the result.

  • In HSL, hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share the same lightness value, yet yellow appears dramatically brighter.
  • In RGB, adding equal amounts to each channel does not produce an even step in perceived brightness.

The practical consequence: a "50 to 900" scale built by stepping HSL lightness produces uneven jumps. Some steps look nearly identical; others look like a different color entirely. You end up hand-tuning every swatch, and the scale breaks the moment you change the base hue.

What LCH changes

LCH stands for Lightness, Chroma, Hue. It is derived from CIELAB, a color space designed so that distances between colors match perceived differences.

Component Meaning Why it matters for palettes
L (Lightness) Perceived brightness, 0 to 100 A fixed L step looks like an even step to the eye
C (Chroma) Colorfulness, from gray to vivid Lets you control saturation independently of brightness
H (Hue) Angle on the color wheel Keeps hue stable while you vary L and C

Because lightness is perceptual, you can hold L constant across several hues and get colors that feel equally bright. That is the property HSL lacks.

How this produces consistent scales

A predictable scale usually fixes hue, then moves lightness in even steps, and adjusts chroma so the ends do not clip.

For example, to build a 10-step blue scale:

  1. Pick a hue angle for blue and keep it fixed.
  2. Choose a lightness range, such as L 95 down to L 20.
  3. Step L evenly across the range.
  4. Reduce chroma near the light and dark ends, because very light and very dark colors cannot hold high chroma without clipping.

The result is a ramp where each step reads as "one step darker," not "a slightly different color." Change the hue angle and the same structure holds, which is what makes the approach reusable across a whole design system.

The accessibility connection

Contrast ratios are computed from relative luminance, which tracks perceived brightness. Since LCH lightness is perceptual, it correlates more directly with how contrast will read than HSL lightness does.

That means when you space steps by L, you have a better starting point for checking text-on-background pairs against contrast requirements. It does not replace a contrast check — you still need to verify actual ratios — but it removes the guesswork of "these two swatches look different enough, right?"

When LCH is the right choice, and when it is not

Use LCH when:

  • You are generating a systematic scale that must stay consistent across many hues.
  • You want lightness steps that look even without manual correction.
  • You are building tokens meant to be reused and re-themed.

Be cautious when:

  • Your target tooling or handoff format expects hex or RGB only — you will need conversion, and out-of-gamut colors must be mapped back into sRGB.
  • You need exact brand colors, which are usually specified in a fixed space and should not be re-derived.

Practical takeaway

LCH is not a stylistic preference; it is a structural one. It makes the numbers match what people see, which is exactly what a palette needs to be predictable and to support accessible contrast. If your scales keep needing manual fixes, the color space is usually the reason.