How to choose and combine colors – A thorough analysis of color combinations. -Part 1

If I’m completely honest, most content on combining colors or choosing colors suck. The basic color theory didn’t get me — or you — anywhere.

“Complementary colors are the key to successful combinations?’ Well, f*** that, I can think of a million green-red combinations that look like shit.

Yes, I was a little frustrated that I couldn’t find anything more useful out there than these generic tips. I knew there had to be more comprehensive advice for good color palettes.

I set out to define a set of guidelines on how to choose and combine colors.

The approach: a search for patterns in the online design community

The main goal was to find patterns. Something more than the usual superficial “combine complementary colors” advice. To find these patterns my approach was 3-fold.

Find highly appreciated designs with palettes consisting of at least 3 different colors.
Plot the used colors on the color-circle & on the HSL color map.
Create a tagging system so I could find categories.

Main conclusions & guidelines for an amazing color palette

1. A well-crafted color palette lives in harmony with each other

Imagine a medieval village, a cozy sunny place where everyone is kind to each other. With a bakery, a fisherman, a blacksmith, and so on. Everyone with his job and responsibilities. All living happily in harmony with each other. Nobody is the same, and everyone is good at something

The same goes for a well-crafted color palette. Each color is unique. Not just in terms of the hue value (whether it’s blue or orange) but also in terms of saturation & brightness. After tagging each palette with the earlier mentioned 13 color tags, I noticed there are rarely two of the same ‘color-types’ within the same palette.

Let’s inspect the following palette as an example, to make this a little clearer.

The white dots in the second row of blocks, represent the position of the adove colors on the HSL color spectrum. As you can see each color has its own ‘role’, or place.

Green is pretty desaturated compared to the other colors.
Grey… well… it’s just grey. But it is the only grey.
Red is sitting in the middle as a somewhat darker & desaturated color.
Yellow is the only vibrant color. Sitting at the very right of the HSL color spectrum.
The pink color is the only ‘bright’ color and is placed relatively close to white.

In other words, all a little different, not competing with each other. Some dark, some light, some subdued, some vibrant, and so on.

Two examples below on how to apply this.

2. Complementary is overrated.

In the 15 designs I inspected, these were the most common schemes I found:

Split-complementary (almost opposite of each-other on the color circle)
A new pattern I call the “K-Pattern” or “Triad-Variation.”
90-degree combinations
A mix of schemes, such as complementary combined with any of the above.
Interesting because the 90-degree choices and the K-Pattern were new to me, and were not document anywhere else.

Below are three examples of the 90-degree palette and the k-pattern. The patterns can be recognized in the color wheel in the second image.

K-Pattern & 90 degree pattern.

Perhaps there is an official name for this pattern I don’t know about.

It’s somewhat of a variant on a triad color scheme, I believe. But what I’m seeing is a split-complementary combination combined with 1 or 2 colors somewhere in between.

To my knowledge: not a known color scheme. But here are four steps on how to achieve this palette.

Pick two split-complementary colors. Make them both of a different category. Dark & Light or Vibrant & subdued. Dark Pink/Purple with Yellow, for example.
Give one of the two colors a second color, darker or lighter (at least not of the same category).
The fourth color is somewhere in the middle of the two first colors. Again, of a different category.

Two examples are below. Do take your time to inspect the HSB values below the images to understand color harmony: all colors are in a different category here.

3. Combine dark with light or subdued with vibrant.

If we continue with the first example of this blog (see image below) we see a repeating pattern emerging.

Dark is often combined with light. And more often than not the dark & light color are often (split) complementary to each other.

Let’s take a look at the following example:

4. A secret to analogous color schemes

My personal favorite discovery.

As you might have noticed in all the previous examples, a 5-set palette often consists of 2 of 3 colors that are near each other on the color wheel. Also called an analogous palette.

This 2 or 3 color-combo often forms the base for your 5-set palette.

A good understanding of how to set this up is thus essential. What I discovered will be very useful in your everyday design job.

The darker colors are more saturated (e.g. Saturation = 100), while the lightest color is less saturated (e.g., Saturation = 50). Take a look at the Saturation and Brightness values in the example below. Why does this work? If you pick a shadow color on a real photo, you will notice the shadow is more saturated than the light spots of that same color. Take a look at the HSB values of the colors below.

Magenta, yellow, and cyan are perceived as brighter colors. So if you want to create a dark-to-light set, move your next color (on the color circle) towards the nearest ‘optical’ bright color. The light blue color in the example above is more closely to Cyan, and the light brown color is positioned more closely to Magenta.

In the image below, I started with purple. Magenta was pretty near, so with each step, I moved more towards magenta, enhancing the perception that each color is a lot lighter.

Summary

The two keywords here are Hierarchy and Harmony. Creating enough difference between each color, to ensure they don’t compete with each other. While too much difference will remove the harmony.

The already well known color schemes, such as split-complementary, triad, and so on, do prove valuable, but not on their own. Hierarchy and harmony need to exist with that scheme.

And last but not least, we discovered several other color schemes that were, at least to me, new. A simple 90 degree 3 color combination, or the 4-5 color K-Pattern might turn out great as well.

How to choose and combine colors – A thorough analysis of color combinations. -Part 1

The approach: a search for patterns in the online design community