Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
No matter how you define your color in CSS, chances are it's being displayed using RGB. RGB is short for red, green and blue, and is the primary color method used by screen devices. RGB is an additive color method, featuring a mixture of red, green and blue values that range between 0 and 255. If all three are set to 255, you get white. If all the colors are removed and set to 0, you get black. CSS offers support for RGB values through two forms of syntax.
So let's go ahead and experiment with using both. To do that, we are going to open up the rgb.htm file. You can find that in 06_03 folder. And very similar to the file we worked with last time, we have a headline and then a little bit of a description, in a paragraph underneath that about RGB values. And we are going to use that paragraph selector again. We have place holders for background value and the color value. And so we are going to use both of these to experiment with the RGB syntax. Okay, so the defined color as RGB, the first thing that we do is enter rgb(); So and in the parenthesis we pass in the value that we want the browser to render.
Now the first form of syntax I am going to show you guys involves with using percentages. So we have three values that we are going to pass, the red value, the green value and the blue value. Now if you're using percentages you are going to pass them as a value between 0 and 100%. Even more importantly, you have to remember to add a percentage sign so, let's do something like (45%,70%,20%); Okay, now do you have any idea of what that color is going to be, neither do I.
But I do notice that we need commas between those declarations as well guys. So remember, that's the red value, that's the green value and that's the blue value. So, essentially we are going to have sort of a medium red value, a very bright green value added to this and then a very, very dark or low amount of blue inside this color. So if I save this, and preview this in a browser, I can see the color we are getting there. We are getting a green so as I mentioned before, very bright green value, very little in terms of red or blue.
Now, you may have noticed something here. We went ahead and previewed this in the page without defining a color for the paragraph. Now other than just having really bad syntax right here because I didn't pass a value in, basically it's getting the default colors, it's inheriting the default color of the device, in which case it's almost always going to be black. Now let's play around a little bit with the syntax here. Now let's try something a little bit lower. Let's go to an rgb value of (rgb(20%,30%,50%;);). So we are lowering the values of all of those and as I test this color, you can see that we are getting a much darker blue, little less saturated there.
Now I won't sit and tell you that hey I have got some of this percentage values memorized, I do not. But you can't make an educated guess based on the amount of the specific color you are placing in this. Now, the other syntax and this is probably the more common syntax that you are going to see, follows essentially the same script, you type in rgb, and then you have your parenthesis and then inside that, you pass in absolute values that range from 0 to 255 so that gives you the full range of 256 colors available to you, for each color channel in rgb.
So we are going to start with the red value, let's say we pass in 125. If in the green value we passed in let's say 244 and in the blue value, we passed in something like 15. That's going to give us probably a pretty bright green. So if I save this and test it, indeed we get that really bright green color. Now remember, if we want white, all we have to do is type in (255, 255, 255); So you just have to remember that the upper range of the color is 255, the lower range would be zero so if you go in for black it would be 0, 0, 0.
You also have to remember the commas between them, so if I save this and refreshed it. Now we are getting white there. I'm sure by this point that some of you are wondering, hey, can I mix these values, can I come in and say okay I want 10% here and then 255 and 255. Well if I save this and test it, the answer is no, not really. Some browsers do implement that. So some browsers do allow you to mix these colors like this, but does not recommend in practice so, usually stick with one syntax or the other.
I just like hexadecimal notation, the overall syntax is pretty basic but you are also unlikely to memorize a lot of these colors, so you're probably going to find yourself using a tool like Kuler or one of your desktop based tools to let you know what the RGB values for a particular color is. Now we have one more color mode to inspect and that is the HSL color mode and that's one that actually can be a little bit more intuitive in terms of mixing colors together on the fly, so we're going to check that out in the next movie.
Get unlimited access to all courses for just $25/month.Become a member