Why should you avoid RBG and HSL color spaces?

RGB color space is undoubtedly the most used color model to display a specific color from the monitor. It is directly related to the 3 LEDs showing a color the human eye can perceive with the additive mixing. Easy to pick a random color but frankly terrible to create darker or lighter declination of a color.

HSL color space is less used, yet obtaining a darker or lighter variant of color is more effortless; a color can be darkish or lightish by adjusting the lightness axis.

What are these models problematic? The Human eye cannot perceive the whole white light gamut, just a tiny portion. Both RGB and HSL operate beyond their perception. Every monitor works with a specific technology to make every color perceivable (sRGB, P3, or D65) and avoid getting "dead pixels". Nevertheless, the monitor uses its calibration tools, and the results may differ from one monitor to another.

Contrast is one of the levers to guarantee an accessible User Interface. If the monitor calibrates a variety of colors beyond its scope, enough contrast will not be ensured. It may be worse: a weak contrast between an alert text and the background, leaving the user confused…

In addition, creating a color system using the HSL might occur a color scale with brutal stops and oversaturated shades.

Several alternatives and less common color spaces keep the color within a specific gamut and ensure the correct contrast of the information. LCH, OKLCH, CIELAB, OKLAB, HSLuv, and CIELuv are designed to display every color the human eye can perceive without any calibration (except if you target the P3 on a sRBG monitor).

This article compares LCH and HSL color model usage: LCH is the best color space for UI.