Hex colors, how do they work?

We have all seen them before, they look a bit like this: #ff0000. That’s the hex code for the color red. However, what exactly does it mean?

Hexadecimal

Most of us have heard of binary before, but what about hexadecimal? Hexadecimal, sometimes known as ‘hex’ or ‘base 16’ is an alternative to binary, which is ‘base 2’. Hexadecimal can be used to store numbers. So how does it work?

The Basics

There are 16 possible characters in hexadecimal, they include 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. Each character represents an integer from zero to fifteen.

So now that we know what each of the characters mean, let’s start converting integers into hexadecimal. So let’s convert the number 2,087 into hexadecimal.

Some Examples

So let’s first start off by dividing 2,087 by 16. That should get us a result of 130 with a remainder of 7. According to our chart from above, 7 is also ‘7’ in hexadecimal, so now we need to set ‘7’ aside and divide 130 by 16. Our answer is 8 with a remainder of 2. On our chart, 2 is ‘2’, so set that to the side and we need to divide 8 by 16. This will get us 0 with a remainder of 8, which translate to ‘8’ in hex. So we have our 3 results which are 7, 2 and 8. We will put them together in reverse order to get our hexadecimal value which means that 2,087 is ‘0x827’. 0x is there to symbolize that it is a hex value.

Let’s try another, this time we will try the number 255. First we need to divide 255 by 16. That will get us 15 with a remainder of 15. Now we take the remainder and line it up to our chart. 15 translate to ‘F’, so we can save ‘F’ for later. Now we need to divide 15 by 16, which will get us 0 with a remainder of 15. We know that 15 translates to ‘F’, which makes our result ‘0xFF’.

Color Codes

Hex color codes usually look something like this: #ff0000, but what does this mean? Well, let’s break it down!

RGB

RGB stands for Red, Green, and Blue. These colors are the primary colors of light. An RBG value might look like this: rgb(255, 0, 0). At first this may not look like much, but if we take a closer look, the first number represents red, second number represents green, and the third number represents blue. The values in those spots can range anywhere from 0, all the way up to 255. Let’s try to make some colors!

With light, red and blue makes magenta, so let’s try to make a magenta color with RGB. So to get a bright magenta color, let’s set both blue and red to their maximum value of 255. So we have: rgb(255, 0, 255), which gives us a color like this:

rgb(255, 0, 255)

But what if we wanted it to be a bit lighter, like a more pinkish color? How do we do that? White in RBG is rgb(255, 255, 255), all the colors combined. So how about we try changing rgb(255, 0, 255) to rgb(255, 150, 255)? We get the result of a light pink.

rgb(255, 150, 255)

So how about a darker color? So we can have a dark pink? In RGB, black is rgb(0, 0, 0), so let’s bring our values closer to that. So let’s try rgb(150, 0, 150). With that, I got this:

rgb(150, 0, 150)Hex Colors

Now that we have a good understanding of RGB, we can understand how hex colors work. A hex color will look something like this, #ff0000. But what does this mean? Let’s combine what we know about RBG and Hexadecimal to figure it out. We know that 0xFF is 255 in hexadecimal, and 255 is the maximum value for RGB. So if we see what #ff0000 is, we can see that it is a bright red color:

#ff0000

So what we can find out is that #ff0000 translate to rgb(255, 0, 0). So let’s try to get our magenta color again, we know that it is rgb(255, 0, 255), so let’s see what #ff00ff gets us.

#ff00ff

Awesome! We got our magenta color, now let’s try to get our lighter color again, but this time in hex. Our light magenta in RGB is rgb(255, 150, 255), so if we convert 150 into hex, 150 divided by 16 is 9 with a remainder of 6. 9 divided by 16 is 0 with a remainder of 9, making our hexadecimal value ‘0x96’. The result is our hex color of #ff96ff, and when we see the result of that, we get our light magenta.

#ff96ff

Conclusion

After reading this, you are able to understand how the hex colors work, how the first two characters are for the red, the next two for green, and the next two for blue for RGB colors. I hope this article taught you something new, whether it be hex colors, RGB, or base16.

If you enjoyed this article, please follow me on other platforms of social media below:

• Danny Tran (@hoogleyb) * Instagram photos and videos
• Danny Tran (@HoogleyB) | Twitter

If you find there is anything wrong with the article, mention it below in the comments and I’ll fix it!

Happy Coding!

Hex colors, how do they work? was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.