As graphic designers, we talk about color a lot. Color and how it renders in the various mediums (web, print etc) is important to us. To help with this, there are different ways that colors can be coded. One of those codes is called “hex code”.

hex codes are made of 6 numbers, two each for red, green and blue: RRGGBB.What exactly are HEX codes?

Hex codes are a hexadecimal format for identifying colors. This is a system used in HTML, CSS and SVG. Each hex code refers to a very specific color, which allows for two designers, or a designer and developer, to be on the same page about what exact light blue (or any other color) they are referring to. The six-digit code contains three pieces of information:

  • The first two digits provide information about the amount of Red in a color
  • The second two about the amount of Green
  • The last two numbers provide information about the amount of Blue.

This took me a while to figure out, but when I did it got me unreasonably excited for a skill that doesn’t have too much of a daily life application.
In our work as designers we are constantly using hex codes for colors, but until about five minutes ago I couldn’t really explain to you how they work. Do they include numbers and letters? The letters and numbers don’t have an order? Now that I have actually figured it out, I’m going to try breaking it down for you in a step by step manner so that the next time you are choosing a color for a project, you’ll understand this enigmatic 6-digit alphanumeric sequence.

For this example, I will use our Opus Red, hex #FC3C43

Step 01 – Identify the Red, Green, and Blue (RGB)  HEX Code values

Each of these primary colors is measured on a scale of 0-255. Identify how much of each is present in the hue and write the values down. In our example, the red has the following values: Red = 252, Green = 60, Blue = 67. Wonderful.

 

" "Step 02 – Let’s do Math

Similar to how the binary system is based on 2, the hexadecimal system is based on the number 16. There might be a smarter and faster way to divide, but for this system at the good old long division method worked best for me. Starting with Red, divide the three values noted down in the previous step by 16.
The factor that you come to at the top of your long division (the blue number in the diagram) is the first value in each couplet. The remainder at the bottom of your long division (the yellow number in the diagram) is the second value.

" "Step 03 – Convert the numbers to letters

Last, in certain cases (like the “R” value in this example) the numbers that you arrive at after long division are in the teens and have two digits. Using two digits for a single value breaks the system of #RRGGBB. This is where letters come in. The letters A, B, C, D, E, and F replace the values 10, 11, 12, 13, 14, and 15 respectively.

 

" "The result

If you followed along, you will now see that the Opus Red is #FC3C43.

Now that you know what HEX numbers mean, give us a call and we can geek out about design principles together :-). Or you can learn more about colors in our blog post on color basics.