Psychology-driven brand design. Creating and refining remarkable brand identities.

Design - from all angles

A blog about branding, marketing, and design, mostly through the lens of practical psychology, intended to be a resource to small businesses and entrepreneurs. Unless otherwise noted, all articles are written by Nyla Smith, owner of n-Vision Designs. {Subscribe to the RSS feed here: RSS}

"H" is for: Hexadecimal

Nyla Smith | Tuesday, September 08, 2015

Do you ever find yourself frustrated over color? For instance, do you know how to ensure that your brand colors will be consistent across every form of advertising that you use — from your print to your online marketing efforts? Here is a quick lesson that can help.

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

Photoshop Color Picker
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 is a Graphic Designer, Web Designer, Front-End Web Developer and Consultant with over 12 years of experience. She is the owner of n-Vision Designs, LLC in Hampton, 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.
Comments
Post has no comments.

Keep reading: