If you're a web developer, using hexadecimal color codes to style pages is probably familiar to you. In this guide I'm going to walk through how hexadecimals work. With a focus on how you can understand the numbering system and make better color estimations when you're working on projects.

What is the Hexadecimal Numbering System?

Before we can walk through how to understand how hexadecimals work in web applications, it helps to know what the hexadecimal numbering system is. I'm assuming you're already familiar with our standard number system, which looks like this.

Our number system is called a base 10 number system because our numbers can be created by combing any of these 10 numbers.

Hexadecimal numbers work a little bit differently. The hexadecimal numbering system is a base 16 configuration. I say numbering lightly, because as you see, hexadecimals are made up of numbers and letters.

Essentially this means that hexadecimal numbers can be made up of 16 elements instead of the 10 that we're used to.

Why is it Important to Understand Hexadecimals?

Technically you could successfully make it through life without understanding how hexadecimals work. However if are a web developer or designer I highly recommend at least understanding the basics of hexadecimals.

When building out a web application you will most likely need to configure CSS files. As shown here, a CSS file has the potential to be filled with hexadecimal numbers.

These hexadecimal numbers represent different colors on the color spectrum. And because hexadecimals can be used to store large value representations, they are perfect for defining colors in CSS files.

There are a number of hexadecimal color converters on the web which makes hexadecimal knowledge optional. However I personally prefer to understand how the tools I work with function, don't you?

Understanding How Hexadecimals Work

As usual, let's look at a practical example that you would come across in a web application.

Example of Hexadecimals

In this CSS file you'll see a number of spots where we're defining a color for components for a website. Let's compare and contrast 80c0c0 and ff8080. These two color definitions will generate the following color scheme.

Hexadecimal Math

So what exactly are these numbers representing? Let's walk through some hexadecimal math. The first rule to understand is that you read numbers from right to left. This means that the first number in 80c0c0 is actually 0.

Hexadecimal Value Mapping

The next rule to remember is that each hexadecimal element represents a specific value. For example, 8 is equal to 8 but c is equal to 12. Here is a mapping for each hexadecimal number to its respective value.

With this knowledge we can create a breakdown of each value from right to left for 80c0c0.

0 is equal to 0
c is equal to 12
0 is equal to 0
c is equal to c
0 is equal to 0
8 is equal to 8

Base 16 Exponent Values

With our values in place we now need to generate the sequence of 16 exponents. Starting from right to left we begin with 16^0, which equals 1, followed by 16^1, etc. And we'll increment this sequence for each value that we're looking to convert.

Computing the Final Value

Lastly we multiply the value of the hexadecimal element by the exponential value of 16 for that associated placement. And we end by adding each of the items together. Running these calculations will show that the actual value for the hexadecimal number 80c0c0 is 8437952.

Summary

I hope that this has been a helpful guide to understanding how hexadecimals work and that you'll be more comfortable the next time you see them in a CSS file. They aren't a secret code, simply a way to represent large numbers to bring some color to your applications.