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.
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…
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.
Let’s break down the relationship between RGB and hexadecimal code.
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.
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.)
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.
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.
These days, it seems everybody “does web design”. How do you know the best option for you?
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.
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.
