"Iedereen" is het erover eens dat het veel praktischer is om voor kleuren de HSL notatie te gebruiken, in plaats van de hex notatie; hsl(0, 59%, 41%) is immers veel begrijpelijker dan #a52a2a!
Ik had me daar al in eind 2019 al uitgebreid in verdiept. Met als belangrijkste uitleg die van Sara Soueidan: Switching from HEX to HSL.
Ik heb destijds al een site gemaakt met gebruik van de HSL notatie. Maar toen bleek dat nou net de eigenaar van die site nog de IE6 browser gebruikte! IE6! Tsjongejonge... laat IE6 nou geen HSL kunnen renderen. Inmiddels zijn we twee jaar verder, en ook die eigenaar gebruikt nu een modernere browser. Dus ik denk dat de tijd rijp is om te stellen dat ik echt geen IE meer ga ondersteunen.
En dat ik voortaan alleen nog maar HSL ga gebruiken.
Hoe werkt het
HSL wil zeggen hue, saturation, lightness. Hue is de kleur zelf, terug te vinden op het color wheel.
Saturation is de verzadiging: 100% is geheel verzadigd, 0% is puur grijs.
Lightness mengt of zwart of wit bij de kleur. 50% is de pure kleur, bij een lager percentage wordt 't donkerder (0%=zwart), bij een hoger percentage wordt 't lichter.
Maar het wordt nog mooier: als je HSLA() gebruikt, kun je ook moeiteloos opacity toevoegen. Dat kon bij hex helemaal niet (daarvoor moest je eerst naar RGB converteren)
In de praktijk
Als voorbeeld een mooie kastanjekleur: #591F12 oftewel hsl(11, 80%, 21%).
Origineel kastanje, 11, 80%, 21%
De "pure" vorm van bruin blijkt oranje: 11, 100% 50%
Iets minder saturation, 11, 60%, 21%
Veel minder saturation, 11, 40%, 21%
Iets lichter, 11, 80%, 41%
Nog iets lichter, 11, 80%, 61%
Origineel met opacity 75%: 11, 80%, 21%, 0.75
Of opacity 50%: 11, 80%, 21%, 0.5
Oftewel: je kunt een heel kleurenschema maken gewoon op basis van de cijfertjes... De mogelijkheden zijn oneindig, met 100x100 variaties per kleur, maar het kàn, als je het wilt gebruiken 
.
Overigens zien deze kleuren er prima uit op mijn laptop, maar op mijn telefoon een stuk minder.