How to Ensure Your Branding Is Matchy Matchy

Picture this: You've just invested in a gorgeous website and finally have a brand you're proud of, and now it's time to make the rest of your branding such as your business cards and social media profiles all matchy matchy. You ask your designer for the colors they used, but the ones they're sending you still don't seem quite right. And matching colors on a computer screen never seems to work.

In this article we're going to put the power in your hands to get the exact shades you need from your website.

You see, most designs don't use one tone or shade of a color. If you look closely you'll see that there are gradients and thousands of colors make up each piece of your design, even the small ones. This makes your design look less flat and two dimensional, but getting the exact right shade to use somewhere else can be a bit tricky.

Each of those shades has a unique "serial number" called a hex code, and there are millions of them. A hex code has 6 characters and is a combination of letters and numbers. It tells your computer which color it should be rendering. In your image editing software when you're choosing which color you want to use you can usually paste this hex code to get the exact shade you need.

This is also useful for when you're working with a designer for the first time and want to make sure they are using the exact colors you want because oftentimes saying "purple" isn't enough. There are red-purples, blue-purples, and everything in between. So if you have the hex code to give them for the exact purple you're in love with, you'll save a lot on the back and forth.

So how do you get the colors?

You've probably noticed that in most image editing software when you pick the color you want to use it gives you an "eye dropper" tool as an option to proverbially suck up a color from the image you have open so you can use that color.

With a simple plugin, your browser can do the same thing.

In Firefox if you go to "Tools -> Add Ons" then do a search for "ColorZilla" and follow the instructions to install it.

In Chrome go to "Window -> Extension" and then click "Get More Extensions" if a search box doesn't automatically come up. Then search for ColorZilla and follow the instructions to install it.

Easy peasy.

Once you've installed these add-ons you'll see a little eyedropper tool in the top of your browser. When you click on it, the tool will be active and you can put the mouse over any section of your website and it will show you a little color swatch of what color you're viewing. When you find the exact shade you want just click and it will copy the hex code to your clipboard and you can paste it into a text document to save for later.

So with these simple instructions you are now the master of your own colors! You could also share these instructions with your designer so they can pull colors directly from your website so that everything matches perfectly.