Featuring Color Stripes by Hello Mart
Many of you have likely used HEX color codes at some point in your work life. We use HEX codes to define colors digitally across the websites and apps that we create, but how many of you have stopped and thought about what those random-looking numbers and letters actually mean? I must admit, while I feel very familiar with HEX codes myself, to the point where I feel like I might even recognize a good number of colors, I never actually took the time to investigate what these codes actually mean. Is it possible to make sense of HEX codes and eventually learn to read them?
The short answer is yes! After a little bit of research, it became clear that HEX codes are not quite as mysterious as I thought, and with a little bit of decoding, you can easily learn how to read HEX codes or at least be able to make a very good educated guess as to what color a code might be.
What is a HEX Color Code?
The most basic explanation of a HEX code is that it is a representation of how much Red, Green, and Blue exist in color. A HEX is a 6 digit sequence. The first 2 digits tell us how much Red is used, the next two digits tell us how much Green there is, and you guessed it, the last 2 digits relate to how much Blue is in the mix.
With this in mind, let’s look at a quick example to visualize this before moving on: #000000 Is a well-known HEX code that shows as Black. As you can see, there are completely Zero Red, Zero Green, and Zero Blue values, so no color at all is there – which gives us Black. This is a fairly easy one to read, but of course, it does get a little more complicated…
Base 16
Before we go any further, it’s important to note that HEX codes use a Base-16 numeral system. So rather than counting from 0 through to 10 like we are used to, Base-16 values are displayed 0 through 16. In this system, numbers 0-9 are numerical, and letters A, B, C, D, E, and F are used for values from 10 to 15 where A=10, B=11, C=12, D=13, E=14 F=15.
Using Base-16 allows for any number from 0-255 to be displayed in just two digits (This is important as each of our Red, Green, and Blue values only have 2 digits of space in our HEX codes.) In total, there are 256 total combinations, or 16*16, but 0 itself takes up this extra space, so 255 remains our highest value.
There are some important instructions to remember when it comes to displaying Base-16 numbers 0-255 in just two digits:
- You always need to multiply the first number by 16.
- You multiply the second number by 1.
- Add these totals together to get your final value.
Using these rules, we can see that the highest value possible in just two digits would be “FF”or 255. To get this, we multiply the first F (or 15) by 16, and then Multiply the second F (or 15) by 1 and then add these two together: (15 x 16) + (15 x 1) = 255.
0 to 255
Moving back to our HEX codes, we know that 0 means no color at all, and we know that our maximum value 255 would mean full color, so the higher the value in the Red, Green, or Blue positions, the more of that color there is.
Red is shown as #FF0000 – Or, in other words, 255 Red, 0 Green, and 0 Blue.
Green would be #00FF00 – Or, in other words, 0 Red, 255 Green, and 0 Blue.
Blue would be shown as #0000FF – In other words, 0 Red, 0 Green, and 255 Blue.
Now that we know what values we are looking out for and which order these values relate to which color in our HEX values, we can start to look at some more difficult HEX codes to attempt to read and examine their color.
RGB Color & Additive Blends
Being able to read a HEX code properly requires good knowledge of how RGB colors mix and blend. Simply reading the values is one thing that can be figured out and explained with math, but being able to actually visualize how these colors might actually look from the HEX code alone will require a good understanding of color theory and the RGB color model.
One important note when it comes to RGB colors is that the color blends are Additive – which means we can create white by combining all three RGB values as RGB essentially produces or emits light with color. This is not possible with other models like CMY as other models are usually subtractive in nature, which means blending primary colors usually ends up with darker colors.
With this knowledge, we now know that mixing colors in HEX will not only increase their color vibrance with higher RGB values but also their light intensity–larger values, when blended, lead to lighter colors, and smaller values appear darker.
We already spoke about the lowest values of #000000 before representing Black. Well, with our new understanding of additive blending, we should easily see that #FFFFFF would mean a full Red, full Green, and full Blue color mix, and with what we now know about additive blending, this would result in a pure bright White.
Let’s take another look at some more blends. If we take our solid Blue values from before and mix them with our solid Red values, we get #FF00FF or Magenta. As the Blue and Red values are mixed, they also keep their brightness, so rather than a deeper, darker purple that you might expect from mixing red and blue with crayons on a piece of paper, for example, we end up with a more vibrant looking Magenta.
If we wanted to turn this Magenta color code into a darker purple color, all we would need to do would be to lower our Red and Blue values from their fullest and most vibrant value of 225, down to something like 112 – or 7A (7×16) + (10×1) in Base-16. This gives us #7A007A. In this case, we still have no Green values (reflected as 00), but as we are working with smaller values of Red and Blue, we get a slightly less colorful and darker purple color compared to the vibrant Magenta that we started with.
So now we can see how to get information about color saturation levels and vibrance within a HEX color code. This is fairly easy to see with my simple examples above, but once the code values become more complicated, it will inevitably take a little more practice, imagination, and knowledge to start to read and accurately picture the outcome of HEX color blends.
Hopefully, this little introduction to HEX color codes should give you enough of an understanding for you to start experimenting with HEX color values yourself so that you can better understand the relationship between the RGB values. You now at least be able to break down a HEX color code into its key components and get a general sense just by looking at the values alone which way a HEX code is leaning, and then apply some quick math if you want to find out the real RGB values.
Summary – Reading HEX Color Codes
In summary, we need to remember that HEX color codes are made up of 2 Red values, 2 Green values, and 2 Blue values. We use Base-16 to determine those values, from 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15). We always multiply the first number of each pair by 16, then add the two numbers together to get our R, G, or B value. The closer that number is to 255, the brighter and more saturated it is.
The closer these values are to 0, the darker and less colorful it is. Color blends in RGB are additive, so mixing different colors with high-value colors results in light being added. If you want to put your new skills to the test, check out this fun little HEX color Guessing Game on CodePen.
*Supporting color slider screenshots in this article were captured from the Colors Hex Calculator by W3Schools.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Try some of my FREE goods: https://liammckay.lemonsqueezy.com - Designer with a love for beautiful Icons, Textures, Brushes and WordPress Themes.
View More Posts
