Slightly ajar

The CSS3 Colour Module is currently in Candidate Recommendation at the W3C. It has a number of new properties to allow authors more control of how they specify colour in their designs. In this post I'll take a quick look back at was has officially been available up until CSS2.1 and what has been added to the mix in the latest version of the CSS3 module.

Setting the colour of an element

CSS allows the foreground or the background of an element to be set using a number of different colour units. These are set using color for the foreground colour (mostly the text colour) and background-color. In CSS3 color is included in the Colour module, but background-color is included in the backgrounds and borders module. color acts just like CSS2.1 but adds a new legal value, attr(<identifier>,color). This allows one to specify an attribute from the element that the selector is pointing to, and the value of that attribute is used as the colour value. If it is not a valid colour then the browser/user-agent will fall back to using the inherit keyword.

Colour units

The value of a colour in CSS2.1 could either be one of 16 HTML4 colour keywords, or using the RGB colour model, specified as either a hexadecimal value (such as #FF0000) or a RGB triplet (such as rgb(255,0,0)). CSS3 has extended this by adding further colour keywords and an additional colour model. currentColor colour value has also been added, to set the colour to the same value as that specified in the color property. This is set to inherit if set on the color property itself. This is useful to set the colour of the background or border to the same colour as the foreground.

Colour keywords

In addition to the existing HTML4 keywords, the SVG colour keywords have been added. These are based on the X11 colour keywords. These have been implemented in browsers since Netscape 1.1, so should work in all major browsers, but they are now valid to use without getting validation errors. The named colours can be found in the CSS3 Colour spec.

Colour models

CSS2.1 uses the RGB colour model to specify colours, either as a hexadecimal number or RGB triplets. While this works well, it can be argued that it isn't intuitive. If one wants to tweak the colour to a different shade of the same colour, it isn't always obvious how to change the value. I still usually look up the value from a colour chart for instance (although I'm not a trained graphic artist). The new colour model, HSL, is thought by many to be more intuitive than RGB. This stands for Hue, Saturation and Lightness. Hue is represented by a 360 degree disc, where one can select the base colour that is desired. The basic colours (apart from white, grey and black -- more on that later) are around 60 degrees apart on the disc. For example, red is 0 and 360 degrees, yellow 60 degrees, green 120, cyan 180, blue 240 and purple/magenta at 300. Values between these get a mixture of the colours adjacent, such as cyan-blue at 210 degrees. The ligtness and saturation have to be set to get these colours however. Both are set on a percentage scale from 0 to 100. The lightness value sets how light or dark the colour is. No matter what hue or saturation is set as, using 100 for lightness would make the colour white, and 0 would make it black. Using values in-between would give a darker shade of the hue or a lighter tint. Providing the saturation is set as 100, and the hue is 240 (blue), setting the lightness to 75 would give a light blue, and 25 would give a dark blue. 50 would give regular blue. Ajusting this value would make the colour darker or lighter. As mentioned, setting full saturation will give the colour it's full hue. Making the saturation lower will move the colour to a more pastel shade until it reaches grey with no saturation. When using no saturation the colour is fully grey and the hue value doesn't make a difference. The grey will get lighter or darker depending on the lightness value. The statement color: hsl(240, 25%, 13%); would make a dark greyish blue, while a pure dark blue could use color: hsl(240, 100%, 13%);. As can be seen, once the basic colour positions are learnt on the colour wheel and which value is for saturation and lightness, it is fairly trivial to know how to get a different shade/tint or tweak the colour. HSL is currently supported in the latest versions of the WebKit, KHTML and Gecko rendering engines.

Opacity and transparency

traditionally there has been little control for transparency in CSS, except for making an element fully transparent with the transparent keyword or using transparency in PNG images. Much more control has been added in CSS3. The most widely supported is the opacity property. This is used quite often in the wild as IE can be given a CSS filter to mimic its behaviour. Opacity can be used to set an element to be fully transparent (opacity:0.0;), fully opaque (opacity: 1.0;) or any value in-between for varying degrees of transparency. While this is very useful, there are cases when it is desired that only the background (or foreground) have transparency applied to it. The RGB and HSL colour models have been extended to allow this by adding a alpha channel as a fourth value, with the same value range as the opacity property's value, creating HSLA and RGBA. background-color: hsla(240, 100%, 50%, 0.5); would make a semi-transparent blue background for instance. RGBA and HSLA are not as widely supported as opacity yet however.

Colour Profiles

There are a number of new properties relating to colour profiles. color-profile allows more control over the colours used by specifying a ICC colour profile. The default value is auto, which uses the sRGB colour space, unless an image includes its own ICC colour profile, in which case this is respected by the browser/user agent for that image. sRGB uses the sRGB colour space and ignores any colour profile included within a image. A named value can be set, which uses the corresponding colour profile in the browser's colour profile description database (if that profile exists), overriding any colour profile that images may have. A colour profile can also be set by specifying a URL where a colour profile is located.

A rendering intent for the colour profile can be set using rendering-intent. I don't know much about rendering intents, but a description for a valid values (apart from inherit and auto) can be found in the International Color Consortium standard. Finally a @color-profile rule can be set to group the colour profile and rendering intent. This was first defined in SVG 1.0.