1. How to Read the Six Characters in a Web Color Code
To specify a color on a web page, you often use a hash symbol (#) followed by six characters. For example, red is #ff0000 and white is #ffffff [4]. These six characters are read in pairs from left to right. The first pair represents the strength of red, the second pair green, and the third pair blue [4].
So, #ff0000 means "red is at maximum strength, while green and blue are off." This is why the result looks red [4]. At first glance, it seems strange that letters like a to f are mixed in with numbers. However, using uppercase or lowercase letters has the same meaning. To understand this system, we must first look at what those two-character pairs represent and why letters are involved.
2. Why Color Values Go from 0 to 255: The 8-Bit Limit
A "bit" is a single unit of information that can be either 0 or 1. In computer parts, transistors switch between an on state and an off state. Engineers treat "on" as 1 and "off" as 0 [1]. Using just two states is technically easier to build and keeps the signal stable, often because it relies on simple distinctions like high or low voltage [7]. This method is also noted for being resistant to noise [8].
When you combine bits, the number of possibilities doubles with each additional bit. One bit has 2 possibilities, two bits have 4, and so on. With 8 bits, there are 256 possible combinations (2 multiplied by itself 8 times), allowing us to distinguish numbers from 0 to 255 [2]. Color intensity ranges from 0 to 255 because 8 bits are assigned to each color, with 255 being the maximum value [4].
The word "bit" itself comes from shortening the English phrase "binary digit." It is said that John Tukey shortened it in a 1947 memo at Bell Labs, and it was first printed in Claude Shannon’s paper in 1948 [6].
3. How Grouping Binary Digits Leads to Hexadecimal
Long strings of 0s and 1s are hard to read. The maximum value for 8 bits in binary is 11111111. As the number of digits increases, counting without making mistakes becomes difficult. To solve this, we use hexadecimal (base-16) numbers. Hexadecimal groups four binary digits into a single character [3].
Four binary digits can range from 0000 to 1111, which gives us 16 possible values. To write these with just one character each, we need 16 different symbols. Since we only have ten number digits (0-9), we borrow letters from the alphabet for values 10 through 15: A=10, B=11, C=12, D=13, E=14, and F=15 [2].
For example, if you split the binary number 11111111 into groups of four, you get 1111 and 1111. Both equal 15 in decimal, so they are written as F. Together, they become FF. In hexadecimal, FF equals 255 (15 × 16 + 15), which matches the maximum value of 8 bits [2]. The number 256 in decimal is written as 100 in hexadecimal [2]. This convenience—where 8 bits fit perfectly into two hexadecimal digits—is why the system works well for colors.
4. How to Predict a Color by Reading Its Code Two Characters at a Time
Let’s decode #ff0000. The first pair, ff, equals 255, meaning red is at maximum strength. The next two pairs, 00 and 00, mean green and blue are off. Because only the red light is on, we see red [4]. For #ffffff, all three pairs are ff (255), so red, green, and blue are all at maximum strength, creating white [4].
The W3C specification states that 255 corresponds to 100% intensity [4]. For instance, the hexadecimal number 80 equals 128 in decimal (8 × 16 + 0). Since 128 is roughly half of 255, #808080 represents a color where red, green, and blue are all at about half strength. You can predict that this will be a color like the middle ground between black and white. Note that this refers to the numerical value being half, not necessarily that the light intensity is perceived as exactly half by the human eye.
There is also a shorter way to write these codes. If you use three digits like #fff, it is treated the same as #ffffff because each digit is repeated [4]. Similarly, #fb0 becomes #ffbb00. Be careful not to just add zeros; you must duplicate each character.
SAFETY NOTE: When reading a code like #ff0000, split it into (ff, 00, 00). This translates to (255, 0, 0), meaning red is at 100% strength while green and blue are at 0%.
5. Why Hexadecimal Uses the Letters A to F for 10 to 15
The use of letters A through F for values 10 to 15 became widespread in the 1960s. By around 1966, this notation was effectively standard in manuals for the programming language FORTRAN IV [5]. However, it is not clear that IBM "invented" this method; rather, this is when it became common.
A few years later, in 1968, a researcher named Bruce Martin at Brookhaven National Laboratory wrote a letter to an American academic journal. In it, he criticized the choice of A to F as "ridiculous" [5]. He proposed new symbols based on bit patterns instead. However, his proposal did not catch on, and A through F are still used today [5]. This information comes from citations of the letter rather than the original document itself, so we would like to check the original text for the fine details.
6. How to Convert a Number to Hexadecimal with Paper and Pencil
You can practice converting numbers using just paper and a pencil. Pick any number from 0 to 255. Divide it by 16 to find the quotient and the remainder, then convert each into a hexadecimal digit. For example, take the number 200. If you divide 200 by 16, you get 12 with a remainder of 8. Since 12 is C in hexadecimal, 200 becomes C8.
You can check your work by calculating backwards: (12 × 16) + 8 equals 192 + 8, which returns to 200. Once you have the hexadecimal number, think about how much of the maximum value (255) it represents.
Try reading color codes on paper too. Write down #404040, #808080, and #C0C0C0. Convert each pair to decimal: 40 is 64, 80 is 128, and C0 is 192. Since red, green, and blue are all the same number in each code, you can predict that they will be shades of gray. The higher the number, the closer the color is to white.