CSS3

RGBA and HSLA Colors in CSS3

Recently I was asked what the “new colors in CSS3” are, which was a question from a friend who was brushing up on some of the new specification. Basically this friend was referring to the W3C’s CSS Color Module Level 3 (available here: http://www.w3.org/TR/css3-color/) which has some new modules available in the specification, RGBA and HSLA. Both RGBA and HSLA allow you to specify a color and its transparency values at the same time within the syntax.

RGBA Syntax

RGBA is short for red-green-blue-alpha and as you may have gathered the syntax for a particular colour is made up of the 3 RGB values, followed by a fourth value which is the level of transparency.
So a standard value for RGB would consist of 3 values, so this RGB example would be red: 255, 0, 0. To use a RGB value is some CSS markup the following example will specify the background color of an element being set to red.

background-color: rgb(255, 0, 0);

So now we have seen the RGB syntax we can look at using the RGBA which as I mentioned at the start of this article, is a simple additional value. The example and code below is setting the same element’s background color to red, but is using RGBA and specifying the transparency level to 50%.

background-color: rgba(255, 0, 0, 0.5);

The fourth value in our code example above is specifying the transparency of the element and can have a value between 0 and 1, 0 being transparent and 1 being solid color. So in our example the value 0.5 is obviously 50% transparency.

For whatever reason the use of RGBA seems to have gained the most moment in its use online and is the most commonly used from what I have seen.

HSLA Syntax

HSLA stands for hue-saturation-lightness-alpha and uses the same basic markup as RGBA, apart from specifying that the color values are HSLA. One thing to remember is that HSL color is measured differently to RGB which consists of levels of red, green and blue to reach a desired color. HSL basically represents 3 values, the first is in degrees around the color wheel (0 and 360 being the same color), the second value is the saturation of that color in % and the third value is the lightness of the color, again in %.

So lets look at a similar example as previously used but this time in HSL. The HSL value for the same red used in the RGBA examples is: 0, 100%, 50%. An example of this HSL value in some CSS is below.

background-color: hsl(0, 100%, 50%);

Now that we have an HSL example we will proceed to specify the background color on the element in HSLA by adding the fourth value to the syntax which represents the transparency level and setting it to 50% transparency.

background-color: hsla(0, 100%, 50%, 0.5);

Benefits of Using RGBA and HSLA

The main benefit for using this markup is to reduce the page load speeds and enhance the performance of your site. An example is that you may use a semi transparent background image on an element such as a 1px .png image that is then repeated on that element. This element may then be positioned over the top of your web page’s body tag that has a solid background image, thus giving it a transparent effect.

The example discussed would incur an extra http request from the browser to the server to request the semi transparent image which increases load times, in addition to the download time of that image. By using RGBA or HSLA you are removing this request and requirement for the image which is now an effect rendered in the browser.

Browser Support

The browser support for using this syntax on your projects is relatively high with FireFox, Opera, Safari, Chrome and IE 9 and above supporting it. For a full break down on browser support, please check the ‘can I use’ website for full details: http://caniuse.com/#feat=css3-colors.

As ever it is important to analyse your user data for a full picture on implementing new technologies and syntax along with having an adequate stance on ‘progressive enhancement’ or ‘progressive degradation’. Basically create a site that supports all of your user base and then add enhancements and effects purely for aesthetics so that older browser users still can use your site and have a pleasant and accessible experience.

RGBA and HSLA Tools

There are many tools, generators and plugins that can help you generate the markup or even work out the RGBA and HSLA values for you based on HEX, RGB and other standard color values.

A nice RGBA, online generator is available from CSS3 Maker here: http://www.css3maker.com/css-3-rgba.html which allows you to create colours from the sliders on the tool. An alternative that allows you to generate RGBA from HEX values is available online from Devoth: http://hex2rgba.devoth.com/. A final tool is the Rainbox Color Picker extension for FireFox that is useful for generating HSL and RGB values, which you can then use in your syntax, specifying the transparency in the markup yourself once you have gotton to grips with writing out the CSS3: https://addons.mozilla.org/en-us/firefox/addon/rainbow-color-tools/.

Finally here is a nice online HSL color generator tool that allows you to create colours via the inputs on it or from HEX values input in the fields(also generates HSLA and RGBA color values: http://hslpicker.com/.

I apologise for the Americanisms used in this article (I am a British Citizen after all), but I didn’t want to confuse readers as they look at the markup for the CSS3 which obviously uses the American variation of color and not the English GB variations; colour.