CSS -Colours
Give colour to your web pages!
Welcome back!
Today’s article is about colours. For this article, you need to have a sound understanding of what is CSS and how it works. Here is the link to Part 1. Please go through it.
Now let’s start.
Colours are the simplest yet the most effective tool to make your webpage look pleasing to the eye. Good choice of background and text colours can go a long way in improving the user experience. Today, we will be looking at core concepts of colours in CSS.
Building Blocks of Colours
As you must be knowing, any virtual screen is made up of millions of tiny dots, called pixels. It is the building block of everything you see on the screen. Every pixel has a colour, decided by the amount of red, green, blue in it.
Giving Colour to text
We use color property for this. The following are the various possible values for it:-
The colour of a pixel is represented in one of the following codes:
1. RGB values
color: rgb(x, y, z)
Here, x,y and z are integers in the range of 0–255 which represent the amount of red, green and blue respectively. rgb(255,255,255) gives white colour, and rgb(0,0,0) gives black colour. There are various tools to get the desired colour code. Here is the link to one of them.
2. Hex codes
color: #rrggbb
Here, rr, gg and bb are 2-digit hexadecimal numbers in the range 00-ff which represent the amount of red, green and blue respectively. Hex codes are easier to write than RGB codes. #000000 gives black colour and #ffffff gives white colour.
3. Colour Names
color: red
One can also directly specify the name of the colour. All modern browsers support these 140 colour names. While easy to read, colour names reduce our flexibility to create colours as we are restricted to 140 colours as opposed to (255)³ different shades with colour codes.
Note
- To colour the background, we use “background-color” instead of “color”. Note that the spelling of colour in the code has to be written in U.S. English, i.e., without a ‘u’.
2. If you give a value greater than 255, it will be treated as 255. Similarly, if you give negative value, it will be considered 0. Try it!
Did You Know? The full form of the pixel is “picture element”!.
Opacity
CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 (so, a value of 0.5 is 50% opacity and 0.15 is 15% opacity). There are two ways to write the opacity as illustrated below.
HTML and CSS
This is a simple way to specify the opacity of an element. The opacity of an element will be inherited by all its child elements.
There is also another shorthand way of using specifying opacity along with the colour, using the rgba(x,y,z,w). It is the same as RGB, with an extra parameter added for opacity. In RGBA, ‘a’ stands for alpha, i.e., the value of opacity.
HTML and CSS
In both these cases, the same output is generated.
Output
HSL values
Imagining a colour in terms of RGB values is very difficult. If you want to change the tone of colour, you will have no clue how to do it! CSS3 introduces an entirely new and intuitive way to specify colours using hue, saturation, and lightness values.
The below properties might be familiar to designers, photographers, etc.
Hue
Hue is the dominant wavelength and is the first item we refer to (e.g. “yellow”) when adding in the three components of a colour. In other words, the term describes a dimension of colour we readily experience when we look at the colour or its purest form. In HSL colours, the hue is often represented as a colour circle where the angle represents the colour, although it may also be shown as a slider with values from 0 to 360.
Saturation
Saturation defines the brilliance and intensity of a colour. When a pigment hue is “toned”, both white and black (grey) are added to the colour to reduce the colour’s saturation. So, we can say that it is the inverse of the amount of grey in a colour. It is represented as a percentage. 0% results in a shade of grey, and 100% is full saturation, i.e., no grey added.
Lightness
It is the amount of black or white. It is represented as a percentage. 0% represents complete black and 100% represents complete white.
HSL colours have a similar way of representation:
color: hsl(x, y% ,z%)
Here, x, y and z represent the values of hue(0–360), saturation(0–100%) and lightness(0–100%) respectively.
Just like RGBA, there is also HSLA, where the fourth parameter, alpha, represents the opacity(0.0–1.0).
background-color: hsl(120,90%,50%);
…
background-color: hsl(120,20%,50%);
…
…
background-color: hsl(120,20%,50%);
This is all about CSS colours. In, next part we are going to discuss Text properties in CSS.
My name is Amartya Choudhary. My E-Mail, you can contact me if you have any issues… Thank You for Reading this Article!
We hope to see you in the next article also.
Happy Coding!
