Hexadecimal Colors Made Simple


If you’re any kind of digital artist, whether that's someone who works in the Adobe Creative Suite, a 3D application, or through web design, you've heard and probably used hexadecimal colors.  They are one of the types of html color codes. Even though you might use them every day, you still might not really know what’s going on with those weird letters and numbers and how they create colors. We’re not going to get too technical with binary here, but all you really need to understand is that the reason we use hexadecimal numbers is because it’s a human-friendly representation of values in binary. It makes sense that you’d talk to people different than you’d talk to computers.  

Understanding RGB is a good first step

RGB colors make logical sense to us, but the hexadecimal color system seems foreign. Why is that? If you understand the RGB color system, you’ll know that colors are presented like this: rgb(255, 0, 0). It's simple to understand the RGB color system because it's done in the decimal system, meaning that the numbers are just like you've learned your entire life. Zero is the lowest and 255 is the highest. It makes sense. If you’re still a little hazy on what the RGB color codes are, we’ll go over that before we move in to explaining hexadecimal color codes. RGB defines how much red, green or blue value you’d like to have displayed in a decimal value somewhere between 0, which is no representation of the color, and 255, the highest possible concentration of the color. So, in the example rgb(255, 0, 0), we’d get a very bright red. If we wanted all green, our RGB would be rgb(0, 255, 0). For a simple blue, it would be rgb(0, 0, 255). 

We all know that colors like purple are made by mixing colors. Instead of mixing paint like you learned in Kindergarten, we're going to, in a way, mix light. RGB numbers are based upon monitor settings. Monitors emit red, green, and blue light. Through these numbers you're telling your monitor how much of that particular light color you want to shine.  

Figuring out hexadecimal colors

Hexa means six and decimal means ten, which stands for the base 16 number system. You’ll often hear it just referred to as “Hex”. The reason why this is usually confusing is because we’ve all learned basic math with the decimal (or base 10) number system. Hexadecimal numbers start with a pound sign (or hashtag), and are followed by six letters or numbers. The first two digits refer to red, the next two to green, and the last two are blue. You’ll define how much red, green, and blue in values between 00 and FF instead from from 0 to 255 like in RGB. A color that’s maximum red, no green, and no blue would be #FF0000.

Why do we use letters instead of numbers? Since decimal numbers can only run from 0-9, there needed to be another way to represent larger numbers. Letters replace the higher numbers. These are what the hexadecimal letters stand for: A = 10 B = 11 C = 12 D = 13 E = 14 F = 15   So the way that we get a hexadecimal number is to multiply the first number by 16 and the second number by one and add them together. Confused yet? Let's talk about the number 83. The way that you can get to the number 83 through the decimal system that we're all used to is (8x10) + (3x1) = 83. The first number is always multiplied by ten and then added to the second number. The hexadecimal number 83 is actually 131 in decimal because (8x16) + (3x1) = 131. Remember to multiply the first number by 16 and add it to the second number. Working with letters is the same. FF is (15 x 16) + (15 x 1) = 255, which is the highest number available. The number 255 should look familiar, since it's the same max value used in RGB. Once you understand these numbers you'll be able to figure out a general idea about what a color will look like based upon the intensity of red, green, and/or blue. We'll wrap up with one more example. The color #7DD0D7 is a greenish blue (see image below).

  By understanding what the numbers stand for in hex color codes, you'll be able to better predict what color you might see. There's not too much of a difference between using a hexadecimal or RGB color, except that in CSS, it's possible to also add an alpha value, so you'll really have a RGBA color. This can be super helpful if you want to control the opacity of a color. Adding an alpha value to your RGB is certainly one of the easiest ways to change opacity.