Learn CSS, Manipulating Colors - Using RGB Color Values
(Page 3 of 5 )
You might know that the light spectrum consists of waves of energy. At one side of the spectrum is the color red, and at the other side is blue. Between them, there's green. Actually, this Red, Green, Blue (RGB) concept is very scientific and comes from outside the scope of CSS. It's enough to say that combining these colors can produce millions of colors. Computer monitors use RGB combinations to produce the colors you see in the screen. For example, when you mix the blue and the green colors you get cyan.
Let's use RGB combinations to get some colors. To use the CSS RGB color system you have 2 options: a percentage or a value range from 0 to 255. Uusing this range we can have millions of colors due to the fact that we have color combinations of 256 multiplied by 256 multiplied by 256. Note that we need to mix the colors to get a specific color so we use the following syntax to get the color:
rgb(the red color value, the green color value, the blue color value)
Let's take an example, copy the following CSS code into a file and save it as colors.css and copy the HTML code too and save it as colorsTest.html
body
{
font-family: Tahoma;
}
.TheRed
{
color: rgb(255,0,0);
}
.TheGreen
{
color: rgb(0,255,0);
}
.TheBlue
{
color: rgb(0,0,255);
}
.TheYellow
{
color: rgb(255,255,0);
}
.TheCyan
{
color: rgb(0,255,255);
}
.TheMagenta
{
color: rgb(255,0,255);
}
.TheBlack
{
color: rgb(0,0,0);
}
And here's the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Colors.css" type="text/css">
<title>Colors with CSS</title>
</head>
<body>
<h4 class="TheRed">This is a red text</h4>
<h4 class="TheGreen">This is a green text</h4>
<h4 class="TheBlue">This is a blue text</h4>
<h4 class="TheYellow">This is a yellow text</h4>
<h4 class="TheCyan">This is a cyan text</h4>
<h4 class="TheMagenta">This is a magenta text</h4>
<h4 class="TheBlack">This is a black text</h4>
</body>
</html>
You will get the following result.
The first thing that you have to notice is the new css syntax, which is using a dot before the selector. I will talk about selectors in great detail in the next 2 articles, but for now just understand that this syntax is related to the class attribute in HTML. The first class selector (.TheRed Selector) set the value rgb(255,0,0), meaning it has a lot of red but no green or blue. With the other colors generated through combinations of multiple colors, the rule is different because we have to mix the colors to produce them. To produce yellow, you need to mix red and green like this: rgb(255,255,0);, leaving a zero in the blue channel.
We can write the RGB values using percentage instead of integer numbers, but you must use a percentage in all the 3 channels. In other words, you can't write an RGB value like this rgb(255, 40%, 90%). The next CSS code produces the same colors as the above RGB integer numbers values
body
{
font-family: Tahoma;
}
.TheRed
{
color: rgb(100%,0%,0%);
}
.TheGreen
{
color: rgb(0%,100%,0%);
}
.TheBlue
{
color: rgb(0%,0%,100%);
}
.TheYellow
{
color: rgb(100%,100%,0%);
}
.TheCyan
{
color: rgb(0%,100%,100%);
}
.TheMagenta
{
color: rgb(100%,0%,100%);
}
.TheBlack
{
color: rgb(0%,0%,0%);
}
Next: Haxadecimal Color Values >>
More Style Sheets Articles
More By Michael Youssef
/ 16 
