CSS From Scratch. 4:5 Decimal Colours and Alpha Transparency

Tweet

A more modern way to represent the 256 possible values of each small light for use in CSS is to use decimal notation.

Some people find this easier to understand. Each colour of light is represented by a number between 0 and 255. The numbers are usually written like this:

rgb(255,0,0)

Notice that the numbers are preceded by the letters rgb. This tells the computer that you are using the RGB Colour Model. There are other possible colour models! The numbers are also enclosed in brackets and separated by commas.

It is now possible to include something called alpha transparency when writing decimal colour codes in CSS. This is an exciting development: although computer monitors have been capable of this for years, it has now become a standard which all modern browsers are able to display.

Alpha transparency means transparency which is not all-or-nothing, in other words something can be translucent! The other type of transparency is called binary transparency – something is visible or not visible. Alpha values can be added to decimal colour codes thus:

rgba(255,0,0,0.5)

Note that this time, the numbers are preceded by the letters rgba: Red Green Blue Alpha. There is one extra number inside the brackets. The last number represents the degree of transparency, and takes values between 0 (completely transparent, not visible at all) and 1 (completely opaque).

This will not be much use to you until you learn how to move elements around the page with CSS, but when you do you will be able to play with alpha transparency to create interesting effects with overlapping elements and different colours.

Another colour model which has only recently become viable for use on the web due to improvements in browser technology is HSV. This stands for Hue Saturation and Value. There is also HSVA: HSV with alpha transparency. Some people find this colour model much more intuitive than the RGB model, and claim that it is very easy to know what colours will be produced by guesswork. We have not covered this model, but the notation is similar to the decimal rgb notation shown above. If you would like to try it, information is available online.

You can look up decimal colours online, and use them as you wish in your CSS.

Tags: alpha transparency, alpha values, brackets, colour codes, colour models, colours, commas, computer monitors, decimal notation, elements, hue saturation, improvements, modern browsers, rgb colour model

This entry was posted on Friday, August 5th, 2011 at 12:13 pm and is filed under Tutorials. 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.