Summary:

RGB is known to be limited.

HSL provides a much more explicit way to describe the color:

• a position on a color wheel: hue (0-360, described as turn or degrees)
• how much of this color: saturation
• lightness

Looks better !

HWB: Hue, hiteness and Blackness. It is useful for creating monochrome color palette.

LAB is recommended if you want a color to look the same on-screen as, say, printed on a t-shirt.
It uses three axes: lightness, a-axis (green to red) and b-axis (blue to yellow)

LCH is much more interesting for web development though. it stands for Lightness, Chroma and Hue.

• lightness: a pourcentage that can exceeds 100.
• hue : is working the same as in HSL
• Chroma : respresents the amount of color. It is similar to the saturation. In the browsers, there is often an upper bound.

More about it: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

A comparison between LCH and HSL : https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4253d9b2-46d7-4b10-9e1a-b5f3ac6cea1c/5-modern-css-color.png

Tip: Holding down SHIFT and clicking the color swatch in the inspector in Chrome and Firefox dev tools will toggle the color value between hex, RGB and HSL!

Thanks for this cool tip !

Check the Level 5 Color specification for more about incoming color possibilities.