Why use HSL in your next design system?

Hex codes and rgb(a) both operate on thinking about color in terms of red, green, and blue color mixing—not terrible, very elementary school art class, could be worse, but also not great.

HSL thinks of color in terms of the color you have (the hue), how saturated it is (sliding scale of gray on one end to the brightest crayola color you can imagine), and its lightness (black on one end to white on the other). It’s a much more intuitive way of thinking about color.

Combo this with the idea of a color ramp, where you take one hue and only change its lightness or saturation levels, and you end up with a really elegant way to create those ramps, or even apply additional needs out of them, say: if you go up two steps on the color ramp, you get an accessible pairing. How neat would that be?