CSS3 Color Models and Bookmarklets

Nov 1, 2010
Episode 42
In this week's episode, Nick shows you how to use CSS3 color models. Then, Jim teaches you how to make your very own bookmarklets using JavaScript.
Spotlight

Thanks to those who make Doctype possible!

CSS3 Color Models

RGBA

First up is the RGBA color model. This is a good one to start with, because in last week’s episode, we learned about RGB. RGBA works exactly the same, with the exception of one additional value at the end. The “A” stands for alpha, or alpha channel. This is a value between 1 and 0 that is a measure of how opaque or transparent a color is. A value of 1 is completely opaque.

color: rgba(255, 153, 0, 1);

But if we set the alpha to a value between 1 and 0, such as 0.6, it will drop our alpha channel down to 60% opacity.

color: rgba(255, 153, 0, 0.6);

You should take advantage of RGBA when you want elements to appear a bit more subtle or blend into their background a bit more.

HSL

Next up is HSL, which is an acronym that stands for hue, saturation, and lightness. This is very different from the color models we’ve encountered so far, because even hex is based on RGB.

hsl(36, 100%, 50%)

The first value, hue, can be a number between 0 and 360. If that sounds like the degrees in a circle to you, you’re on the right track. It’s a degree value that represents a point along a rainbow color wheel. 0 is at the top of the color wheel, and represents the color red. We’re at the 36th degree in this case which is just to the right of red, so we get an orange color. The second value, which represents saturation, is a percentage. Saturation is a measure of how vibrant a color appears. 100% is the maximum. However, if we were to turn down the saturation to 50%, we would start to get a brownish color. If we set the saturation to 0%, the element becomes completely grey, and doesn’t have any color at all. The last value is lightness, which is also a percentage. If you turn this up to 100%, you’re color will become pure white, and if you turn it down to 0%, it will become completely black. Therefore, if you leave it at about 50%, your colors will appear saturated and vibrant. However, if you do want something that’s tinted a bit darker or maybe looks washed out, you can adjust this value as necessary.

HSLA

Just like RGB and RGBA, HSL also comes in the HSLA variety if you need to use an alpha channel. The last value is, once again, a number between 0 and 1. Here we’ve turned down the opacity to 60%.

hsla(36, 100%, 50%, 0.6)
Browser Support

There is one more color model, called CMYK, but browser support for that particular one is so poor at this point it’s not even worth talking about yet.

Everything above will work in most major browsers like Safari, Opera, Chrome, and Firefox. Internet Explorer doesn’t support these yet, but support will be added in the upcoming version 9.

Bookmarklets

Bookmarklets are special URLs that execute JavaScript on a page. That URL can then be bookmarked and executed on any page.

The urls take the form of javascript: followed by some JavaScript code:

javascript:alert('Hello')

This can be executed in the browser’s location bar, or added to the href of an a tag

<a href="javascript:alert('Hello')">
  Say Hello
</a>

The code for including an external JS file onto the page looks like this

javascript:(function() { 
  var s=document.createElement("script");
  s.src="http://your.site/script.js";
  document.body.appendChild(s)
})();

And when compressed into an a tag, looks like this:

<a href='javascript:(function(){var s=document.createElement("script");s.src="http://your.site/script.js";document.body.appendChild(s)})();'>
  Bookmarklet Title
</a>

"http://your.site/script.js" Can be replaced with the location of your JS file