How are hexadecimal color codes formed?

Hexadecimal, or hex, is a number system that uses Base-16. Number bases are numeral systems with a specific number of units or unique symbols representing a particular positional value. The most common number base is the Base-10 or the decimal system.

The Decimal system is the numbers from 0-9 that we use to count every day. In fact, we sometimes refer to our ten fingers in place of the 0-9 digits. If you wanted to understand the Hexadecimal system, it is easier to try imagining you have 16 fingers instead of ten.

Now that you have 16 fingers, you can count in Base-16, but the existing digits are only ten symbols from 0-9. We still need six more numbers! We will call the remaining six characters A, B, C, D, E, and F. In the Hexadecimal system, the number 10 becomes #A, number 11 becomes #B, number 12 becomes #C until number 16 becomes #F.

You may ask, why do computers use #A when it can use number 10 instead? There is a long history of that.

History of Hex

Long ago, humans developed the decimal system at Base-10. It is easier to keep track of things because our fingers make counting “handy” *no pun intended*. However, this limited system does not work well with modern computers.

The computers instead use the binary system using only 1 and 0 to represent data. The problem with binaries is that they are not understandable to humans. To bridge the knowledge gap, computer programmers established the hexadecimal language to simplify binary codes.

Hex becomes a great way to compress large chunks of data. Computer programmers can put four separate information in only one hex digit.

For example, the decimal 39,321 contains four unique symbols in five different positions. If you translate the decimal into binary, it will become 1001 1001 1001 1001. Translating it to either the decimal or binary to hexadecimal will give you 9999. Using 9999 is a more straightforward representation of both 1001 1001 1001 10001 and 39,321 to help programmers encode as much data with less confusion.

Maybe you are wondering how on earth is the decimal 39,321 equates to the hexadecimal 9999.

Rectangular abstract colors pattern

Hex Conversion

To convert number to hexadecimal, we start looking in the number 39,321. We need to find the largest power of 16 that is less than 39,321. That would be 3 (16^3 = 4096 whereas, 16^4= 65,536). Now, divide 39,321 to 4096. The answer is 9, with a remainder of 2,457. The first digit of the hexadecimal will be 9. Moving on, we will then find the largest power of 16 that will be less than the remainder 2,457. That would be 2 (16^2 = 256). Now, dividing 2,457 with 256 will give us a quotient of 9 with a remainder of 153. The second quotient 9 will be the second hexadecimal. Do you see the pattern?

Follow the process: Find the largest power of 16 with the remainder and divide it to that the number you found. The quotient will be your next hexadecimal. The last remaining digit that is not divisible by 16 will be tack to the end of the three quotients. Did you get 9999 after solving?

Here comes the million-dollar question: How are hexadecimal color codes formed? The truth is, it is not different from the hex conversion we did earlier.

Hex Color Codes

A Hex color is a six-digit combination of numbers and letters formed by a mixture of red, green, and blue (RGB). A Hex color code is a shorthand value of RGB values that are usually used in HTML and other computing applications to represent colors. Each RGB values are encoded from number 0 (no color) to 255 (brightest color).

Remember, all colors have corresponding RGB values. For example, the color red has an RGB value of (255,0,0). Notice that G and B values are both zero. This is because the color belongs to the red family. For every hue in each of the three families, there is a value represented to it. The values from each family are universal and which are determined by the sliding scale.

How about other colors that belong to two or three families? We will use the color yellow as an example. We know that red plus green equals yellow, right? Therefore, the RGB value of yellow becomes (255,255,0).

To convert this to hex, note that the six-digit combination code will come from this pattern: RRGGBB. We now have to convert each RGB values individually.

Red RGB is (255,0,0). Take the first number 266 and divide it by 16. We now have 15, which is represented by an #F in hexadecimal. The remainder 15, will be represented as an #F as well. Since G and B are both zeroes, we will have to tack its value in the end. Now we have the hex code #FF0000 for red. Follow this method to see if you will get #FFFF00 for yellow.