CSS: colours!
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...
Let's see them one by one.
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...
For the black colour, we use RGB the following way:
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).
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:
Again, with HSLA we add the alpha channel to the basic HSL.
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.
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
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)rgb(100%,0,0)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%)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.