Why HSL is Broken: The Case for HCL
If you have ever tried to pick a "light" color palette using HSL, you noticed something annoying: Yellow looks way lighter than Blue, even at the same "Lightness" value. Here is why purely mathematical color spaces fail UI design.
The Lie of "Lightness"
In standard color spaces like RGB and HSL, colors are treated as points in a cylinder or cube. The Lightness parameter in HSL is simply a math equation: (Max(RGB) + Min(RGB)) / 2.
The problem? Your eyes didn't read that math textbook. The human eye drastically over-indexes on Green and Red light, while struggling to see Blue.
Both have 50% Lightness in HSL. Yet Yellow is blindingly bright, and Blue is dark. This breaks contrast ratios.
In HCL (L*C*h), Lightness (L) measures perceived brightness. Colors with the same L value act the same in UI.
What is HCL?
HCL stands for Hue, Chroma, Luminance. It is a polar transformation of the CIELAB color space, designed to model human vision.
- Hue: The color family (0-360), similar to HSL.
- Chroma: The colorfulness or intensity. Unlike 'Saturation', Chroma isn't relative to white/black. It is absolute.
- Luminance: The perceptual brightness. This matches WCAG contrast requirements perfectly.
Why Dopely Uses HCL
When you ask Dopely to "Generate a Dark Mode Palette", we do not just invert the colors. We rotate the Hue in HCL space while maintaining strict Luminance constraints.
This ensures that:
- Contrast is Guaranteed: A text color with L=90 will always pass WCAG AA against a background of L=40, regardless of the Hue.
- Gradients are Smooth: Interpolating in RGB creates "grey dead zones". Interpolating in HCL creates vibrant, rich transitions.
See the difference
Use our free tools to inspect these values yourself.