Anatomy of A Color Palette

The anatomy of a color palette is something a lot of people aren't aware of. I actually didn't really 'get it' for quite some time after I became a designer. The more I worked with clients, however, the more I started to understand just what a color palette really was and that it is quite a bit more than a color scheme.

So I thought today I would take a little time to pop in for a short post explaining a bit about the anatomy of a color palette and exactly how it differs from a color scheme.

Let's take a look at the breakdown of the images/colors used in a palette, shall we?

I chose this palette at random because I thought it was pretty and best showed off the different elements that are encompassed in a color palette. Here''s what it all means:

DESIGN INSPIRATION:

These are photos used to pull both color and style. When I am starting to build a client mood board I like to have them create a secret board on Pinterest and give me access. I will then have them Pin any types of images that they feels best interprets who they are and who they want their brand to become. I will then look for any themes, or design similarities and pull between two and three of these photos to use as our design inspiration. The design inspiration photos is also where we will pull our color palette from.

COLORS:

Believe it or not the colors in a palette mean very different things and each is important to a cohesive design that builds a brand. A color "scheme" is simply colors that one likes and that appear to play well together. Although they may look great together, a scheme doesn't take into consideration where the focus items (or text) will be or what color will best add pizzazz to an otherwise ho-hum theme. Though there can be more, I always recommend between three to five colors when creating the color palette.

The Highlight Color

The highlight color is exactly what it sounds like. It is usually far too light to be useful as a text color of any kind but it does usually act as the glue that pulls the other colors together. As such, it should be used sparingly on things such as line dividers, quotes or in the graphics later created to tie the brand together on other networks (such as social media)

The Focus Color

The focus color is also pretty much exactly what it sounds like. It will be the "main" color that is used throughout the design. However, like the highlight color, it is usually too light to serve as a main text. Placing it as a hover color on a link or as a bold sub-heading would serve just as well and give the overall feel a much more polished look.

The Emphasis Color

The emphasis color should be used sparingly in areas that you want to really stand out. The not yet visited links on the page, the page tabs in the navigation bar and in the text showcasing your products or services. Some people confuse the emphasis color with the text color. None of the colors listed here should be used as the copy text color - except, of course, the text color :)

The Text Color

The text color is 100% exactly what it says. This is the text you will use on your main areas of copy. It should be dark enough to be read clearly, look good when set to a low font size and should never be flat black as it is too harsh on the eyes (similarly, one should never use flat white on a dark background as it has the same affect on reader).

The Heading Color

The heading color will be used only in places you want to enlarge your font to break up your paragraphs. As you'll notice I have done here by simply adding the <h1> and <h2> coding to the copy HTML. Another place it would be ok to use the heading text would be in the site name tagline since that is something that should be prominent.

And that's basically it!

I told you it would be a short (but hopefully educational) post! Overall, color palettes are not just pretty, they are a tool to bring the maximum impact to your brand and ensure your reader finds you easy to read and view, giving them a much more enjoyable experience.