Psychology-Driven Brand Design. Creating and Refining Remarkable Brand Identities.

“H” is for: Hexadecimal

Table of Contents

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?

CMYK: 0, 91, 68, 16
RGB: (215, 20, 68)
hex: #D71444
The same color defined as CMYK, RGB, and hexadecimal numbers.

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 (25511425) 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.

Among other things, the Photoshop Color Picker shows colors as RGB, CMYK, and hexadecimal values.) 

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.

Nyla Smith

Nyla Smith

Nyla is a Graphic Designer, Web Designer, Front-End Web Developer and Consultant with over 15 years of experience. She is the owner of n-Vision Designs, LLC in Hampton Roads, Virginia, which exists to provide marketing support and brand consulting to small- and medium-sized businesses needing creative solutions. Contact Nyla if you'd like to discuss your next creative project. She can usually be bribed to a meeting with a cup of green tea and an oatmeal cookie.

More Like This...

“C” is for: Conversion Optimization

There is an old saying, “If you build it, they will come.” Even if this were true (it’s not, but), even if they come, you still need them to buy! When it comes to your website, having one is only the first step. The second step is getting people there. The third step is where conversion optimization comes in.

Read More »

Running on Default – Harmless or Risky?

It’s a wonderful thing to have choices. The reality, however, is that we often rely on the default instead of making conscious decisions to the contrary. This isn’t inherently a bad thing, but this tendency does affect all areas of our lives, including our business marketing.

Read More »