Explanation of Hex Codes

I mentioned in class today that I might post an explanation of hexadecimal (a.k.a. hex) codes for colors used in Web design.

Hex codes are all combinations of 6 characters (preceded by a # sign in HTML). The characters can either be digits (0-9) or letters from A through F. The letters count as digits also, since hex numbers are not 10-based (like decimal numbers are) but 16-based. A represents 10, B represents 11, and so on until F, which represents 15. So basically in hex codes there are 16 individual digits, representing the numbers 0-15.


If you use combinations of two hex digits, you can create numbers ranging from 0 through 255 (in hex, from 00 through FF). Just use the first one as a "sixteens' digit" (analogous to a "tens' digit" in decimal number operations) and the second one as a "ones' digit". Therefore, to convert two-digit hex numbers to decimal numbers, you multiply the first digit by sixteen, and then add the second digit to the result. This process can also be reversed if you want to convert decimal numbers between 0 and 255 to two-digit hex numbers: you divide the decimal number by 16 and use the quotient as the first digit, and then use the remainder as the second digit.

For example, in the hex number "C5", the first digit, C (which in decimal number terms is twelve), indicates that there are twelve sixteens in the number, and the second digit indicates that there are five ones. Thus, C5 is equal to (12 * 16) + 5, or 197. Similarly, the number "1E" is equal to (1 * 16) + 14, or 30. (Recall that the digit E is equal to fourteen.)

To convert the decimal number 241 to hex form, divide it by sixteen. You will get 15 with a remainder of 1. In hex numbers, 15 has a digit form, which is F. Therefore, when you use the "reverse" process mentioned two paragraphs above (at the end), you find that the hex form of 241 is "F1". (IMPORTANT: Only use this method for numbers between 0 and 255.)


Why did I explain a process that specifically concerns the numbers 0-255 (or 00 - FF in hex)? It was because those numbers directly have to do with the use of hex codes for colors. As I mentioned, hex codes for colors are all 6 characters (i.e., digits) long, not counting the #. These 6 digits are actually 3 two-digit hex numbers put side-by-side. Each two-digit hex number represents the value for each of 3 basic colors - red, green, and blue, in that order - composing the color in question. Every color on a Web page is a certain combination of these three colors, even if there is a value of 0 (none) for one or more of them. For example, pure, bright green has a value of 0 for both red and blue, but a maximum value for green. Pure, bright yellow has maximum values of red and green, but a value of 0 for blue. Black has a value of 0 for all three colors. White has a maximum value for all three. Most colors have some combination of all three, and the color values tend to be lower for darker colors and higher for lighter ones.

In hex color codes, the lowest possible value (none) for a color is 00 (0 in decimal), and the highest or maximum is FF (255 in decimal). Hopefully now you see how all this comes together. 6-digit hex codes are broken down as follows: the first two digits represent the amount in hex form, between 0 and 255 inclusive, of RED in the color; the next two, similarly, represent the amount of GREEN in the color; and the last two represent the amount of BLUE in the color. The range of colors possible using hex codes is known as the range of RGB colors (RGB stands for red, green, blue).


Someone in class today was wondering why the hex numbers for different shades of the same color all looked completely different. The following is an explanation of why that is.

In order for the same basic color (apart from the lightness/darkness) to be preserved, the relative proportions of the component colors (R, G, B) must stay the same. In order for that color to get darker, however, the component colors must go down together (with the proportions constant), and in order for it to get lighter, they must go up together (again with the proportions constant). Think of it varying like this: 4|16|28 --> 2|8|14 --> 1|4|7. Same proportions, different amounts. Since this sort of change generally involves each of the three numbers changing simultaneously every time any change is made to lightness/darkness, the 2-digit values generally all vary together when you even move to a slightly lighter/darker version of the color.


If any clarifications are needed, please ask me.


Here is an easy hex/decimal number converter: http://www.statman.info/conversions/hexadecimal.html