HSL vs HCL Color Models: What's the Difference?

What Is a Color Model?

A color model is a mathematical system for describing colors as numbers. Different color models are optimised for different purposes: RGB is optimised for how screens emit light; CMYK for how ink absorbs it; HSL for how designers intuitively think about colors; HCL for how humans actually perceive differences between colors.

The choice of color model is not just a technical detail — it determines whether colors in a palette look consistent to the human eye, whether gradients look smooth, and whether accessibility calculations (like contrast ratios) are meaningful.

HSL: Hue, Saturation, Lightness

HSL was developed in the 1970s as a more intuitive alternative to RGB for computer graphics. It represents a color as three values:

• Hue (H): An angle from 0° to 360° around a color wheel. Red is near 0°, green near 120°, blue near 240°.
• Saturation (S): 0–100%, where 0% is grey (no color) and 100% is the most vivid version of the hue.
• Lightness (L): 0–100%, where 0% is black and 100% is white, with the "pure" color at 50%.

HSL is useful for designers because it separates the dimensions a designer might want to change independently: you can shift hue without changing how light or vivid a color is, or you can desaturate without changing hue. This makes it far more intuitive than RGB for choosing and adjusting colors.

The Problem with HSL

HSL treats all hues as if they were equally bright at the same lightness value — but they are not. A yellow at HSL lightness 50% appears far brighter to the human eye than a blue at the same lightness. This is because human photoreceptors are not equally sensitive to all wavelengths: the eye is most sensitive to green and yellow, less so to blue and red.

The consequence: if you create a palette of colors with equal HSL lightness, they will not look equally light. A yellow and a blue both at L=50 will look like different brightness colors. For a design that needs perceptual consistency — a data visualisation, an accessible UI, a color scale — HSL produces misleading results.

HCL: Hue, Chroma, Luminance

HCL (also called LCH, depending on axis ordering) is a color model derived from the CIELAB color space, which was developed by the International Commission on Illumination (CIE) specifically to be perceptually uniform — meaning equal numerical distances in the model correspond to equal perceived differences in color.

HCL uses three values:

• Luminance (L): Perceptual brightness from 0 (black) to 100 (white). Unlike HSL lightness, HCL luminance accounts for the eye's unequal sensitivity to different wavelengths.
• Chroma (C): Colorfulness/vividness. Similar to saturation, but with the critical difference that different hues reach different maximum chroma values — there is no artificial ceiling of 100%.
• Hue (H): Angle from 0° to 360°, with different angle positions than HSL (HCL's red is at about 40°, yellow at about 85°, green at about 130°, blue at about 270°).

Perceptual Uniformity: The Key Difference

In HCL, a yellow and a blue with the same luminance value (say, L=70) will actually appear equally bright to the human eye — because the luminance value was calculated to account for wavelength sensitivity. This is not true in HSL.

The practical implications:

• Color palettes designed in HCL with consistent luminance will look perceptually balanced
• Gradients from one HCL color to another will appear to change at a consistent visual rate
• Sequential color scales (used in data visualisation for encoding numeric values) will correctly convey magnitude — a color twice as "far" in the scale will look twice as different to the viewer

When to Use Each

Oklch: The Modern Successor

A more recent development is the Oklch color space, introduced around 2020, which improves on HCL's perceptual uniformity especially for blue hues (where CIELAB/HCL shows some inconsistencies). Oklch is now supported natively in CSS via the oklch() function (as of CSS Color Level 4).

Oklch represents a significant step forward in CSS color specification because it is the first CSS color function designed around perceptual uniformity rather than around how displays emit light. Designers can now create perceptually consistent palettes directly in CSS without conversion.

The RGB Underneath Everything

Regardless of which color model a designer uses to choose or specify colors, the display ultimately renders colors in RGB — specific intensities of red, green, and blue light from each pixel. HSL, HCL, Oklch, and every other color model are representations that convert to and from RGB at the point of rendering. The choice of color model is a choice about how to think about and specify colors — the physics of the display remains the same.

Generate colors →