[Tutorial] Hex colors

[jamey]

Since this is the design section I want to make a short tutorial about Hex colors. Most of you might know about hex but I am sure some don't and this is a great way to find out more on this subject. Just follow this easy tutorial and you'll be the one doing the hexes :P .

Hex is an abbreviation for Hexadecimal and it has to do with the number system. Decimal for example has a base of 10 ( from 0 to 9) whereas hexadecimal has a base of 16 (from 0 to F)

To give a short example to see how these two number systems translate from one to another
(the example below is read like this: the number on line one (base 10) has a corresponding number in base 16 right below it.)

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F

and this goes on. To do a quick base transformation you can use the scientific calculator from windows. Now you know why colors like #15F3AD or #7FAE12 are called HEX colors.

But to understand why a color has that form you must first understand that a monitor displays the light as 3 separate primary beam of lights. These hit the screen at the same time and combined they give the color you see on each pixel on your screen. Unless you have a crystal display screen this is how things work.

The three primary colors that each color is composed of are RED, GREEN and BLUE. Each color can be a sum of those three, thus resulting the RGB format. Each color is represented from 00 to FF (from the weakest color to the strongest)

If you want to get the color yellow for example you need to combine the color green with the color red. RGB -> FF FF 00 this means #FFFF00 . This means the pixel has high intensity red and high intensity green which combined result in yellow.

Now that you are somehow more familiar with this system you should be able to manually modify a color to make it lighter or darker or give it a specific shade.

[Mr Justin]

Great tutorial jamey.

[Sofia22]

Hey!!
Great explanation. I studied the numerational systems, (binary, octal, and hex)
and we had to make fast operations with hex numbers. Is nice that somebody explains the reason of the colors code.
Thank you.

[Dragonizer]

Great explanation and thanks for the info but its alot easier to get a colour picker, like this one:
Absolute Color Picker off my freeware site.