“H” is for: Hexadecimal

Color is a tricky thing to deal with in design. Notwithstanding the philosophical question “does color even exist?”, it’s a fact that colors are deciphered differently depending on the medium. If you create a printed brochure to promote your business and then advertise that same brochure on Facebook, you may find that your colors don’t match across the two. Desktop computers vs mobile devices also play a role in how color is viewed and interpreted. Factors like monitor capabilites and settings will affect colors that people see.

Color — why so complicated?

In print, we use mixtures of cyan, magenta, yellow, and black (CMYK) inks to make up all other colors, or PMS inks for predefined colors. Digital screens use red, green, and blue (RGB) values for colors. In web design, we use hexadecimal code to specify those RGB values in HTML.

That’s a lot of different initials just to define “candy apple red”, am I right?

It may seem confusing, but let me explain why this is helpful to know…

What it means to be hexadecimal

In the digital world, every single color is defined by a combination of Red, Green, and Blue (RGB) light. The amount of each is measured with a number from 0 – 255. An orange color may be defined as (225, 114, 25), which corresponds to the amounts of Red, Green, and Blue that make it up, respectively.

Hexadecimal (hex) codes are used to define colors on the web. Even though design programs will usually output colors as RGB, those colors need to be converted to hex when coding anything for the web.

The conversion from RGB to hex:

Let’s break down the relationship between RGB and hexadecimal code.

• An RGB color designation is made up of three numbers. A hex code is made up of six characters — two characters each that correspond to Red, Green, and Blue.
• RGB uses numbers 0-255. The hexidecimal system uses only 16 characters: 0-9 and A-F, and it uses them in pairs, from 00 to FF.
• The first two characters of a 6-digit hex code correspond to the Red value, the second set corresponds to the Green value, and the last two correspond to the Blue value.

The same orange color we defined earlier as (255, 114, 25) in RGB is equivalent to #E17219 in hex code. The color white would be defined as (255, 255, 255) in RGB and #FFFFFF in hex.

Just add a pop of color….

There are over 16 million possible colors (16,777,216 to be exact) that can be created, and every color corresponds to a 6 character hex code. As you may have noticed, a hex code always uses # in front of the 6 characters. (Yes, the hashtag existed before Twitter.)

How to convert colors to hexadecimal code

If you have defined brand colors, you will want to make sure your perfect blue reproduces as accurately as it does in print across digital platforms as well.

If you happen to have a graphics program like Photoshop, you can easily see different values of colors in its Color Picker dialog box.

A quicker and easier way to figure out the conversion is by using one of the many free online tools out there. You can do a simple Google search for “convert RGB to hex” or “convert CMYK to hex” to find a tool to use.

One tool that is very helpful is on easycalculation.com. It has all three (hex, RGB, and CMYK) available for easy conversion. You can either enter your specific color value, or you can use their color picker and color sliders to select any color you wish and see the values change instantaneously.

Browser extensions are also an option. You can download and install browser add-ons, like Eyedropper for Chrome or ColorZilla for Firefox. These give you a color picker that you can use to sample any color when you’re on any webpage to determine its value.

You don’t have to be a designer to be a color converter!

Even if you’re not a web designer yourself, it is good to know what your brand’s hexadecimal codes are, or at least how to find them out for when you need to use them. Hopefully, you now feel better armed to keep your colors consistent across everything you do, print and web.