HSLuv colour space

What is HSLuv?

HSLuv is a colour space based on the CIELUV colour space. The HSLuv colour space aims to provide perceptually uniform and user-friendly colour representation. It combines hue, saturation, and lightness, allowing for intuitive colour manipulation.

For more information read Perceptually Uniform Colour Spaces, Designing Accessible Design Systems, and HSLuv vs. HSL.

Benefits of HSLuv

HSLuv is designed to be perceptually uniform, meaning that a uniform change in colour values corresponds to a consistent and similar perceived difference in colour. This is in contrast to RGB and HSL, which do not have inherent perceptual uniformity.

HSLuv provides a more visually consistent representation of colours. Traditional colour spaces like RGB often have nonlinear and nonuniform colour transitions, which can lead to visual inconsistencies when manipulating colours. HSLuv offers smoother and more predictable colour gradients.

HSLuv incorporates familiar concepts like hue, saturation, and lightness, making it easier for users to understand and manipulate colours. RGB, on the other hand, requires considering three independent colour channels, while HSL is known to have irregularities in colour relationships.

HSLuv can be easily converted to and from RGB values, allowing for seamless integration with existing colour systems. This makes it convenient for applications like web development, where RGB is commonly used.

HSLuv compared to HSL

Resource HSLuv vs. HSL by Alexei Boronine

The colours in the image below have a consistent saturation (80%) and lightness (60%), the only difference is the hue value. The number inside each colour is the colour contrast ratio with pure white as the foreground colour. The purpose of the image is to visually convey the concept of perceptual uniformity in the HSLuv colour space.

The colours in the image below have a consistent saturation (80%), the only difference is the hue and lightness values. In each scale (or row) the hue is consistent. Along the row, from left to right, the lightness value is increasing in 10% intervals, from 10% to 80%. The number inside each colour is the colour contrast ratio with pure white as the foreground colour. The purpose of the image below is to visually convey the concept of perceptual uniformity in the HSLuv colour space.