We have all seen them before, they look a bit like this: . That’s the hex code for the color red. However, what exactly does it mean? #ff0000 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. 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 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 in hexadecimal, so now we need to set aside and divide 130 by 16. Our answer is 8 with a remainder of 2. On our chart, 2 is , 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 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 . 0x is there to symbolize that it is a hex value. ‘7’ ‘7’ ‘2’ ‘8’ ‘0x827’ 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 , so we can save 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 , which makes our result . ‘F’ ‘F’ ‘F’ ‘0xFF’ Color Codes Hex color codes usually look something like this: , but what does this mean? Well, let’s break it down! #ff0000 RGB RGB stands for Red, Green, and Blue. These colors are the primary colors of light. An RBG value might look like this: . 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! rgb(255, 0, 0) 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: , which gives us a color like this: rgb(255, 0, 255) 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 , all the colors combined. So how about we try changing to ? We get the result of a light pink. rgb(255, 255, 255) rgb(255, 0, 255) rgb(255, 150, 255) rgb(255, 150, 255) So how about a darker color? So we can have a dark pink? In RGB, black is , so let’s bring our values closer to that. So let’s try . With that, I got this: rgb(0, 0, 0) rgb(150, 0, 150) 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, . 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. If we see what #ff0000 is, we can see that it is a bright red color: #ff0000 #ff0000 What we can find out is that translate to . Let’s try to get our magenta color again, we know that it is , so let’s see what gets us. #ff0000 rgb(255, 0, 0) rgb(255, 0, 255) #ff00ff #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 . The result is our hex color of #ff96ff, and when we see the result of that, we get our light magenta. ‘0x96’ #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: _335 Followers, 115 Following, 116 Posts - See Instagram photos and videos from Danny Tran (@hoogleyb)_www.instagram.com Danny Tran (@hoogleyb) * Instagram photos and videos _The latest Tweets from Danny Tran (@HoogleyB). I'm proud to say I'm a senior web developer, but I'm more proud to say…_twitter.com 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!
