Working with HSL in CSS

30 comments so far | Add yours

RGB can be a real pain to work with. It’s hardware-oriented, non-intuitive and even after 10 years of coding RGB combinations for the web, I still can’t get the colors right without an external reference application. If a client calls and tells me he prefers the blue color to be “slightly less saturated” or “just a bit darker”, I always open up photoshop, type in my previous hex value, drag the pointer to a new color that fits, copy the new hex value I get and finally insert it into my style sheet. Coding colors by hand shouldn’t be that hard. Fortunately, CSS3 offers support for the HSL color space that is much easier to work with as a human.

HSL to RGB Converter

CSS2 and RGB

RGB The RGB color system is an additive model in which red, green, and blue are combined in various ways to reproduce other colors. The RGB system was formally introduced in HTML3.2 and CSS1, but was used in HTML versions before that as well.

CSS2 has five ways of interpreting RGB colors:

using a full hex combination: #FF0000
using a shorthand hex combination: #F00 (equals #FF0000)
using a comma-separated list of three numerical integer values: rgb(255, 0, 0)
using a comma-separated list of three numerical percentage values: rgb(100%, 0%, 0%)
using a color keyword (sometimes referred as named color), f ex red or maroon

The shorthand hex notation is arguably most popular since it’s shorter and possibly easier to remember. It is worth noting that the so called web safe color palette persists of 216 combinations using the shorthand hex combination in steps of three, f ex #000 #333 #99C #F93 etc. Calling it “web safe” can be confusing though, since it’s origin is from the old days of limited video hardware that had a smaller range of 216 RGB colors. “Screen safe” might be a more appropriate definition. However, almost every display uses 24-bit RGB and 16.7 million RGB colors these days, and therefore it is probably “web safe” to use any RGB combination from the full spectra today.

HTML4 officially supports 16 named colors, but it has been a fact over the last few years that almost all major browsers supports 140 named colors.

The CSS3 Color Model

RGB CSS3 supports a wider range of color definitions and the most important new feature is HSL support. The HSL color model stands for Hue, Saturation and Lightness / Intensity and is a non-linear deformation of the RGB colour system. It does not include a wider or more limited range of colors, it is simply a more human way to code colors than RGB ever was. The Hue is defined using an angular integer ranging from 0 to 360 degrees. This represent a base color from the HSL cone ranging from red (0°) to green (120°) to blue (240°) and then back to red. Saturation and lightness is defined using percentages from 0 - 100% and complements the hue to create the full color. So for example, if I have a bright blue base color like this:

hsl(240, 100%, 50%);

I can simply adjust the two percentages to make it less or more saturated/darkened.

In my humble opinion, HSL is a lot easier to use than RGB and I’m quite surprised that CSS hasn’t been recognizing this before. Basically all graphic software are using HSL or the similar HSV and its fundamental simplicity makes it much more sensible for a human to understand and adapt. Just pick a color using the wheel, then adjust it’s subtleness, instead of crazy hex values and additive integers.

Here is a simple reference list for HSL values to create basic colors, with a 60 degrees interval. Memorize this and you can produce almost any color just by adjusting the numbers slightly:

0 - red
60 - yellow
120 - green
180 - turquoise
240 - blue
300 - pink
360 - red

In addition to HSL, CSS3 also introduces rgba and hsla. It is basically the same as rgb and hsl, except that it also includes a fourth integer for opacity (or alpha) ranging from 0 to 1.

Browser support

Unfortunately, HSL belongs to the future for most major browsers. But the good news is that most modern browsers that support standards are adapting it in their latest versions. Here is a table containing most modern browsers and their color model support:

	rgb	rgba	hsl	hsla
IE 6	yes	no	no	no
IE 7	yes	no	no	no
Firefox 2	yes	no	yes	no
Firefox 3 alpha	yes	yes	yes	yes
Safari 2	yes	yes	no	no
Safari 3 beta	yes	yes	yes	yes
Opera 9.2	yes	no	no	no

Conclusion

As you can see, there is not much support for HSL today. But IE 8 is probably coming already in late 2007 (rumors) and we are looking at opera 9.5 builds very soon. Opera 9.5 has will have a wide range of CSS 3 support, and hopefully they will also include the new color models. Internet Explorer is always problematic, but since version 7 was such a great improvement from version 6, we can all hope that version 8 will have an even wider CSS3 support. If you like the idea of using HSL already today, I would recommend to do it, but also have a regular RGB fallback.

HSL to RGB Converter

I have created a small converter where you can easily convert HSL values into supported rgb() CSS rules. It is based on a small PHP class I wrote to automatically convert hsl() rules into rgb() in an entire CSS file. You can view the source code for this class if you’d like to include it in your style sheet. Please note that I am not a regular PHP programmer, so the class programming could probably be better. You’ll get the point anyway.

Links:

30 Responses so far. Add yours.

At 9:50 pm on August 1st, 2007 , James wrote:

IE8? Yeah right. At the rate Microsoft is going they’ll probably be ready to support HSL by IE15. Fingers crossed!!

At 11:39 am on May 16th, 2008 , Vitaly wrote:

I was searching php-source code for hsl to rgb algorythm very long time. Thanks so much.

At 10:50 pm on May 24th, 2009 , Paul Brennan wrote:

Thank you for this tool! I’m trying to use HSL to manipulate H and S values so as to reduced visual stress in web docs (http://hamiltonbrennans.ca/visual_stress/). The problem I’m having is that luminance is not the same as L and is wildly inconsistent as H and S change. I wonder if there’s a way to constrain HSL values so luminance is more consistent.

Paul

27 Trackbacks & Pings:

Trackback at 11:51 pm on July 30th, 2007 by University Update - T-Pain - Working with HSL in CSS:

[…] Efron Contact the Webmaster Link to Article t-pain Working with HSL in CSS » Posted at David’s kitchen on Monday, July 30, […]

Trackback at 4:45 pm on August 2nd, 2007 by Criterion » Archivo del weblog » Resumen no-vacacional Agosto 2007:

[…] The CSS3 Color Model [en]. Interesante lectura. Cuando CSS3 llegue, la cosa promete estar calentita. (Vía [en]). […]

Trackback at 1:33 am on August 3rd, 2007 by Minimology · Digital Playground of Chris Garrett:

[…] Working with HSL in CSS […]

Trackback at 10:06 pm on August 3rd, 2007 by Modelo HSL para CSS:

[…] que se comenta en David’s Kitchen es que trabajar con RGB, resulta complicado. Sin embargo, yo creo que es más complicado (quizá […]

Trackback at 2:33 pm on February 21st, 2008 by Hardware And Home Improvement:

Home Improvement is Great If You Know How to Finance It…

With housing prices at an all time high, homeowners who have outgrown their existing home or feel that it no longer meets their needs have a dilemma. It would be great to move to a larger house, but the prices of larger houses are higher than ever. Wha…

Trackback at 8:18 pm on April 8th, 2008 by Secured Home Loans for UK Homeowners:

Secured Home Loans for UK Homeowners…

…contains a list of good sites that offer or discuss secured loan - normally referred to as home loans…

Trackback at 10:31 am on July 25th, 2008 by xeophin.tapestry » Blog Archive » links for 2008-07-25:

[…] Working with HSL in CSS | David’s kitchen (tags: CSS colour HSL RGB conversion lang:en php webdev) […]

Trackback at 1:25 am on October 28th, 2008 by Stefano’s Linotype » Blog Archive » Why Programmers Suck at CSS Design:

[…] not many browsers support HSL directly, but if you’re developing with Firefox 3 (which supports it), you can safely use HSL instead […]

Trackback at 3:54 am on November 5th, 2008 by Secured Loans:

Secured Loans…

Once an unadorned chore that intended comparing the permanent preassemble figure mortgages of a dozen or so officers, the mortgage explore now existence is more like discovery your way through a maze. There are dozens of trust natures, hundreds of trus…

Trackback at 11:00 am on March 8th, 2009 by Baby-Parenting.com:

Baby name meaning and origin for Davida…

Description for the baby name Davida, the origins of the name and its meaning…

Trackback at 4:38 am on May 6th, 2009 by Choosing a Monochromatic Color Palette in Photoshop / Chris Griffin:

[…] Working with HSL in CSS HSV, HSL, and HSI, are other color spaces that use a very similar representation, but for the sake of this tutorial we’ll stick to HSB because that’s what Photoshop uses [↩] […]

Trackback at 11:29 pm on May 21st, 2009 by CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe: