Learning Hexadecimal and Color Codes

We have all heard the crazy word "hexadecimal" used in conjunction with computers. Unfortunately we are a Base-10 race of people, and even understanding binary (Base-2) is tough enough. But Base-16? Gimme a break!

When writing or modifying scripts for stationery we need to know how to use and state values in hexadecimal, as it's the method generally used for defining text color, background color, and other color in your stationery post. And if you want to lift a script, it might be nice to be able to look at a "hexadecimal triplet color value", and tell right off about what shade it might be. Let's figure this out.

We all know what counting by 10s is all about. When you get to the number 9, you just roll a 1 over to the left of it and make the 9 a 0. Well, the same rollover concept is applied when counting with Base-16, or any other Base-X method of counting. With Base-16 though, we have some extra numbers to account for because we don't do our rollover until our units count goes past 15.

We must devise new symbols for the digits 10, 11, 12, 13, 14, and 15. Years ago, arbitrarily, the letters A, B, C, D, E, and F were used to represent them.

So, here are the numbers we use to represent counting in Base-16:

 0 (count 0)
 1 (count 1)
 2 (count 2)
 3 (count 3)
 4 (count 4)
 5 (count 5)
 6 (count 6)
 7 (count 7)
 8 (count 8)
 9 (count 9)
 A (count 10)
 B (count 11)
 C (count 12)
 D (count 13)
 E (count 14)
 F (count 15)
10 (count 16)
  
11 (count 17)
12 (count 18)
13 (count 19)
14 (count 20)
15 (count 21)
16 (count 22)
17 (count 23)
18 (count 24)
19 (count 25)
1A (count 26)
1B (count 27)
1C (count 28)
1D (count 29)
1E (count 30)
1F (count 31)
20 (count 32)
  
21 (count 33)
22 (count 34)
23 (count 35)
24 (count 36)
25 (count 37)
26 (count 38)
27 (count 39)
28 (count 40)
29 (count 41)
2A (count 42)
2B (count 43)
2C (count 44)
2D (count 45)
2E (count 46)
2F (count 47)
30 (count 48)
and on....

and on....

and on....

Notice how each time we get to F (15) we roll over a 1 (add a 1) to the left column.

Why is there such a crazy number system as hexadecimal? Well, back in the early days of computing, it was a convenient way to group binary bits together so you wouldn't have to shout across the room to your co-worker, "1001101101110101"! You can take that binary number and divide it up into groups of four as such:
1001 1011 0111 0101   or, stated hexadecimally,
   9    B    7    5 
and then shout, "No, it's 9B75, you idiot!"

What we have here are shades of the Binary-Coded Decimal Clock I did sometime ago. If you will look at the weights of the binary digits in the first number group you will see what I mean. 1001 in binary is equal to 9 in decimal. The binary number positions are 8,4,2,1 so, 1001 equals 8 _ _ 1, which totaled together equals 9. This is our legacy from the 1950s and 60s.

So what does color:#FFA500 mean anyway? Screen colors are represented by hexadecimal triplet values, which is what color:#FFA500 is. The color components red, green, and blue are defined by the three pairs of hexadecimal digits FF, A5, and 00.

FF = the red component
A5 = the green component
00 = the blue component
This is the representation for the color orange. The values for each color component can range from 00 (00 = no luminosity) to FF (255 in decimal = maximum luminosity). So, as you can see, we have lots of red (the maximum amount), a lesser amount of green (A5 = 165 in decimal), and no blue. If you know the hexadecimal way of doing things, on casual inspection this would be pretty close to orange. Here are two other examples:

color:#C0C0C0
C0 = the red component
C0 = the green component
C0 = the blue component
We have a fair amount of each color here, and all in equal amounts (C0 = 192 in decimal). The color is known as silver in the charts.

color:#FFFF00
FF = the red component
FF = the green component
00 = the blue component
We have maximum amounts of red and green here, and they are equal (FF = 255 in decimal). We have zero blue. Red and green combined in equal amounts makes yellow.

Some other color values to ponder:
color:#FFFFFF = white
color:#000000 = black
color:#00FFFF = cyan (a teal)
color:#FFFFF0 = pale yellow
color:#008000 = dark green
So there you have it - now you can count in "hex" like the geeks do. You will be a bit twiddler yet. And hopefully figuring out color notation will be a bit easier too.

But what happens when you count from 255 to 256 in hex?

Why, it rolls over from FF to 100, of course!