Playing Around with CSS3 Colors

Traditionally, people using colors in CSS have dealt with either the hexadecimal format, which looks like this: #ABCDEF or the rgb format, which looks like this: rgb(171,205,239).

CSS3 comes with a few new ways of manipulating colors, such as using HSL (Hue, Saturation, Light) and opacity/alpha-channels. Unfortunately, only Firefox 3+, Opera 10+, Chrome 1.0+ and Safari 3+ and a few derivatives fully support these at the moment, but we make do with what we can, seeing as Internet Explorer doesn’t even start supporting CSS3 elements until Internet Explorer 9.

Opacity

This one is an old one that, surprisingly, is available in current versions of IE, albeit in a more complicated way.

Opacity turns the entire CSS object transparent, and the opacity of any child element is scaled appropriately. The official CSS3 statement is as follows:

    opacity: [number between 0-1];

So a setting of opacity: 0.5; would make the object 50% transparent. Although newer browsers support this head-on, older browsers require some custom code, as well as Internet Explorer.

So for older Firefox versions, we use the -moz- prefix, and for older Safari/Chrome versions, we use the -webkit- prefix. For really oldschool versions of Safari that used KHTML instead of Webkit, we use -khtml-. So if we really wanted to support everyone, our code might look something like this:

    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -khtml-opacity: 0.5;

But wait! What about Internet Explorer? Well, Internet Explorer doesn’t actually support this outright, but rather through a proprietary Microsoft filter. The traditional way of doing it was short and sweet:

    filter:alpha(opacity=50);

Note that we now use a scale of 0-100 for Internet Explorer, not 0-1 as we do for other browsers. Internet Explorer 8 provides a new beast to have to deal with. Don’t try to memorize this one like you would the other ones, this is a long one:

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Of course, if you wanted to support older versions of Internet Explorer, you would have to use the shorter version as well, meaning you would need a total of six CSS statements if you wanted to support a large range of browsers.

RGBa

Let’s next talk about RGBa. RGBa is an extension of the original RGB, but it takes a fourth argument: the alpha channel. The alpha channel argument takes a number between 0 and 1, just like opacity did. The main advantage of using RGBa over opacity is that when using RGBa, the transparency isn’t applied to child elements. What this means is that you can have a completely solid object inside a transparent object, whereas when you use opacity, child elements of transparent objects are also transparent.

Using RGBa couldn’t be simpler:

    div {
        background: rgb(255,0,0); /* The old one */
        background: rgba(255,0,0,0.5); /* The new one */
    }

As you can see, we have gone from a solid red to a half-transparent red by adding a letter and another argument. RGBa is supported in Firefox 3+, Opera 10+, Safari 3+, and Chrome 1.0+, but not Internet Explorer. CSS-Tricks provides a proprietary filter workaround to make this work in Internet Explorer:

    <!--[if IE]>
        <style type="text/css">
            .color-block {
                background:transparent;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
                zoom: 1;
            }
        >/style>
    <![endif]-->

HSL

HSL is a pretty intuitive way of choosing colors. If you need “just a little darker” or “just a little brighter”, playing around with hexadecimal combinations takes a bit of time. Luckily, with HSL, it’s just a simple number change.

HSL stands for Hue, Saturation, Lightness. Hue is the color in a color wheel (see picture above). Color choice is done using degrees, with 0º being Red, 120º being Green, and 240º being Blue. Of course, you have the different color combinations as in-betweens, so you sort of have this going on:

  • 0º – Red
  • 60º – Yellow
  • 120º – Green
  • 180º – Cyan
  • 240º – Blue
  • 300º – Magenta

Saturation is how much of the color we are using. 0% means a greyscale, since we aren’t using any of the color, whereas 100% means the chosen color in full.

Lightness is basically how bright the color is. A lower setting means darker, and a higher setting means lighter, with 0% and 100% meaning black and white respectively.

So an object with a background of an orange-ish color at 50% saturation and 80% lightness would look like this:

    div {
        background: hsl(30, 50%, 80%);
    }

Making this a bit lighter or a bit darker would merely entail changing the last argument.

HSLA

HSLA would, of course, be just an extension of HSL that, like RGBa, adds a fourth argument of opacity. Usage of HSLA is just as easy as that of RGBa: just stick the extra argument in there:

    div {
        background: hsla(30, 50%, 80%, 0.5);
    }

The last example is the previously used orange-ish color, but at 50% opacity.

Conclusion

Of course, HSL and HSLA are only supported in newer versions of Firefox, Opera, Safari, and Chrome. There are no proprietary workarounds for Internet Explorer for these two as there are for Opacity and RGBa. However, that should never stop you from trying them out and experimenting with them.

See you next time!

Leave a Reply

Playing Around with CSS3 Colors