On Switching from HEX & RGB to HSL
▻https://sarasoueidan.com/blog/hex-rgb-to-hsl
When you define a #color in the #HSL format, you pick a color in the form of an angle between 0 and 360. Setting the saturation to 100% and the lightness to 50% you get the purest form of that color. Tweaking the color from there on becomes very intuitive.
Using the color wheel to pick colors has many benefits. One of the main advantages of HSL is that creating color harmonies becomes a piece of cake.
Complementary colors are located across from one another on the wheel. So if you start with a color and you want to get its complimentary one, all you need to do in #CSS is to add 180° to the value of the Hue.
There are many color harmonies (or schemes) as the image above shows. Similar to what we did above with the complimentary scheme, triadic color schemes can be created by adding (or subtracting) 120°. You can also create analogous color combinations with 30° separating the hues. You can also create monochromatic harmonies easily, with one main hue and then tweaking the lightness to get different tints and shades of that hue. The sky is the limit.
