Currently Browsing: Home » Playing Around with CSS3 Colors

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

Color Pencils

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 Color Wheel

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!

Tags:

This entry was posted on Monday, December 21st, 2009 at 05:00:28. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

26 Responses to “Playing Around with CSS3 Colors”

  1. Marc says:

    Amazing how you managed to write an article about CSS3 without even mentioning Opera. U__U

  2. zt says:

    that rgba fallback for ie is great :D gradient with the same semi-trasparent colors, i wouldn’t have found this out :)

  3. Patrick Lin says:

    @Marc: duly noted, edited to include Opera, which has supported these since Opera 10.

  4. dave says:

    Microsoft! Wtf can’t they produce a compliant browser? I used these for a drop down menu and they look really good in Firefox, Opera, Safari, Iceweasel, Kawehakaze (er, spelling uncertain!).
    In ie7 & 8 a real pain to make them work at all! Grrrrrr……
    Dave

  5. Kara says:

    Do I need to use decimals in RGBa? Why can’t I continue to use hexadecimal to define the color? Technically, it should not matter as the number range would be the same.

    It would not be good if I would need to use decimals as I am so used to #fafafa.

    Could you please shine some light on this one?

  1. CSS Brigit | Playing Around with CSS3 Colors
  2. Giving Elements Cool Effects Using CSS3
  3. 玩转CSS3色彩 | CSS | 前端观察
  4. Enlaces interesantes (11) | Cosas sencillas
  5. Playing Around with CSS3 Color | qface & sowmo sky
  6. 玩转CSS3色彩 « 前端开发,迷恋CSS样式之美
  7. Modern CSS Layouts, Part 2: The Essential Techniques | i know idea
  8. Modern CSS Layouts, Part 2: The Essential Techniques | Web Design Cool
  9. Modern CSS Layouts, Part 2: The Essential Techniques | webdunyam.net
  10. Modern CSS Layouts, Part 2: The Essential Techniques « 完美WP
  11. Modern CSS Layouts, Part 2: The Essential Techniques | CMS Code
  12. Modern CSS Layouts, Part 2: The Essential Techniques | Creative Man Studio
  13. Modern CSS Layouts, Part 2: The Essential Techniques | Designer Net
  14. Modern CSS Layouts, Part 2: The Essential Techniques « Defonic International Solutions
  15. Modern CSS Layouts, Part 2: The Essential Techniques
  16. Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine
  17. 30 примеров того, что можно сделать при помощи CSS3
  18. Mike T. Henderson » Friday Reading
  19. Cross Browser CSS Background Transparency
  20. 玩转CSS3色彩 | PP的博客

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.