Kilian Valkhof

Front-end & user experience developer, Jedi.

Understanding CSS Colour modes

CSS & HTML, 11 December 2007

CSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new colour modes that CSS3 introduces are still a riddle to most. In this article I’ll walk through all the different options we (will) have to define our colours.

CSS2

CSS2 gives you three basic ways of choosing colours: hexadecimal, keywords and rgb.

Hexadecimal notation

You probably already know how the hexadecimal notation looks, for each colour (Red, green and blue) you have two letters or digits, and in front of that a #. The higher the digits are, the brighter the colour. Pure black becomes #000000 while pure white becomes #FFFFFF.

But what do those digits actually mean? Hexadecimal notation uses a system of 16 digits. Because we only have 10 digits, the remaining 6 (they start at 0) are described using the letters A to F. Together, this allows for 256 numbers per primary colour. Those 256 numbers correspond with the current RGB colours in most screens, and allow for about 16 million different colours.

Next to the #rrggbb notation, there also is the #rgb notation that lets you pick red, green and blue with 16 increments, totalling 4096 colours. This means that #ff0000 and #f00 give the same colour.

RGB Notation

Another notation that has been in CSS for a while is “direct” RGB. It looks like this: rgb(255, 0, 0) for 100% red, 0% green and 0% blue. As you might already have guessed, this notation also uses 256 steps for each of the primary colours.

The only difference (apart from the syntax) is that RGB uses our own system of counting, while hexadecimal notation uses an alternative method. In theory, it’s easier to use the RGB notation because we understand it better. But when working with hexadecimal notation, it is my experience that you learn to think in 16 digits pretty quickly.

Next to the 256 steps, you can also opt for a float point percentage. This means that you can specify percentages down to one decimal. rgb(100.0%, 0.0%,0.0%) would be bright red. The decimals are optional though, so rgb(100%, 0%, 0%) also works.

HTML4 Keyword Colors

HTML 4 defined a list of 16 keywords to represent certain colours. This list was then added to CSS2. The colours, and their hexadecimal counterpart, are visible in the table below:

Keyword Hexadecimal value
aqua #00FFFF
black #000000
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
purple #800080
red #FF0000
silver #C0C0C0
teal #008080
white #FFFFFF
yellow #FFFF00

These colours have a fixed hexadecimal counterpart so they will display the same on different monitors.
CSS2 also defines system colours that are dependent on how your own operating system looks. This website gives a nice list of them. Because they are linked to the colours the operating system uses, they will look different on different computers.

All notations are supported in all modern browsers and Internet Explorer 6.

CSS3

Here comes the fun part! A look at what we’ll be able to use when CSS3 becomes the standard. We’ll start with some variations on modes defined in CSS2:

RGBa notation

One of the most requested items for CSS was transparency when picking colours. While opacity comes close, it’s not precisely what we want, because it controls the transparency of the entire block, not just an individual colour. So what did those smart people at the W3C do? They added an extra option to the existing RGB notation, to control the opacity of the colour: rgba(255, 0, 0, 0.5) becomes bright red with 50% opacity. The way to specify the amount of opacity is the same as the current opacity attribute, by specifying a number between 0 and 1. Hexadecimal notation unfortunately doesn’t have an alpha-channel addition.

RGBa is supported by firefox 3 and safari 3.

SVG colour keywords

CSS2 added a list of colour keywords from HTML4 and CSS3 does the same with SVG. The SVG colour names actually include all the HTML4 colour names, and add a further 131 colour keywords, totalling to 148 colour keywords. That’s a bit too much to list here, so I’ll just link you to them. Another new colour keyword is “currentColor”, which is the same as the current specified colour of the element or the inherited value of color.

SVG colour keywords are supported by all modern browsers except for internet explorer, which doesn’t understand “grey”.

HSL

HSL stands for Hue, Saturation and Lightness, and looks like this: hsl(0, 100%, 50%) which will produce red. HSL uses a different colour model than RGB, in that it takes our colour spectrum as a circle with 360 degrees, starting with red. 0 is red, 120 is green, 240 is blue and 360 is red again. Saturation is the amount of greyness in the colour. 100% is no greyness, 0% is completely grey. Lightness is, basically the brightness. 0% is black, 100% is white and 50% is ‘normal’.

HSL is supported by opera 9.5, safari 3 and recent gecko (konqueror, firefox)recent KHTML and gecko* based browsers.
*Thanks to Arjan Eising for correcting this mistake

HSLa

Just like RGB, HSL has an opacity-added equivalent as well. it works exactly the same as the RGBa notation, adding a number between 0 and 1 at the end of the notation specifying the opacity.

HSLa is supported by firefox 3 and safari 3.

Support

What amazed me is that so much of the colour models are already supported by most modern browsers. Of course Internet Explorer is lagging behind, and the CSS3 bleeding-edge stuff only works in the bleeding-edge browsers, but that was to be expected.

For the future, HSL seems like a great way to choose, tweak and define colours, and a model I will undoubtedly start using. Opacity in both the RGB and HSL models is a welcome addition as well, though I wish it was also there in the hexadecimal notation.

My sources: the css3 colour specifications themselves, and the excellent css3.info.

So how about you, are you using anything else than hexadecimal notation, are you ready to experiment with HSL? Share your experiences in the comments :)

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. I really do prefer hexadecimal colors. They’re easier to work with, easier to remember, and they look uniform from line to line.

    I’m not sure I like how the alpha-channel/opacity looks when attached to the RGB color code. It looks like the code is indicating that there are four values instead of three, and a setting.

    But I think HSL is going to be great. It’s like fiddling around with colors in Photoshop without having to open Photoshop!

    And I think this is hilarious:

    All notations are supported in all modern browsers and Internet Explorer 6.

    — good to know that you don’t consider IE6 a modern browser. Now let’s tell the rest of the world :)

  2. Nice article, you’re very complete with all the information.

    Konqueror isn’t using the Gecko rendering engine, but the KHTML rendering engine. See Wikipedia for more on KHTML.

  3. Paul Walker

    Great Article – I didn’t know about HSL and HSLA colour yet!

    One thing I would have liked to see the W3C do with colour notation is add opacity to the hexidecimal-colours, in the forms #FF000080 & F008 (50% red – almost)

  4. […] CSS2 ve CSS3 arasındaki renk tanımlama farklılıklarını anlatan bir makale. Bağlantı […]

  5. informative….

  6. […] Understanding CSS Colour modes […]

  7. […] Great article on understanding CSS Colour modes, and shows the different ways you can do it in CSS2 and the variations in CSS3. CSS3 apparently is supported by more browsers than you think – but I didn’t see IE mentioned. I’ll probably just stick with what I know works, but is an excellent reference bookmark. Tags: CSS, IE […]

  8. Jez

    which doesn’t understand “grey”.

    did you try ‘gray’?

  9. @Jez: Yes, Gray is one of the 16 HTML colour keywords, Internet Explorer understands those :)

  10. Alejandro Moreno

    I’ve seen hex color notation as #AARRGGBB. It seems to be used in a few different non-web-related apps. Anybody know why it is unacceptable for CSS?

  11. […] Przy okazji standardów… Czytałem również dziś świetne wyjaśnienie nowych sposobów kodowania kolorów w przeglądarkach. Mowa o dodaniu przezroczystości (RGBa i HSLa działających już w Firefox 3 i Safari 3), SVG colour keywords (nowoczesne przeglądarki poza IE) i HSL (Opera, Safari i ostatnie przeglądarki z silnikami KHTML i Gecko). Polecam tekst Understanding CSS Colour modes. […]

  12. tom

    Ranjani,

    IE6 isn’t a modern browser because the support of anything is crap. The IE7 and the coming IE8 could be called modern. IE6 has a copyright note for 1998-99. From this, there where no really new version until they released the IE7 at the end of 2006. That’s 7 years without any improvements in standards or anything else than bugfixing and crap bundling.

  13. Everytime I read something new about CSS3, I get all excited for a couple of seconds, before I realize that we won’t be seeing support in the majority of browsers (read: IE).

    RGBa would be one of those features… *sigh*

  14. IE can use the #aarrggbb notation when using the Gradient Filter; http://krijnhoetmer.nl/stuff/css/background-opacity/

  15. […] CSS renk tanımlarını anlamak. Bağlantı […]

  16. I agree with you Hurreman, but then again it is still a little too early to for us to judge IE8 and word is out on the street that IE8 now passes the Acid2 test, which is a step in the direction of standards compliance. Who knows if it will fully support RGBa when it comes out?

  17. Colin

    which doesn’t understand “grey”.

    did you try ‘gray’?

    Ha! Nothing like feeling dumb

  18. […] Understanding CSS Colour modes in both CSS2.1 and CSS3, particularly exciting are RGBa and HSLa formats supported by firefox 3 and safari 3 (tags: color css design webdesign reference) […]

  19. […] KilianValkhof.com » Blog Archive » Understanding CSS Colour modes (tags: css color webdesign colour design css3 webdev) […]

  20. […] Understanding CSS Colour modes […]

  21. […] KilianValkhof.com » Blog Archive » Understanding CSS Colour modes Don’t understand the differences between HEX, RGB, keywords and alpha the changes in CSS3 colour? Here’s a quick explanation. (tags: css css3 webdesign color colour HEX RGB RGBa design webdev) […]

  22. Fantastic! I have learn’t some things here today that I didn’t know, but am really pleased about, I look forward to the full implementation of CSS3 with relish – Thank you.

  23. […] HSL? Поделитесь своим опытом в комментариях Оригинал: Understanding CSS Colour modes Прочитал что-то новое и полезное? Тогда […]

  24. Johan

    There’s another CSS2 color unit: the “UI Name” standard. It’s a set of keywords that corresponds to the color of the browser or OS interface (color of active windows, window border etc.). At the moment the browser support is a bit shaky, especially Safari, but it can still be useful on stuff like form elements where you want to stay close to the OS color settings.

    http://www.blooberry.com/indexdot/color/uiname.htm

  25. […] is a good resource to understanding the different color modes in CSS, including a write-up on CSS3’s different alpha mode […]

  26. […] CSS renk tanımlarını anlamak. Bağlantı […]

  27. Dom

    Is it just me, or does 16 HTML keyword colours + 132 other W3C recommended colours = 148 colours in total? And not 147 as stated in the article?

    Other than that, great article! Very informative, not too long, and I certainly learnt something today.

    :)

  28. Dom, that was indeed a small error on my part. w3c has 131 extra keywords, so the total is still 147. thanks!

  29. […] Posted by sharonb under Design, Webdesign | Tags: color, colour, CSS, Design, web design |   Understanding CSS Colour modes by Killan Valkhof clearly explains the various colour notation methods used in hexadecimal, RGB and […]

  30. Never heard before of those colors depending of OS theme (or “UI Name” as stated again by Johan): sounds great for web apps or forms. Thanks!

  31. i haven’t already try css3 yet. But, this article gives me info that how cool is css3. Nice article ;)

  32. […] Understanding CSS Colour modesCSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new colour modes that CSS3 introduces are still a riddle to most. In this article the author walks through all the different options we (will) have to define our colours. […]

  33. yes

    btw for ie:

    Oddly, all of the “grays” work except lightgray and all of the “greys” don’t, except lightgrey.

  34. Great post. I love “navy #000080”. Thanks for sharing :)

  35. Nice. I never knew that i would be so important to know then. I’m just a RGB junky. Thanks!

  36. Rick

    Cool, maybe in 10 years we can use HSL, HSLa, and RGBa.

  37. […] Understanding CSS Colour modes CSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new colour modes that CSS3 introduces are still a riddle to most. In this article the author walks through all the different options we (will) have to define our colours. […]

  38. […] Understanding CSS Colour Modes […]

  39. Sorush

    very nice!

  40. […] the full article hosted by Kilina Valkhof’s personal blog and master the art of color control for your web page. addthis_url = […]

  41. […] Understanding CSS Colour modes […]

  42. I have read in some book that it is better to used web safe colors.

  43. […] Understanding CSS Colour modes […]

  44. RGBa w00t. :)

  45. Anon

    HSL is Hue, Saturation and Luminosity… Not lightness…

  46. […] Understanding CSS Colour Modes – Kilian Valkhof […]