Understanding Color Codes is as Easy as #ABC123

Have you ever wondered what those color codes in photoshop or canva actually mean? Have you ever wished that you could find a specific color quicker?

By learning the formula for hexadecimal and RGB color codes, you’ll be able to do just that!

At the end of this post, feel free to quiz yourself and see how well you know hexadecimal color codes!

Hexadecimal codes, also known as Base 16, are used to specify a certain color value to your computer or other device. Essentially, the code tells your computer how much of each color to display. They look something like this:

Hex codes are comprised of a hashtag followed by 6 letters and numbers. The 6 digits are further split up into three groups of two, each independent from the other two. This is because your computer can only transmit three colors at any given time: red, green, and blue. Therefore the three pairs represent a red channel, a green channel, and a blue channel.

These color channels can be further broken down into two parts; a major and a minor.

When you look at a hex code, you should recognize it to look something like this:

If you’re wondering what the letters and numbers actually mean, here’s where we break it down even more.

Each of the color channels is comprised of 256 openings or different levels.

To create white, you would need to scale all three channels to 255 (the channels go from 0-255, so there are still 256 channels). The higher a number is, the brighter- or closer to white it will be. White is a reflection of all of the colors. This is why all of your color channels are turned all the way up to create white.

On the other hand, to create black you should adjust all three channels to 0, since lower numbers are darker. 0 is empty, so in other words there is a lack of any color, giving you black.

To create a pure red, you would only adjust the red color channel to 255, leaving the others at 0. You would do the same to create pure green and pure blue.

To create any other colors, you adjust the levels of the three channels until you have found your desired color.

To translate this to a hex code, however, we have to break it down even more!

In its basic form, there are 16 digits:

To get any number between 0 and 255, you need a formula with at least 256 numbers, and 16 multiplied by 16 is 256 exactly, making 16 our magic number. However, if we used double digit numbers like 11 or 13, you would have 3 or 4 numbers in a spot with only two spaces. Therefore, 10-15 are represented by the letters A through F.

The code shown above would then translate to this:

But we’re not done yet.

To adjust the slider to the accurate level for a color, we have to figure out what level the code is actually telling us. This is where the major and minor components come into play.

Using the same code above, multiply the major spaces by 16, and the minor spaces by 1.

It should look something like this:

Then add those two numbers together for each channel and you have a color value. Adjust the sliders to these color values, and viola- you have a color!

Go check out this site and test yourself a couple times! Once you feel comfortable there, head over to photoshop with a specific color in mind (i.e. forest green). See if you can create the color by typing in a hex code or RGB level within the first few tries.

After understanding the basics of the hexadecimal color system, design work will go much smoother, as you’ll be able to quickly find what color you’re looking for. It’s also just satisfying to understand how things work sometimes too.

For more information on this, check out this video, or this article.

Read what’s next.