Hex, rgb or hsl?
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.
In CSS, use hex if you’re used with hex otherwise use rgb (hex is rgb but in a more compact format: #ababab = rgb(ab,ab,ab) or rgb(171,171,171). Older browsers, IE5
, doesn’t support rgb, and that’s why hex has been kept alive (and some like that format more).
hsl is a different game. It’s developed to mimic the way we humans thinks of colors (or the human vision). rgb is how computers thinks of colors
Just like CMYK is the way printers thinks of colors…
Note that using HSL is not a very good way to calculate how close two colors are to each other, nor to interpolate between two colors. (RGB is not good for this either). If you want to do “closeness” calculations or interpolations with colors, you probably want to use a so called perceptually uniform color space, where perceptual/visual difference in color better corresponds to the “physical/ordinary distance” between the colors in the color space. (An example: http://en.wikipedia.org/wiki/CIELAB)
Basically it’s all the same, just the representation:
RGB: You define how much Red / Green / Blue you want to have in decimal values between 0 and 255
Hex: You define how much Red / Green / Blue you want to have in hexadecimal values between 00 and FF
HSL: You define a base color, the saturation and lightness. This is calculated to an RGB value with a simple formula. So you can do exactly the same things as with RGB, but it is easier to understand with a human brain. That’s what the quoted text notes as “designer friendly”