Now, this question has been on my mind a lot, but I have no idea why I never actually bothered looking it up. There are three ways of declaring colors in CSS, hex, rgb and hsl. And honestly I’ve never quite understood if there is any big difference. While hex and rgb have been around for a while, hsl in css is new, and as far as I know not supported in many browsers (yet). So what is the deal? What is the difference?
Hex and rgb are just two different ways of defining a color, so the syntax is the only thing that differs. In regards to performance due to the calculations, developers seem to agree that the difference is trivial. HSL stands for ‘Hue, Saturation, Lightness’ – it builds on RGB and let’s you create a model of a color that consists of not just the hue (the ‘color’), but also the saturation and lightness. This allows you for example to for example compare colors and decide how close they are to each other– and you can match colors by just keeping the hue and changing the other values. HSL seems to be designer friendly, and kind of an extension on the color declarations.