{"id":1443,"date":"2010-08-28T08:11:59","date_gmt":"2010-08-28T12:11:59","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=1443"},"modified":"2011-05-14T00:42:22","modified_gmt":"2011-05-14T04:42:22","slug":"coding-colors-easily-using-css3-hsl-notation","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2010\/08\/28\/coding-colors-easily-using-css3-hsl-notation\/","title":{"rendered":"Coding Colors Easily Using CSS3 hsl()<\/code> Notation"},"content":{"rendered":"
\n

Update: Jan 6, 2011<\/h3>\n

Check out Paul Irish’s Mother Effing HSL<\/a> for a nice color-picker you can play with to get the hang of HSL.<\/p>\n<\/div>\n

\n
\n
\"\"<\/dt>\n
\n
A remix of Wilhelm von Bezold’s Farbentafel Color Wheel<\/a>.<\/div>\n<\/dd>\n<\/dl>\n<\/div>\n

I have heard stories about “those<\/em> people”<\/strong> that see a color and can immediately calculate the RGB hex code in their head, without any tool whatsoever. Since I have never actually met one of “those<\/em> people”<\/strong>, I don’t think they really exist. However, it would<\/strong> be a nice skill to have, especially when presenting a new design to a client and they say “Perfect! But can make that box a brighter orange, and that do-hickey a less pronounced purple? And can you show us how it would look right now?<\/strong>” <\/p>\n

This seemingly impossible task of coming up with color codes off the top of your head can be done using CSS3’s hsl<\/code> color notation. HSL is a much more “human-friendly” notation than RGB<\/strong>, and with it you can code colors in your head easily without using The GIMP’s or Photoshop’s color-wheel<\/strong>.<\/p>\n

Don’t believe me? Read on and I’ll show you. You’ll never want to go back to RGB again. And even though IE 6-8 doesn’t support HSL natively, we will cover how support can be added.<\/p>\n

Notation<\/h2>\n

An HSL color code uses the following CSS3 notation:<\/p>\n

\n
#myObject {\r\n    background: hsl(120, 50%, 50%);<\/span>\r\n}\r\n<\/pre>\n<\/blockquote>\n
The first number is the hue<\/strong>, the second number is the saturation<\/strong>, and the third is the lightness<\/strong>.  These three terms are what HSL stand for.  But how does one manipulate these numbers?  Easily.<\/p>\n
Step 1: “Young Guys Can Be Messy Rascals”<\/h2>\n
\n
\n\t\t\t\tR<\/strong>ed: 360°<\/span>\n\t\t\t<\/div>\n
\n\t\t\t\tY<\/strong>ellow: 60°<\/span>\n\t\t\t<\/div>\n
\n\t\t\t\tG<\/strong>reen: 120°<\/span>\n\t\t\t<\/div>\n
\n\t\t\t\tC<\/strong>yan: 180°<\/span>\n\t\t\t<\/div>\n
\n\t\t\t\tB<\/strong>lue: 240°<\/span>\n\t\t\t<\/div>\n
\n\t\t\t\tM<\/strong>agenta: 300°<\/span>\n\t\t\t<\/div>\n
This diagram is not an image.  It was generated with HTML using CSS3 transform<\/code> functions<\/a> and hsl()<\/code> color notation, and cssSandpaper for browsers that don’t support it.<\/p>\n<\/p><\/div>\n
Memorize this sentence.<\/strong>  If you do, you will be to remember the six major colors in the HSV color wheel: Yellow, Green, Cyan, Blue, Magenta and Red.  These colors are spaced out by angles of 60 degrees.<\/strong>  If you follow the mnemonic, you should be able to remember the diagram on the left very easily.<\/p>\n
So, if you want to pick green, you would code:<\/p>\n
\n
hsl(120<\/span>, 100%, 50%)<\/pre>\n<\/blockquote>\n
(Don’t worry about the second and third parameters for now … we will get to that in a second).<\/p>\n
Blue would be:<\/p>\n
\n
hsl(240<\/span>, 100%, 50%)<\/pre>\n<\/blockquote>\n
Let’s say you wanted a color that is not on the wheel, like purple.  Purple is halfway between blue (240°) and magenta (300°) so we should pick something in between:<\/p>\n
background-color: hsl(270, 100%, 50%)<\/div>\n
Think it should be more blue?  Choose an angle closer to blue!<\/p>\n
background-color: hsl(255, 100%, 50%);<\/div>\n
Want more magenta instead?  Then choose angle closer to magenta:<\/p>\n
background-color: hsl(285, 100%, 50%);<\/div>\n
Note that you do not put use the deg<\/code> keyword link in CSS3 Transforms.  It seems a little inconsistent, but at least it’s less typing. <\/p>\n
Step 2: Choose Your Intensity<\/h2>\n
The second parameter is the colorfulness, or saturation<\/a>.  The larger the percentage, the more “colorful” this color is.  Let’s take a look at what happens when we change green’s (120°) colorfulness:<\/p>\n\n\n\n\n\n
hsl(120, 0%, 50%)<\/th>\nhsl(120, 25%, 50%)<\/th>\nhsl(120, 50%, 50%)<\/th>\nhsl(120, 75%, 50%)<\/th>\nhsl(120, 100%, 50%)<\/th>\n<\/tr>\n<\/thead>\n
<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/tr>\n<\/table>\n
The more the saturation percentage, the less “gray” it is.<\/p>\n
Step 3: Lighten it up<\/h2>\n
The final step is to lighten up the color to the right level.  That can be done with the final parameter: <\/p>\n\n\n\n\n\n
hsl(120, 50%, 0%)<\/th>\nhsl(120, 50%, 25%)<\/th>\nhsl(120, 50%, 50%)<\/th>\nhsl(120, 50%, 75%)<\/th>\nhsl(120, 50%, 100%)<\/th>\n<\/tr>\n<\/thead>\n
<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/tr>\n<\/table>\n
That’s It!<\/h2>\n
Try it when you are using color on your next project.  You’ll find using the HSL color-space is much<\/em> easier than using RGB<\/strong><\/p>\n
Browser Support<\/h2>\n
HSL is supported in almost all the major browsers: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 10+ and Explorer 9.0+.  For the browsers that don’t support it, I have updated cssSandpaper<\/a> to implement HSL with the CSS color<\/code> property<\/strong>, as well as the border<\/code>, background<\/code> family of properties (i.e. border-right<\/code>, background-color<\/code>, etc).<\/p>\n
Also supported by cssSandpaper is HSLA, which is to HSL, as RGBA is to RGB.  It contains a fourth element, the alpha channel, that is a number from 0 to 1.  To illustrate how this works, let’s say an HTML element has a grid as a background image.  How can you shade that background image so that it looks, say, more green?<\/p>\n\n\n\n\n\n
hsla(120, 50%, 50%, 0.25)<\/th>\nhsla(120, 50%, 50%, 0.5)<\/th>\nhsla(120, 50%, 50%, 0.75)<\/th>\nhsla(120, 50%, 50%, 1)<\/th>\n<\/tr>\n<\/thead>\n
<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/tr>\n<\/table>\n
The table above is not an image — it is a real example of hsla()<\/code> in action. Pretty neat, huh?  You can also use HSL and HSLA color in gradients.  The cssSandpaper<\/a> library has supported WebKit style gradients with it’s own -sand-gradient<\/code> property.  Now it supports HSLA gradients, like this 80% opaque yellow to 20% opaque blue linear gradient:<\/p>\n\n\n\n\n\n
\t-sand-gradient(linear, center top, center bottom, from(hsla(60, 100%, 50%, 0.8)), to(hsla(255, 100%, 50%, 0.2)));\n<\/th>\n<\/tr>\n<\/thead>\n
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Unfortunately, cssSandpaper only supports HSLA for background coloring only, not border or text coloring, but one would just use progressive enhancement to take care of that edge case, since what it does support, in my humble opinion, is rather cool.  Download the latest version from the link below and use HSL and HSLA color notation now!  You’ll impress your developer friends with your off-the-top-of-your-head color-coding skillz.  :-)<\/p>\n
Get the latest version of cssSandpaper from the official documentation page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
 The seemingly impossible task of coming up with color codes off the top of your head can be done easily using CSS3’s hsl<\/code> color notation.  Read how you can use this “human-friendly” and how it can work in the few browsers that don’t support it natively.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[123,9,38,122,119],"tags":[],"class_list":["post-1443","post","type-post","status-publish","format-standard","hentry","category-color","category-css","category-css3","category-hslhsla","category-polyfills"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=1443"}],"version-history":[{"count":66,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1443\/revisions"}],"predecessor-version":[{"id":3280,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1443\/revisions\/3280"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=1443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=1443"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}