Stupid Question 84: What is the difference between hex, rgb and hsl color declarations in CSS?

[To celebrate my first year of programming I will ask a ‘stupid’ questions daily on my blog for a year, to make sure I learn at least 365 new things during my second year as a developer]

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.

Comments

Leave a comment below, or by email.

Henrik

11/18/2012 3:56:22 PM

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...

Jarle Stabell

11/19/2012 2:59:56 AM

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)

Hardcoded

11/19/2012 9:45:22 AM

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"

MikeT

9/22/2015 7:33:23 AM

This is a very good question but the the description is very poor, RGB defines a colour by its mix of primary colours IE Red Green and Blue, this is very useful as this is exactly how monitors work, however humans don't work this way
HSL on the other hand is completely different you have Hue which is basically how far into a rainbow you are Saturation, how vivid the colour is and lightness how much black or white they contain., this means that if you want to shift a could from red to pink instead of leaving red alone and increasing both green and blue. which to any none techie doesn't make much sense to the HSL model where you leave the colour on red then just add more white to lighten it. which makes sense to everyone, though usually requires a GUI tool to do the actual numbers. there is then a very simple mathematical formula to convert this to RGB so that it can be piped to the screen

Last modified on 2012-11-16