# Why should you avoid RBG and HSL color spaces?

[`RGB`](/sketch/glossary.md#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 that show a color the human eye can perceive through additive mixing. It's easy to pick a random color, but creating a darker or lighter shade of a color is frankly terrible.

[`HSL`](/sketch/glossary.md#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 entire white light gamut; it can only perceive a tiny portion. Both [`RGB`](/sketch/glossary.md#rgb) and [`HSL`](/sketch/glossary.md#hsl) operate beyond their perception. Every monitor works with a specific technology to make every color perceivable ([`sRGB`](/sketch/glossary.md#srgb), [`P3`](/sketch/glossary.md#p3), or [`D65`](/sketch/glossary.md#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`](/sketch/glossary.md#hsl) might result in a color scale with brutal stops and oversaturated shades/tints.

Several alternatives and less common color spaces keep the color within a specific gamut and ensure the correct contrast of the information. [`LCH`](/sketch/glossary.md#lch), [`OKLCH`](/sketch/glossary.md#oklch), [`CIELAB`](/sketch/glossary.md#cielab), [`OKLAB`](/sketch/glossary.md#oklab), [`HSLuv`](/sketch/glossary.md#hsluv), and `CIELuv` are designed to display every color the human eye can perceive without any calibration (except if you target the [`P3`](/sketch/glossary.md#p3) on a [`sRBG`](/sketch/glossary.md#srgb) monitor).

This article compares [`LCH`](/sketch/glossary.md#lch) and [`HSL`](/sketch/glossary.md#hsl) color model usage: [LCH is the best color space for UI](https://atmos.style/blog/lch-color-space).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ui-color-palette.com/sketch/introduction/what-is-the-lch-model.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.