CSS: colours!

Tweet

What would the world be without colours?
We work with colours every day, especially with CSS. But, do we really know what are all the available colours values types?
Well... following the previous post about measurements values - drums roll - here we go with colours...

Colours

In CSS we can use different ways to define a colour value:

• Hexadecimal
• RGB
• RGBA
• HSL
• HSLA
• Names

As you may understand, RGBA is an extension of RGB while HSLA is an extension of HSL.
Let's see them one by one.

Hexadecimal colours

These are the most used and they are supported by all major browsers.
We specify the colour using the #RRGGBB pattern, where the RR is red, GG is green and BB is blue.
The three values are hexadecimal integers between 0 and FF.
Examples? #FFFFFF which is white and #000000 which is black. All the other colours in between... ... ... ok, joking... Well I can't list them all...

RGB and RGBA

The RGB is very similar to hexadecimal in principle. It's quite common and it is supported by all major browsers. As the name say, RGB stands for Red, Green and Blue. Each value defines the quantity of the related basic colour.
For the black colour, we use RGB the following way:

rgb(0,0,0)

Instead of integers between 0 to 255 as in the above example, we can use percentage:

rgb(100%,0,0)

While RGB is supported by all major browsers, RGBA is supported by more recent browsers versions.
What's the difference? To the three basic colours (Red, Green and Blue) we can add the alpha channel.
The alpha channel determines the opacity of the colour itself and it can have a value between 0.0 (transparent) and 1.0 (opaque).

HSL and HSLA

Another couple. The principle is the same as the above, however HSL means hue, saturation, and lightness. The three values are completely different: hue is an integer value between 0 and 360, while saturation and lightness are represented by a percentage.
If you use Photoshop these are very basic rules you already know very well. If you don't use Photoshop, you really need to see some kind of image editor to fully comprehend what I'm saying. Just go to any colour palette editor and see what I mean.
Syntax? Here we go:

hsl(50,50%,50%)

The resulting colour will be some sort of light brown...
Again, with HSLA we add the alpha channel to the basic HSL.

Predefined/Cross-browser colour names

This is the easiest way of using colours in CSS: we use their name. 'white' is white, while 'red' is red. Isn't it easy?
The main difference between this method and all the mentioned above is that we have "only" 147 colours names. The 17 basic colours are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. **Just notice "gray" and "grey"... isn't it crazy?**

Ok folks... I'm done here for today.
Next time I will talk about CSS again, so stay tuned.