Understanding Colors in CSS

Hello guys. Welcome to our CSS series. In our last segment we had seen about filters, the different filters that are available in phone cameras, contrast, hue, sepia, greyscale, etc. Similar filters we had seen in CSS in the last segment. I hope in the last segment all the different filters that we have seen that you have performed practically for those. We will start our today's segment which is about CSS colours.  In our past segments of CSS, we have used colour properties in font and background. Today we are going to see about these colour properties on a deeper level. What are those actually and how are the different colours generated? Like it is mentioned here. The colour property in CSS is used to set the colour of HTML elements. Means all the different elements of HTML which are available div, p, image, table, etc. To give all those elements some colour, we make use of the CSS colour property. Usually background and font colour, we use the colours in these two things. So here the colours are generated in which way, that is available with us. In total, there are six ways shown here. First way is the RGB format, where RGB stands for red, green, blue. Then is RGBA, then is a hexadecimal, then is HSL, then HSLA, then built in. We will see all the colour types one by one today. The first type is RGB format. Like it has been said in RGB, R stands for red, G stands for green and B stands for blue colour. So, with the combination of these three, the colour that gets generated is the RGB colour format. Every position that is there, like there is red, the value range of red is from 0 to 255. Similarly, G's value range is from 0 to 255 and B, blue’s range is also from 0 to 255. Means RGB, if we require a pure red colour, you can keep 255 in place of R and the rest you can keep 0. If you want green, you can keep 255 in place of green and keep R & B 0. If you want blue, keep R & G 0 and keep blue 255. In this way, with different RGB combinations, you can generate colours. If you require any other colour, yellow, purple, orange, pink etc. You can do different changes in the values and you can generate your colour. So, this is the RGB format. Now, how we can keep the RGB format in our webpage, that we will perform through a practical. There is only one limitation of RGB format, which is, this property is not supported by browsers. Most of the old browsers which are there, do not support this. Rest of our new browsers support RGB format. So, the syntax for it is something like this. After colour we write RGB and in place of R, G and B we will define a range. So, we will perform this practically. So, let's say we will take our programme, HTML, example colour, we will save this, colour.html. Now, in this to understand RGB, let’s say we can use different heading tags or p tags. So, let's say we will go with p. This text is in RGB colour format, save. Now we have to generate the colour here. So, let's say I will take here, style, colour, since it is RGB, so RGB. Here we have to generate different colours. So, let's say RGB colour format, after that we will take red. Okay. So, we have generated three, first is red, then it's green, then blue. Now, if you want to generate red colour, as you can see, we have three RGB positions are available. So, we will write 255 in R and 00 in our green and blue. If we want to generate green, we will write 0 in red and blue but in green we will write 255. Similarly, if we want to generate blue, so red 0, green 0 and our blue will be 255, save. Now we will run this programme. So, our programme is running here. Because first we were given red. So, we are seeing it in red. Second, we had taken green and the third was blue, which is seen in blue colour. Now, this colour is in red, now we want the shades of red in it. So, let's say we generate 3 shades. Okay. In place of 255 I will take 200 and I'll take 150. So, we are getting a few shades of red. This red colour is a little bright red, this is a maroon red and this is a darker red. So, these are the three different shades of red that are getting generated. Now here if you do the same thing with green, let's say here, 255, 200, 150. So, here after the lightest green, we are getting a medium green colour and then we are getting a slight darker green. Let's say we make it 100 here so we are getting dark. That means how much ever dark we want to make the colour. Its value should be that much near to 0. If the same thing we'll do for blue, in place of 255, 200 and 100. So, here we are getting colour variations of blue colour. So, here we have generated different colours of red using RGB, we have generated different colour shades of green, using RGB. And for blue also we have generated colour shades through RGB. So, this was the technique to generate shades.  Now, if in RGB we want to make different combinations. Let's say, these were basic red, green and blue colours. But now I want such a colour in which I can mix red and green colour. So, I'll make blue 0 in RGB format. Okay. If I add 100 in both red and green, I'll save it. I'm running it. Here I'm getting a combination of red and green. Now I will try a few more variations in this like I make this 150 here and then I’ll reduce this to 50 and then make 50 here and then make 150 here. So, we are getting a colour which is a combination of red and green. If you do the same thing with red and blue. So, we will make green a 0. Here I will write 100 and here I will write 150. I'm using random numbers right now. So, we are getting purple like, dark blue kind of colour. And if I do the same thing with green and blue. I will write here 50 and I will write here 200 and here 50, save. So, we are getting two colours here. So, these are the colours which were the basic shades that we had generated. Then we have also generated a combination of three. Now, we will generate a few more colours with the help of all three values. Let's say in all three places if I add 50, 50 and in three places, I will add 100, Save. So, we are getting these two-colour shades here. We are getting it in a slight greyish format. So, these are RGB colours using red, blue and green combinations, how we can generate colours. We have seen that here. So, this was our RGB format. RGB from 0 to 255, we can use any value. Next is our RGBA format. A stands for alpha, which decides our transparency, how much opacity we want to give, how transparent we want to make our colour or shade. So, for that we will do one thing. We will name this example colour RGB. Next, we can generate one more program, html, example colour RGBA, save, colour rgba.html. In this we'll take one heading tag, h1, in which we will write, this is an example of RGBA colour format. Now, let's say in this I will add style RGB, colour RGBA, in RGB my first colour is red colour. So, let's say I take it as 255 and after that I will put 0, 0.  Okay I will generate only RGB, save and I will run this program. Okay, so this is in my RGB format, Okay. So, in this I have used only red colour. In the same program below by using RGB, I will generate A and I will give transparency here. Now, the transparency value that is there. Here it is mentioned, the value of alpha is in the range of 0.0 to 1.0 in which 0.0 is fully transparent and 1.0 is not transparent. So, let's say I will add 1.0 here, which means not transparent. So, here we are not getting transparency. Now, if I add here 0.0. So, this gets vanished from here but it is there, when I perform the selection, we are able to see the text here. So, let’s say if we give it 0.5, here we are getting a little light colour. We are getting a light transparent format here. So, in RGB we generated only red colour and the same text we have made it a little transparent. Now, we will do one thing, we will generate this same thing, three times. Here we will write 0.8, 0.5 and 0.3, save and reload. So, you can see our basic colour and how it slowly becomes light. So, this is our transparency, how we add the transparency little by little in our text. So, this is our way, how in RGB by adding a transparency factor, we can make our text transparent. Now, let’s say our next notation is the hexadecimal notation. What we saw was RGB red, green and blue. Now comes our hexadecimal notation with the help of hex code how we can generate our colours. So, always hexadecimal notation is made up of six digits. Hexadecimal can be defined as a six-digit colour representation. This notation starts with the # symbol, means it starts with the # tag, and after # tag her are six characters. Now, there are six characters which are there, since this is a hexadecimal notation, our characters are from 0 to 9 and between A to F combinations. This means the number can be a combination 0 to 9 and A to F, a total 16 positions. So, in hexadecimal notation. The first two digits represent the red colour, the next two digits represent the green colour and the last two digits represent blue colour value. Means here the syntax that has been given in that if you see after #, 0 to F any value, again 0 to F any value, this way six times and this position that is there, the first 2 positions, these will represent red colour value. After that the two positions will represent, green colour value and the last two positions represent the blue colour value. Means like it was in RGB, we will use 0 to 255 value but in the bracket, first position was red, second position green and third position was giving blue notation. Similarly, here 1^st two, red, centre two, green and last two, blue, it will represent. If we see these things with an example, maybe we'll generate a new program, HTML, example hexadecimal colour, save, colour, hexadecimal.html. In this video we'll take let's say we have to generate different colours

For that we will take h1 tag, we can even take h3 to show it a little darker colour. This is an example of heading in hexadecimal colour, save. Now I will run this program. Okay. So, the red colour is still not coming since we have not given the hex code. So, let's say I will add inline property here after, colour # tag.  As we have seen for red, the first two positions are there. So, if I add here ff, and give 0 to the rest of the position. So, here I will get red.  Now, if I generate the same thing, we will make it h2, so that we can see a bigger height. Okay. Now, I will perform the same thing, hexadecimal colour, red, okay. Now, here we will make FF as 00 and centre two we will give the value FF. So, this will be our green colour, when we give here value 00 and the last two, we change to FF, blue, save. So, here we are getting the same output as in our previous program, red, green and blue colour but this we have generated using hexadecimal colour codes. Because the first 2 positions are red, centre 2 green and last 2, blue. Like we had seen in the first program that by giving different number combinations, we can generate colours. Same thing we can do here as well. We can generate different values by giving different numbers. For example, in place of FF, like we know that from 0 to 9, we can give any numbers. So, 1, 2, then again 1, 2, again 1, 2, if I give it this way. I don't know which colour will be generated here. So, I'm taking it here. This is not black, it is like a dark green colour. If I make it 00 here, it is coming near to the black. Here I will make it FF, so we are getting more of the red colour. We can also use aa here, so we are getting purple, pink.  If I use aa even here. I'm getting purple here. Again, I'm adding aa, I'm getting grey colour. So, as and when I'm changing the values of these 6 positions, on that basis I'm getting this colour generated. This is our way, how we can give different values and change the colours. Now, like we had seen in the earlier. segment. It is difficult to remember the colour codes. For that we can search html colour codes in google. So, we will get a few colour codes here. Like you can see here, there are a lot of colour codes available here. Wherever I am clicking, that colour code is getting generated and I am getting it here. Let's say this is red, so I am getting FF, 4 times 0. Then this is blue, I am getting FF in blue. Here somewhere there is green. The greenest, I am getting FF here. Then the colours that are generated with the help of combinations. I am getting their codes as well here. So, these are the different colour codes, wherever I will click that colour I will get. I can scroll and take it there, I am getting different pallets of colours. And there was one more site that we had seen in the last segment. Here, wherever we are clicking, the colour is getting generated. So, this is also the way we can generate the colours. Because remembering the colour codes becomes difficult. We can search the colour codes this way and add it to our web page. So, this was our way. If I add here one more h2 and I want my heading tag to look only 0. I mean, it should look white and black. So, to generate only white or only black. I will add 6 times 0 here and here I will add 6 times F. So, I am getting a dark black colour here. The FF after that, I am not able to see here because it is white colour. Let's say that I put here background property, background colour #, okay. So, by adding black background, I can see the text in white colour. So, this is our black and white. With the FF combination, means FFFFFF, how many red, blue and green combinations that we have generated. We can make colours out of it, but the white is represented with a total F and black is represented with total 0. So, these are the 2 things that we have to remember here that for black 6 times 0 and for white 6 times F. Now, in hex code there is one thing that is important, the hex code is generated with 6 numbers. But let's say that there is a number which is getting repeated twice. Means which are there on 1^st and 2^nd position and after that the one on 3^rd is on the 4^th position and the one that is on 5^th is on the 6^th. So, for that we have shorthand hex code available with us. It is written here, it is a short code of hexadecimal notation in which every digit is recreated to arrive at an equivalent hexadecimal value. Which means if I represent 7, B, 6. On every 2^nd position, the 1^st number is getting copied. Means if on 1^st it is 7, then on the 2^nd position also 7, If 2^nd is B, then on 3^rd, 4^th also and if the last is 6^th on 5^th and 6^th position we are getting 6. Means here I don’t have to type it twice, it is happening in one time. Same thing if I do it here in case of black and white. If this 00 is multiple times I will write it 3 times. So, I will get black colour here and if I write FF here 3 times, even then I will get white colour, save and reload. So, like it was up there, I am getting the same output here. Means, the F that I have written here, it will be repeated on every 2^nd position and the 0 that I have written will also be repeated. Our slide's example is 7B6. So, let's take that example as well. It was 7B6, I will remove the background from here, save, reload. Here we are getting light, pista green kind of a colour. So, what is happening here is the 77BB66, that colour that is there, the same colour we are getting with 7B6. So, these are our examples of using hexadecimal notation. Instead of RGB, now we have used hexadecimal. Now, after hexadecimal we will come to HSL.  HSL stands for Hue, Saturation and Lightness, the 1^st character of all three are taken and HSL is generated. HSL is also a way of representing colour. Now, it is written here what Hue is. So, it can be defined as the degree on the colour wheel from 0 to 360 degree, 0 represents red, 120 represents green and 240 represents blue Means if we see a wheel and if we divide the wheel into three portions. From 0 to 120 portion is red, then from 120 and ahead is green and ahead of 240 is blue. So, this is our hue portion. Then comes saturation, it takes value in percentage in which 100% represents fully saturated means no Shades of grey, 50% represents 50% Grey, but the colour is still visible. Means the colour will start getting slightly darker. More and more we will become saturated, 0%, 1%, 2%, 50%, 100%, we will go ahead, that much darkness of the colour will keep on increasing. Then 0% means fully unsaturated, completely grey and the colour is invisible. It means it will become totally grey and our colour will come out. Then comes lightness, the lightness of the colour can be defined as the light that we want to provide to the colour in which 0% represents black there is no light.  Means if we make it 0 the light will go. It means that it will become black. 50% means it will be half lighted. And fully lighted

means if you want to generate a bright colour, in that case we can give in HSL. Now, here is the scheme that we have of HSL, that is represented with H, S and L. So, we will see it with an example. So, for this we'll generate a new program. HTML, example HSL, colour, save, colour, hsl.html, okay. So, now how we have to generate HSL. So, for that we will take the same h2 here. This is a heading with HSL colour value, save. Like in HSL, the way it is shown in the slide. First is the number, the rest of the two are percentages. So here we will take, style, colour, HSL, in HSL first was number. Like it was mentioned in the slide. If we want to represent red 0, for green 120 and for blue 240, we will generate. Now, let’s say I will take this, this colour has value red, green, blue. Okay. So, for red our colour was 0, then we have to provide saturation and light in percentage. So, let's say currently we are putting the saturation as 50% 50%. Okay. So, now we have to take green colour here. So, we have seen that 120 represents the green colour. Then it was 240 representing the blue colour. Okay. We will save it, now we will run this program. So, this is our program. As soon as I provide red, green and blue, we are getting these colours. But what we had seen in RGB and hex code compared to these colours look stable and dark. And this is happening because of our lightness factor. Because we are adding saturation and light also in here. So, let's say here in saturation it is written that if you have to add grey shade, we will add 50% in it and we'll keep on increasing it.  100% means fully saturated, no Shades of grey. If I remove 50 from here and make it 100, save and run. Like we were getting the colours in RGB and hex, we are getting the same colours here. So, the centre portion that is there of saturation, that is helping our colour to make it dark. If we have made it more 100% then there is no saturation at all. Let's say, I make it 0. So, that grey content will increase a lot. So, you can see that each and every colour of mine is becoming grey. So, to make any colour grey, what we can do is, we will give it saturation 0%.  If you want to completely remove it then 100%. And as much as you want you can adjust it with the numbers like 50. Let's say if I keep it 50%, after adding a light grey colour, my colours are available to me. Now, if we want, we can reduce or increase the light. So, let's say we remove the light from here and we will check what the colour that we are getting. Without light, the colour becomes totally black. Now, if I keep 100% light in this, light factors. Our colours become totally white. When I'm selecting my content it is there but I am getting it in white. So, If I make it 90, transparency is getting added, the lightness factor increases, we will reduce it further more. Let’s say I make it 30. So, with 30 we're getting a dark colour available here. So, this is our HSL, colours generated with hue, saturation and lightness. Now, we have added basic red, blue and green colours. Now, if we want to generate any more colour in this. Okay. So, what we will do for that. Lets say, I will write here again, 0 represents red, I want a colour between red and green. So, in place of 120, I'll take a colour between 0 and 120. Let's say I will take 60. I can take anything, 57, 56, 58, any number. So, I am taking 60 here. I will increase 120 and make it 170 here for random colour. And in place of 240 I'll make it 300. I'm saving it now, now the colours that I'm getting are different colours. I am getting a slight yellowish colour. This is my cyan colour which is in between my green and blue. And this is my purple colour which is going above blue. Means as and when we are increasing numbers, means we are increasing the hue value, we are getting different colours available. The way we adjust the light and saturation, we will see this colour in a similar way. So, this is how with the help of hue, saturation and light, we generate the colours. Going ahead comes HSLA. Means, hue, saturation and light is there and same a stands for the transparency. How do we have to add transparency in it. So, for that what we do is, we will generate one more program. Let's say its name is HTML, example HSLA colour, save, colour hsla.html. In that we will take h1 tag, this is an example of HSLA colour type, okay, we will save it. So, h1 tag has come. Now in this we have to add HSLA means transparency also. So, style, colour, HSLA, now I want to represent it the way, we had seen previously. If I want to show only red, then 0, 10%, 10%, I will generate red colour with it. Okay, so here it is coming 0, in place of 10, I will take 50 and even here I will take 50. In place of 50 I will make it… Okay, so this is a colour but this is quite dark. So, we will do one thing, we will keep the colour 0, we will make this 100% and this 50%. Okay, so we are getting red colour here. Now, we want that we make this red colour a little light. If we make 120 in this place, we will get pure green colour. Now I want that we will add here a attribute, where a stands for the alpha. I will add here 0.1. So, I am getting the lightest colour generated here. If I add here 0.8, I'm getting almost light colour. Now I will generate few more shades of this. After 0.8, 0.5,  0.2. So, these are my colours, dark, bit light, light and n light. So, my colour is slowly getting transparent. So, this was our HSLA type. Means hue, saturation and a, we have generated the colours. But we have to make it lighter, means we want to add transparency in it. In that case we can make use of a attribute, a stands for alpha, which stands for transparency. Like we have seen previously, it’s value is from 0.0 to 1.0. In which 0.0 means fully transparent and 1.0 means not at all transparent. So, this was our HSLA, colour type. Last comes built in colour. Build in colours means those colours which are defined by the names. For example, red, blue, green, we have already seen this thing, how we can provide colours with names. With using the names there is one problem that the names are very limited, there are almost 12 or 13 names are available like red, orange, yellow, green, blue, pink, violet and if we see extra if we see, aqua, brown, cyan, light green, such colours are there. We can only give the names that are available. So, here it so happens that if the names are not available and we have to generate the shade, there we face difficulty to generate that shade. So, let's say I write here html, example, colour with names, save, colour name.html. Here if I generate h2 tag, this is an example of red colour. In this case I would add style, colour red. And if I run this program, this is my programme where we are getting red. In the same way if I want to make it blue, I will replace this red with blue, and if I want green colour then I will replace this red with green. Then I have another colour, which is cyan colour. Let's say I have light green colour. So, I can even add that here. Then I have violet colour. Okay. We will save and run it. How many colour names we have added, all those colours are getting available here. If there is a colour whose name is not available, then generating that colour becomes difficult. But if you want to use basic colours, you can add colours through built in names. So, we will go into today’s slide. It’s syntax is colour and then whichever is our colour name. So, in total in today's segment we have seen all types of colours, how we can add the colours or how we can add transparency in it. RGB and to add transparency to it RGBA. Then HSL and then to add transparency to it, HSLA. Then is our hexadecimal, code number which is used the most. When we generate colour because hexadecimal codes are supported by all browsers. There is no browser where hexadecimal doesn't work. There are few old browsers where RGB doesn’t work. And HSL is almost supported everywhere. But there were few old browsers which were not supported. But hexadecimal codes are such codes which each and every browser supports. And the last comes Built in colour, in which with the name collection we can provide the colour. But in built in colour there is a limitation if the name of a certain colour is not available. So, we cannot give that. So, today's segment was fully based on colours. How we can avail different colours in our web page. How we can add transparency to it. How, with the help of hue, saturation and lightness, we can generate different shaded colours. So, guys, today's section was about colours. I hope you will try this entire section on your own and generate different colours and see for yourself and practice it. In generating this or in today's session, there is any topic which you have not understood. So, you can tell us on forums.learnvern.com. We will check all of your issues and difficulties there and try to revert to you as early as possible. Our next topic is on CSS box shadow and CSS text shadow property. Thank you.