Demystifing the HEX

Computer programs are composed of 1s and 0s, something is either on or off, everything else is a composition on top of this concept. This is analogous to how the universe is made up of atoms. Just as we do not see atoms, we do not see the binary representation of data. However, we as web developers do in many cases come quite close to working directly with binary numbers without even knowing it! For example, binary numbers are pleasantly obscured in the wonderful concept of CSS HEX colors; Let’s dig in!

You may be familiar with a few colors in HEX #FFFFFF is white, #000000 is black,
#FF0000 is red and so on. While yes these are “HEX” colors, what does that even mean? What is HEX? HEX is short for HEXadecimal which is a fancy way to say a a unit that represents 16 possible values; In this case using 0 - 9 on the numeric scale and then A - F on the alphabetical scale to represent 16 possible values from [0 - 15].

Scale units: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Value units: 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15

In CSS HEX colors are used to represent RGB (red, green, and blue) colors in a somewhat terse and understandable way. For HEX colors each pair of HEX units represents one color channel, and each color channel has a possible value from 0 to 255

As an example let’s look at the color red #FF0000 , which breaks down to
FF for the red channel with a value of 255
00 for the blue channel with a value of 0
00 for the green channel with a value of 0

The question arises though how does FF equal 255? As we said earlier a single HEX value represents a number from 0 - 15 but what happens when you combine multiple of these HEX characters together?

To start let’s look at a more familiar non-HEX number 253 and show how we can break it up into the digits [2,5,3] and turn it back into the number 253.

The algorithm can be described as

1. take the first $digit (least significant value) 3 [2,5,3],
2. look at the right based $index of the digit in the sequence which would be 0 for 3
3. Raise the base / radix to the power of $index and then multiply that by the $digit.

In the case of 253, we are showing a number with a base of 10. The 3 represents the ones place, the 5 represents the 10s place, and the 2 represents the 100s place. So (3 * 1) + (5 * 10) + (2 * 100) gives us 253.

We can then generalize this math a bit into code like this:

            
function toNumber(digits = [2,5,3], base = 10) {
    let sum = 0;
    for (let i = 0; i < digits.length; i++) { 
        // walk the digits in reverse order
        // 3 … 5 … 2
        // multiple each unit by base to the exponent power
        // digit 2, index of 0 … 10^ 0 === 1
        // digit 5, index of 1 … 10 ^ 1 === 10
        // digit 3, index of 2 … 10 ^ 2 === 100
        sum += digits[digits.length - (i + 1)] * ((Math.pow(base, i)));
    }
    return sum;
}
        
        

We can apply this same working methodology to convert #FD0000 which has a base of 16 to the base 10 number of 253.

[F, D]
(D(13) * 16^0 +
F(15) * 16^1) === 253
            

All of which to say a two-digit HEX encoding of color space gives us 256 possible values for each red, green, and blue channel yielding a color permutation space of 16777216 colors!
Using this new found information we can apply it to generate random colors via a script like this:

// Math.random generates a number from 0 -> 1
const color = ‘#’ + Math.floor((Math.random() * 16777216)).toString(16);

I hope that the next time you encounter a HEX string when changing the background color of a div, or the text on the page that you now feel comfortable explaining what this series of base-16 digits represents 🤓.