Comparing Hex, RGB and HSL Colour Systems for Web Design
Learn the differences between Hex, RGB and HSL colour formats and why relying on HSL lightness can lead to poor accessibility in digital user interfaces.
Hex and RGB are essentially the same data in different outfits. An RGB value uses three numbers ranging from zero to two hundred and fifty five. A Hex code simply represents those same numbers using base sixteen. Each channel is allocated exactly two characters. When you look at a six character string, you are viewing red, green, and blue segments of two digits each. It is a compact method for storing information without the need to write three separate integers.
HSL takes these components and rearranges them into hue, saturation, and lightness. Hue is measured as a degree on a colour wheel from zero to three hundred and sixty. Saturation and lightness are expressed as percentages from zero to one hundred. This shift in perspective makes it far easier for you to build a palette. If you wish to create a lighter version of the same blue, you simply increase the lightness percentage. You avoid the tedious process of guessing which combination of red, green, and blue will maintain the correct tone while increasing brightness.
The Perceptual Gap
There is a fundamental flaw in these systems. They are mathematical descriptions of light intensity rather than biological ones. They do not account for how the human eye perceives brightness. This is where you encounter a common frustration during the design process. You might pick two different colours and assign them both a lightness value of fifty per cent. On paper, they are identical in their lightness. In reality, one will look significantly brighter than the other.
Pure blue and pure yellow illustrate this well. The human eye is far more sensitive to green and yellow light than it is to blue. A digital colour system treats these components as equal parts of a whole, but your brain does not agree. This means that relying on HSL lightness for accessibility is an exercise in futility. You can create a high contrast ratio according to the numbers while creating a low contrast ratio for the human eye. It is a curious gap where the mathematics of the screen disagree with the biology of the retina.
Solving for Contrast
To avoid this, you must stop trusting the lightness value and instead use contrast ratios. A contrast ratio measures the difference in perceived luminance between two colours. This measurement ignores the simple percentage found in HSL and instead uses a formula that weights the channels differently. It is expressed as a proportion, such as four point five to one or seven to one. This number tells you if your text is legible against its background regardless of what the RGB values claim.
If you are building an interface for others, you should check these ratios against established standards like those from the World Wide Web Consortium. These guidelines suggest specific minimums for normal and large text to ensure readability. If your contrast ratio falls below the threshold, you must adjust the lightness of the foreground or background until the resulting number is sufficient.
You can use tools that calculate this luminance automatically. Instead of guessing based on a colour wheel, you rely on a formula that mimics human vision by giving green the most weight and blue the least. This ensures your interface remains usable for people with visual impairments or those trying to read a screen in direct sunlight. It is the only way to guarantee that your colours work in the physical world rather than just in the code.
Try it: Colour picker and converter
Sources
Every link below is checked before this page is published.