CSS3 properties you can already use in your projects today – A look at RGBA and HSLA

by admin

Today, I just want to give you a quick rundown which CSS3 properties we designers & developers can already integrate in our everyday work. Sidenote: IE-Browsers up to version 9 don’t support any CSS3!

So why not take advantage of these newly supported CSS3 properties and provide a better experience to your visitors today ? I want to kick this series off with the new ways in which you can manipulate colors using CSS3.


RGBA stands for Red, Green, Blue and Alpha (alpha-channel) which refers to the transparency of that color. Some might say: ‘But you can already use opacity to achieve a transparency effect!’ I say: ‘True, but the main advantage of using RGBA over opacity is that when using RGBA,the transparency isn’t applied to child elements and thus parents remain solid objects! Which also means that we don’t need to reproduce the transparency effect using semi-/transparent .png files anymore!’. Its much less of a hassle to use pure CSS-code instead of dealing with workarounds.

The syntax:

#element {
  background-color: rgb(255, 255, 255); //fallback
  background-color: rgba(255, 255, 255, 0.5);

The first declaration is the fallback for our beloved friend IE, the second declaration is for all the other browsers.


HSLA stands for Hue, Saturation, Lightness and, you guessed right, the alpha-channel. Its a pretty cool, fast and a more intuitive way of changing colors! The first value (Hue) is for choosing the color done using degrees: 0º = Red, 60º = Yellow, 120º = Green, 180º = Cyan, 240º = Blue, 300º = Magenta (and but of course you will get all the colors in between two values).

The second value (Saturation) controls the amount of color we are using, 0% = greyscale and 100% = full color.

The third value (Lightness) tells us how bright the color is. 0% = Black and 100% = White.

The syntax:

  background: hsl(30, 50%, 80%); //fallback
  background: hsla(30, 50%, 80%, 0.5);

Go and have a play with Chris Coyier’s created nifty tool the HSLa Explorer


Whatever your preferences is when it comes to manipulating colors, CSS3 got some hot stuff to offer and in my opinion, it is about time to start integrating these newly supported CSS3 properties in your projects today!

Posted in Design and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Join Our Team in Shanghai

Now hiring PHP Developer in Shanghai