non-frames link to top of chapter

Finding Hexadecimal Color Codes

HyperText Markup Language represents each color by a distinct triad of two-digit hexadecimal numbers, i.e. "11FF99". So in order to understand HTML color-codes, you first have to understand the hexadecimal numbering system.

Hexadecimal is a numerical system with a base of 16. This means there are sixteen characters instead of ten: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. That's like counting from 0 to 15, but replacing 10-15 with A-F. If you counted past F, you would roll over to the next digit, so that decimal sixteen (16d) would equal hexidecimal 10 (10h). Then you'd count 11, 12, 13, 14, all the way up to 1F, and then roll over to 20 (32 in decimal)... and so on.

In HTML, three hex numbers of two digits each (00-FF) define the brightness of each of your primary colors: red, green, and blue. Remember, you're not mixing pigment. When you paint, certainly the primary colors are yellow, red, and blue, but when you blend light on a computer screen things work a little differently. You have to make yellow now. You make it with red and green.

The background of this page is "006633". That's no red at all, a mid-low amount of green, and a teensy bit of blue to keep the green from being too bright. The text color has all the red and green you can stuff in it, and somewhat less blue -- "FFFF99" -- resulting in a light yellow. A full amount of all three colors, "FFFFFF", will give you white; a lack of any color, "000000", will result in black.

There are several ways of arriving at a desired color. If you have a lot of patience and/or familiarity with the red-green-blue system, you can just play around with the numbers. You can also visit a page like this one for starter ideas.

But if you need to take a background color into a program like Adobe Photoshop or some such so that you can create an image to match it, or if you want to make the background of your page match the image, you may need to convert between hexidecimal and decimal representations of that color. For such cases, I offer the following formulae.

This is probably more than you'll ever need to know. Being unable to find one ready-made, I sort of reinvented to wheel and came up with universal formulae for converting between any two base systems. They can be used for hexadecimal to decimal, decimal to binary, binary to octal - whatever. You can use either formula in any case; it depends on which base you find easiest to calculate in. The suggestions below assume that most of us prefer the decimal system, but I dunno, maybe you think in octal.

If the following is too geeky for you, just page down. I've got shortcuts for those of you who don't want to do the math.

Conversion by Multiplication
Use TARGET base for calculations. (Useful for converting base 16 to base 10.)

Formula:

C_t = D_nBⁿ + D_n-1B^n-1 + D_n-2B^n-2 + ... + D₀B⁰

where C_t = "converted-to", or TARGET number;
C_f = "convert-from" or GIVEN number;
B = base of C_f;
D_n = digit of C_f in the Bⁿ place,
so that digits of C_f are D_n, D_n-1, D_n-2, ... D₀.

First, I probably need to untangle all those "D_n" and "Bⁿ" things for you.

We'll look at the decimal system first. You're probably used to talking about "ones" digits, "tens" digits, and "hundreds" digits, right? If I gave you the number 42957, you could tell me that there's a 9 in the hundreds place, a 7 in the ones place, and so on. But what if I gave you the hexidecimal number 42E5F? It would be inaccurate to say that E was in the hundreds place, because that digit does not represent hundreds; it represents blocks of 256.

This becomes easier if you think about digit places in terms of exponents. In the decimal or base 10 system, when we talk about a digit being in the hundreds place, we're really saying that the digit stands for blocks of 10². The ones place is better thought of as the 10⁰ place (any number raised to the exponent of zero equals 1).

In the hexidecimal or base 16 system, the "ones" place is really 16⁰. Instead of a "tens" place, you'll have digits in the "sixteens" place, or 16¹. Then you'd have the 16² place, which counts blocks of two hundred and fifty-six.

THEREFORE, each digit of a number in the base "B" system can be described by an exponent of B.

Now we're ready to use the formula.

Given that C_f = 7E3 h (hexidecimal, base 16),
what is C_t in decimal (base 10)?

C_t = D_nBⁿ + D_n-1B^n-1 + D_n-2B^n-2 + ... + D₀B⁰

C_t = D₂B² + D₁B¹ + D₀B⁰
C_f is a three-digit number; notice that "n" will always be one less than the amount of digits in C_f.

C_t = (7 x 16²) + (E x 16¹) + (3 x 16⁰)
C_t = (7 x 256) + (14 x 16) + (3 x 1)
C_t = 2019

(Formula assumes that you can handle single digits, and can for instance figure out that Eh = 14d without too much trouble.)

SUMMARY: Since each digit counts blocks of Bⁿ, 7E3 can be rephrased as 7x16² + 14x16¹ + 3x16⁰. And so we have the Conversion by Multiplication formula.

Still with me? Let's try the second formula. It's a little less intuitive, but if you re-read it a few times you'll find its the exact opposite of the first.

Conversion by Division
Using GIVEN base for calculations. (Handy for converting from decimal to hexidecimal.)

Digits of C_t will be D_n, D_n-1, D_n-2, ... D_o,
arrived at thus:

C_f / Bⁿ = D_n + R_n
R_n / B^n-1 = D_n-1 + R_n-1
R_n-1 / B^n-2 = D_n-2 + R_n-2
...
R / B⁰ = D₀ + 0

where B = base of C_t ("convert-to" or TARGET number);
Bⁿ = highest power of B that will divide into C_f ("convert-from" or GIVEN number)
R = remainder
and D_n = digit of C_t in Bⁿ place.

So if you had a decimal number of 999, and you wanted to convert it to hexadecimal using this formula, here's what you'd do.

The highest power of 16 that can divide into 999 is 16², or 256. So right from the beginning you know that your solution will have three digits: 16², 16¹, and 16⁰. You also know your first calculation will look like this:

999 / 256 = 3 + R231 (a remainder of 231)

Now you know your first hexadecimal digit will be 3 -- in other words, there are three blocks of 16² in the decimal number 999.

Next you'd divide your remainder by 16¹:

231 / 16 = 14 + R7

There are fourteen blocks of 16¹ in the decimal number 231, so your second digit will be E, the hexadecimal rendering of 14d.

Lastly, you would divide that remainder by 16⁰, but since 16⁰ = 1, and anything divided by 1 results in itself, you might as well not bother. Your final, "ones" place digit will be 7.

C_t = 3E7

If the foregoing gobbledygook just doesn't seem worth it, you can try something else: