As designers, we work with colors a lot (shocking, I know!). There are different letter and number codes for these, depending on where they are being used. For the web, we generally use hex codes, and are often asked what hex codes are, so here we go:
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. They are always a six-digit code, which contains three pieces of information:
- The first two digits provide information about the amount of Red in a color
- The second two digits provide information about the amount of Green
- The last two digits 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. Why do they include numbers and letters? Why don't letters and numbers appear to 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.
Step 01 – Identify the Red, Green, and Blue (RGB) values
Each of these primary colors is measured on a scale of 0-255. First, identify how much of each is present in the hue and write the values down. For this example, I am going to use the Opus Red.
Step 02 – 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
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 alphabets come in. The letters A, B, C, D, E, and F replace the values 10, 11, 12, 13, 14, and 15 respectively.
The Result
So here you have it: the hex code for the Opus Red is #FC3C43.
Enjoy your new-found knowledge about hexcodes, and let us know if there are any other mysterious terms we can learn about together.
