HowtoA thorough analysis of color combinations: how to choose and combine colors

A thorough analysis of color combinations: how to choose and combine colors

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

 

The approach: a search for patterns

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

  1. Find highly appreciated designs on Dribbble or Behance with palettes consisting of at least 3 different colors.
  2. Plot the used colors on a color-wheel & on the HSL color map.
  3. Tag all 15 found palettes with 13 uniquely created color categories. (‘pastel‘, ‘super vibrant‘, ‘semi-vibrant’, ‘dark subdued‘, etc.)
  4. Write a short guideline on how to re-create the 15 color combinations, with any other color as a starting point.
  5. Look for patterns.
 

 

The analysis of 15 color palettes. I tagged all colors with 13 unique color tags. Placed the colors on the color wheel & placed a screenshot besides the palette. Finally define a guideline and try it myself.

Color Tagging Categories

 

To discover the patterns across different palettes, I started with categorising different colors. I ended up with the 13 above.

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.
  • The yellow the only vibrant color. Sitting at the very right of the HSL color spectrum.

  • The pink color is the only ‘bright’ color, and placed relatively closely 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.

Combining Colors Colour Palettes

 

It is a matter of taste, but I do prefer the upper version.

 

It is a matter of taste, but I do prefer the upper version. Yellow is kept somewhat the same, but blue and pink were competing too much. The blue became the desaturated but bright color, while purple got the darker ‘role’ in the group. All a bit different, in harmony with each other.

2. Complementary is overrated.

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

  • Split-complementary
  • 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.

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

 

If you were paying attention you see that insight #1 (harmony) is applicable here.

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 famous color-scheme. But here are 4 steps on how to achieve this palette.

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

Two examples below, do take your time to inspect the HSB values below the images, to get an understanding of color harmony: all colors are of a different category here as well.

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:

Combining Colors Colour Palettes

Semi-vibrant Yellow is combined with its split-complementary color Pink, which is pastel (take a look at the HSB color map in the image above and notice the different positions). Dark Desaturated Red is combined with its split-complementary counterpart Pastel Green. If you take a closer look at the other example so far, you see the same thing happening.

Three examples below, you can click the image to enlarge it.

4. A secret to analogous color schemes

As you might have noticed in all the previous examples, a 5-set palette often consist 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.

  • The darker colours 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 as an example.

Combining Colors Colour Palettes

 

Note Saturation values for each color. The shadow colors have a higher saturation value (read: are more vibrant) than their counter light colors.

  • Magenta, yellow, and cyan are perceived as brighter colors. So if you want to create a dark-to-light set, move your next color 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.

 

The color on the far left is far closer to magenta (H=295), enhancing the optical illusion that each subsequent color is a lot brighter than the previous one.

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.

Adobe Color Wheel

I used Adobe Color to experiment with palettes. This tool makes it a lot easier to apply color schemes, and you can use the HSB sliders to create the harmony and proper balance. https://color.adobe.com/create/color-wheel

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll up Drag View