What is the process for creating a color palette like this?

Question

So, this is a screen grab of Web site designed professionally.

I'm particularly interested in understanding how the designer arrived at this palette. Arguably, the palette works, but I can't figure out how.

When I look at it in Adobe Color CC, I don't see a lot of color theory applied to these colors (I added gray for the fifth because it was used on the original site).

Using Paletton, I find things equally peplexing. Using ColorSchemer, and playing with it's "Variations" and "Live Schemes" tools doesn't get me close to this palette.

So, what process does a designer use to arrive at this palette? Is it arbitrary, "eye-balling-it?" Is there some other process used that I'm unaware of? Why does this palette work? What is the color theory behind it?

Answer 1

I think your initial process for trying to analyse this colour palette was inherently flawed since it seems to assume that selecting and using colour schemes is generally model based. As others have noted it certainly doesn't have to be and the selection process can often seem entirely random. Without knowing anything of the project or audience, not to mention the designer, it's nearly impossible to explain the series of choices that led to this result. But it is possible to try to explain why and how the combination works.

The palette works, but because it DOES NOT harmonise.

These four colours obviously don't fit neatly into any pre-defined colour model. Consider the same colours used in a gradient; would you still say they worked well together? Probably not.

So we can determine that this lack of complete harmony creates a certain amount of visual tension because there is a marked level of difference between them. One of the basic principles of design is that the careful use of differences creates visual interest. I would conclude from this that a choice of hues like these is in order to create several distinct areas of interest within a confined space, whether website or on a printed page.

Not just hue...

It's also important to note that there is not a terribly high level of contrast between the colours. This can be seen from the Brightness and Saturation values in your screenshot and the place they occupy on the colour wheel. You could also consider the 4 shades reduced to greyscale.

Luminance variety can be terribly important and this article does an excellent job of explaining why. But for the example at hand I would guess that the use of three tones with similar Brightness and Saturation values is in order to dial back on the visual tension between the shades slightly. If you are using several colours in creating separate areas of interest then difference in Hue is fine, but high levels of contrast will create a visual mess. In any situation where chosen Hues are largely different this matching of Saturation and Brightness is a neat way of promoting a certain amount of harmony. For example...

An interesting side note is that the use of muted tones has been said to be good for concentration. In the book Color Psychology And Color Therapy the colour researcher Faber Birren discusses how softer and deeper colours promote mental and visual tasks better. But I digress.

Dominant Shade.

I would reason that the green shade being positioned at the top in the given example is no accident. It is the most distinctly different from the others, as you can see from the colour wheel, and so it also exerts an influence on the other shades. Colour psychology tells us that in western cultures green has connotations like growth, health, nature and communication. Is there supposed to be a link to any of those in this case? Without knowing where this example is from I obviously can't say, but if I was going to bet I would guess that there is. Defining a palette from a single dominant shade generally means that the overall mood is set.

Finally, I have to point out that in my experience the selection of colours is almost never random. Building up a palette might start with the dominant colour from a logo, or at the behest of a client, or to create a certain mood or tone. But like a Michelin stared chef creating a new dish, or a jazz musician playing a solo, what might seem to be erratic more often comes from reasoned choice.

Answer 2

It is arbitrary.

Color selection is like any design process. Yes, there are some predefined methods which may work well for many, many things. But there's no rule, law, or statute which states you must adhere to those conventional methods.

Many designers may stick to templates or predefined methods due to ease and speed they can provide. However, as a designer you are free to use whatever you feel works without regard to any algorithm or template.

In some cases, non-color model palette can be created simply by looking at nature or a photograph and picking random colors you see. Other times a designer may be looking at what someone else has done in the past and then try and replicated it (which is kind of what you're asking). And in other cases it comes down to value first and hue secondary - which is kind of what I think those colors may be built upon - pick three values, then assign hues to them.

There are no rules other than what looks right to you and your client.

---

Completely random occurrence... but I happened to stumble upon this image via Google just by happenstance... look at this eye shadow make-up kit ... colors look kind of similar. It's possible something like this is where that palette was derived.

Answer 3

The human eye and brain is a wonderful thing that, as yet, can not be broken down into computer algorithms with full fidelity. And we are not yet even close to understanding the many variables (both external/internal to the viewer) that can make certain colors look good together. Variables like what the person had for breakfast, how much sleep they got, whether they stayed up late the night before, the current weather outside, did they have to endure heavy traffic commute, what time of the day it is, what season, which culture they were raised in, etc. All of these somehow plays into how people perceive and appreciate (or dislike) color combinations.

And so we train designers in color theory (as best we know it) and trust in their intuition and skill (practice makes better) to get interesting color combinations and palettes that succeed, even when theory and computer algorithms fail to see it.

---

Edit: Adding this part from my comment below to emphasize the actual process

The process is one of looking at colors and selecting those that appear to work well together and for the project at hand, based on theory, training, and intuition. Why people may find certain color combinations pleasing comes down to all those other variables that we don't even consciously think about.

Answer 4

1. Start with a single meaningful colour choice and go from there. Choose the colour for what it represents - a pretty grey area for solid facts but research exists.

2. Put it into the colour scheme designer website and see the various complementary colour palettes it produces.

3. Ask yourself questions about each and every colour. Is it warm enough? Will it work in large chunks or is it better used moderately?

4. Think it through logically and analyse whatever characteristics you can for each colour. Don't be afraid to rinse and repeat many, many times with slight tweaks.

P.S. I doubt you'll ever feel 100% confident about a colour pallet you've chosen without getting feedback from others. Even if it's beautiful, we designers are our own worst critics. It's okay to move forward with an 80% confidence in your colour pallet in most cases, when it's not too difficult to change the colours later.