PART 1 – CSS Color Module Level 3
In the latest CSS3 recommendations relating to color, e.g. opacity, rgb values, there are a couple of noticeable and welcome changes coming your way. Previously if you looked to adding any alpha transparency to backgrounds or manipulate the hue,saturation,lightness of elements it required the use of image manipulation in tools like photoshop, pngs and sometimes nasty css or javascript hacks. The opacity filter comes to mind for IE!
RGBA (whats the A)
I’m sure you are familiar with defining color values in CSS using RGB (Red,Green,Blue) integer values ranging from 0-255. The A in RGBA is for transparency, which allows you to set the colors transparency level in the range 0 (fully transparent) to 1.0 (opaque).
Example
Usage in the real world
This can be used in many areas of web design ranging from soft transparent overlays on headings, paragraphs etc.. The fall-back for browsers that don’t support it will be a full colour, which in most cases will be acceptable.
NOTE – unlike Opacity this CSS3 feature only effects the transparency of the element it is applied to and not all of the children contained within the element. So your p tag in a div styled with RGBA wont take the transparency of its parent. Nice!
HSL & HSLA
Hue, Saturation, Lightness ( and Alpha) has been introduced in CSS3, for these reasons defined in the working draft of thee CSS Color Module Level 3.
It has been observed that RGB colors have the following limitations: – RGB is hardware-oriented: it reflects the use of CRTs. – RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.
Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades. Saturation is a percentage value; 100% is the full colour and 0% would be all colour removed. Lightness is also a percentage; 0% is dark (black), 100% is light (white)
Example
The color on the left has been produced with the HSL declaration and the color on the right has been produced by the standard RGB declaration. Adding an extra alpha parameter to the HSL statement from a value from 0 – 1.0 allows you to specify transparency for the color.
Summary
These are only a couple of changes regarding the CSS Color Module Level 3 and full details can be found here http://www.w3.org/TR/css3-color/
