Learn CSS, Manipulating Colors - Haxadecimal Color Values
(Page 4 of 5 )
There are numbers systems that have been used by programmers for a long time, like binary, the decimal system and the hexadecimal system. This article is about CSS (not programming) so I will just briefly explain the hexadecimal system.
The hexadecimal system which has a base of 16 and it uses the numbers 0 to 9 and the letters A, B, C, D, E and F to express values. I know it needs a little explanation if you didn't work with it before, to understand the Hexadecimal system let's take a look at the Decimal system.
The decimal system which we often use has a base of 10. This means that a value represented in the decimal system carries out values from 0 to 9, which is 10 digits. Also it carres values multiplied by 10 to the next decimal place. In other words, the value 23 in the decimal system has the value 3 in the first place because this place carries values from 0 to 9. The second place has the value 2, meaning twenty and also meaning 2 times of the maximum value of the previous place.
The hexadecimal system uses this notation, but instead of the 10 base it uses 16. If we have a hexadecimal value of 11, it doesn't mean eleven because it uses the base 16 and not the base 10. Actually, the hexadecimal value 11 means 17 in the decimal system let's see why that is. The first value is 1, and the first place carries values from 0 to 15 (0 to 9 as numbers and it uses A as 10, B as 11, C as 12, D as 13, E as 14 and F as 15). The value 1 in the first place means 1. The value 1 in the second place means 16, to understand why, think about the decimal system; the value 11 for example, the second place carries 10s, so we have 1 ten and if it's 3 then we have 2 tens which means 30. Apply the same rule to the Hexadecimal system so its base is 16 and 1 in the second place means 16, and if it was 2 then it means 32 in the decimal system (16 * 2 = 32).
Ok what about the number 111 in the Hexadecimal system? Apply the same rule; the first place is 1, the second place is 16, and the third place is 256 (16 * 16 = 256, much like 10 * 10 = 100 in decimal). So, 111 means 273 in the decimal system.
The value FF in Hexadecimal means that the first place carry the maximum value, which is 15 and the second place carry out the maximum value of the first place which is 15 multiplied by the base which is 16. So 240 + 15 = 255 in the decimal system.
You can use the Hexadecimal value so instead of writing RGB values like (255,255,255) you can write it like #FFFFFF and it's a better concise form. Note that we concatenate (put the values together in one word or string) the 3 color channels into one value. Every 2 digits represent the color channel because the maximum decimal value 255 can be represented in hexadecimal as FF so we have 2 digits only. So the above example can be written like this:
body
{
font-family: Tahoma;
}
.TheRed
{
color: #FF0000;
}
.TheGreen
{
color: #00FF00;
}
.TheBlue
{
color: #0000FF;
}
.TheYellow
{
color: #FFFF00;
}
.TheCyan
{
color: #00FFFF;
}
.TheMagenta
{
color: #FF00FF;
}
.TheBlack
{
color: #000000;
}
There's another form to writing the hexadecimal value if each color channel has the same digits. For example, the color black which is represented in Hexadecimal value as #000000, it has (00 00 00) repeated digits for each channel so we can write it as #000, which takes each digit and repeats it to get the value. So, a color like #334455 can be written as #345. A color that doesn't have repeated digits can't use this short form.
Next: CSS Comments >>
More Style Sheets Articles
More By Michael Youssef
/ 18 
