Graphic Design

Hex color codes explained

Even if you’re relatively hands-off with your website or graphic design, chances are you’ve encountered hex color codes before. They can seem like garbled computer code, but there is a method to the madness. I’ll try today to demystify these codes and give you one more digital tool in your toolbelt.

First, if your eyes are already glazing over, don’t worry. There are many color pickers online that will do this for you. My favorite to use is by Google and is available right within Google search results. Just search for “color picker” and there it is.

Google search results color picker
Google Search results color picker

Just pick a color and this will reveal the hex code to you. “Hex” is short for “hexadecimal” and is a base 16 representation of numbers 0 through 16. In hex, when you count to 9 instead of resetting to 0, it increments to A (10), B (11), C (12), D (13), E (14), and F (16). A two-digit hex number can thus range from 00 to FF.

You’ll see in the screen capture that a hex color code, though, has 6 digits. This is because it is comprised of 3 different 2-digital hexadecimal numbers. Each value represents how much of each primary color for a pixel is present. Unlike when mixing paint the three primary colors when mixing light are red, GREEN, and blue.

The rich green color shown in the example has a red value of 32. You don’t necessarily have to calculate its base 10 equivalent. Just recognize that 32 is relatively low on the scale. So this color doesn’t have much red. The green value is A8. Not surprising that there would be a lot of green here. And last the blue value is sort of middle-to-low at 52. If you’d like to know their exact values, look no further than the RGB code displayed just below. RGB, if you haven’t guessed, stand for Red, Green, Blue, and gives a base 10 decimal number for each value instead of hexadecimal between 0 and 255. Our guesses of low red, high green, and middle blue are confirmed by the code RGB(50, 168, 82).

If every value is zero (#000000) then the color is black. If every value is as high as it can go (#FFFFFF) then the color is white. So if every value is low, it will be a dark color. If every value is high, it will be a light color. The relative balance between them dictates which color is dominant within the hue and value. Color mixing is similar (but a bit different) to what you learned in preschool. Red and green make yellow. Green and blue make cyan. Blue and red make magenta.

Give the color picker a try and see if you can start to recognize generally what each code represents. Then you can impress your friends and coworkers when you say, “I think we should use #C41440 instead of pure red.”