Understanding colours in CSS3

I remember having difficulty learning the concepts of adding colours using css3 during the early days of my web development. Advanced concepts such as RGBA, HSLA and Opacity used to confuse me. So I thought it might be a good idea to write this article explaining the concept of adding colours using css3.

Lets start off with revising the basic concepts of adding colours in css.

There are 3 standard ways of adding colours in css:

  1. By specifying the colour name. Example: red, blue, yellow
  2. By specifying the HEX values of the colours. Example: #ffffff (for white)
  3. By specifying the RGB (Red, Green, Blue) value of the colour. Example: rgb(255, 0, 0) for red.

If any of the above mentioned methods seem new to you, then I would suggest reading and experimenting with the following link.

CSS3 takes these basic concepts one step further and introduces 4 new methods in addition to the standard methods:

  1. By specifying the RGBA (Red, Green, Blue, Alpha) value of the colour.
  2. By specifying the HSL (Hue, Saturation, Lightness) value of the colour.
  3. By specifying the HSLA (Hue, Saturation, Lightness, Alpha) value of the colour.
  4. By adding Opacity to a given colour.

Understanding Opacity:

Before we start discussing RGBA or HSLA, its important that we understand the concept of ‘opacity’. Don’t get confused by the word ‘opacity’. It simply means how transparent you want the colour to be. The values for opacity are specified in the range of 0.0 (fully transparent) to 1.0 (fully opaque).

Example: background: rgba(255, 0, 0); opacity: 0.4; will give us a light shade of the colour red.

Understanding RGBA:

RGBA is nothing but the extension of the standard RGB formula for adding colours with an ‘A’ (Alpha) extension to specify the opacity of the colour.

Example: rgba(255, 0, 0, 0.3), gives us red with opacity.

Understanding HSL Colours:

This is another method introduced specifically in CSS3 to add colours. It takes the hsl(hue, saturation, lightness) formula to add colours.

Hue is the value of the colour on the colour wheel given in the range of 0 to 360. For example, 120 on the colour wheel is green.

Saturation is a percentage value which defines how full the colour is. For example 100% is full colour.

Lightness is also a percentage value which defines how light the colour is. For example 0% is complete dark while 100% is complete light.

For example hsl(0, 100%, 50%) gives us the colour orange.

Understanding HSLA:

HSLA is nothing but the extension of the HSL formula for adding colours with an ‘A’ (Alpha) extension which defines the opacity of the colour.

Example: hsla(120, 100%, 75%, 0.3) gives us light green with opacity.

Conclusion:

CSS3 takes adding colours to a whole new level, making the webpages look much more elegant and efficient. Its not the concepts that are hard to understand but the terminology that can get us confused. I am positive that after reading this article, you will have a clear understanding of these concepts and with a little bit of practice, you will be a pro at it in no time. For further reading, I suggest you read and experiment with the following link.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.