9 October 2024

Understanding Hex Color Codes

Have you ever had to customize the color of something on the web, then had to enter #FF0000 to make that item red?

If you’ve ever been curious to understand how Hexadecimal color settings work, or just wanted to use them with a bit more confidence, this article will shed some light on that mysterious color value.

Every color you see on screen is made up of three tiny lights sitting in close proximity to create a pixel. Each of these lights is a different color, one red, one green, and one blue. Each of these components blend together, in different intensities, to make all the colors you see on the screen. 

Intensity relates to how much red, green, or blue you add to make a color.
Think of it like a dimmer switch for a lightbulb. When the light is least intense, the light is off (or black). When it’s most intense, the light is all the way on. 

1, 2, 3, 4, 5, …, 252, 253, 254, 255, 256

To get a wide range of colors, each red, green, and blue light has 256 levels of intensity. This gives a wide variety of color tones. 

0, 1, 2, 3, 4, 5, …, 251, 252, 253, 254, 255

However, we need to adjust this 256 degrees of intensity range to start at all the way off (black). So, we adjust our range to start at zero, ending at 255. 

255, 0, 0 = #FF0000

To represent colors using 0-255, we separate the red, green, and blue values by commas. 
Notice the red value above and look at the differences between the values. Each of these values could be 1, 2, or 3 digits. They have to be separated by commas in order to make sense. The value 25500 without the commas could mean:

That’s not the color we intended. Using commas and an irregular number of decimal places makes programming or scripting error prone. Hexadecimal makes this better.

256 = 16 x 16

256 is a really handy number. It’s one that has an exact square root, and the square root of 265 is 16. 16 on its own may not seem too handy, but that’s only because we are trained to think of numbers in a base 10 system. 

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

With these 10 familiar numbers, we can create any value by combining these numbers in different ways. But, what if there were a different number system, one that had 16 numbers in it, or a base 16 number system? 

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

With a hexadecimal system, we get 16 digits instead of 10. If we reflect on our red hexadecimal color, the red value is the first two places, green the second two places, and blue are the last two places.

#FF0000

Each of these single character values can hold 16 pieces of information, instead of the 10 we are accustomed to. To convert the red value to a number, we might find easier to understand, we can convert this back into 255. This next step requires a little math, but it’s not math we would regularly use. As you work with this system of hexadecimal, you quickly get familiar with how to adjust these values to get the desired result. 

A brief math interlude

Let’s try an example first in our familiar base 10 system. How do we evaluate the number 14? Starting out with the number in the 10’s column (1), it is 10 times the value of the number in the ones column (4). So if we evaluate this number, we would say (1×10) + 4, which gives us 14.

14 = 

(1 x 10) + 4

Looking at the number FF, the F on the left is 16 times the value of the digit on the right. If F equals 15, that gives up (15 x 16) + 15.

FF = (F x 16) + F = 

(15 x 16) + 15 = (240) + 15 = 255

That’s red set to full intensity. In practical terms, it’s good to understand how this works, but usually we keep in mind that A is bigger than 9, and that C is bigger than A, and F is the biggest single value character we have. 


Once we understand how one of the colors works, we can see how they combine together to make all the colors we see on a screen. Each pixel (or group of red, green, and blue lights) varies the intensity of the three lights that make it up to render all the colors we see. 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.