How to create a beautiful color palette

Despite the fact that the selection of good colors is an art, there are several tricks to simplify the choice of a beautiful color. This article consists of two parts: in the first I will tell you what makes the palette good, and in the second I will derive a formula that can be used to select a beautiful palette.

Note: this is far from the only way to choose good colors; rather, a set of heuristics that I have mastered on my own. Hope this helps you find the right colors for your website / application / game.

Color palettes and contrast

First we need to say that colors do not exist in isolation. When we talk about a beautiful color, this does not mean that it is light or dark, saturated or faded. When we talk about color matching, we should think not so much about individual colors, but about sets of colors, or color palettes.


From left to right: Super Mario Run, Monument Valley, Alto's Odyssey, Lara Croft Go

When we think about sets of colors, we should think about their interaction: should some of them stand out or mix with each other? This is called contrast.

The process of choosing beautiful colors often comes down to choosing the right contrasts for your design.

The prettiness of the flowers depends on how they work with each other in your design. But when it comes to the contrast of colors, but it can be formed in various ways:

Brightness (light / dark)

Brightness is that type of contrast that is easy to visualize. On the HSB color selector, this corresponds to movement along the vertical axis:


Brightness

In general, we can simply increase the contrast between the two colors, simply by increasing the difference in brightness.


Contrast of brightness

Although this is easy to do, it is not enough to create high-quality palettes. Colors vary only in magnitude of black and white and are simply not as interesting as colors interacting in more dimensions. Which brings us to ...

Tonal Contrast

Tonal Contrast we perceive in terms of colors (hues) colors and saturation levels (saturation). Almost like in the case of brightness, an increase in the difference in hue or saturation generally increases the amount of contrast between the colors.


Shade contrast


Saturation (horizontal axis of the HSB) and contrast of saturation

But even so, these values ​​alone cannot paint a picture. We can still choose colors that, despite differences in hue or saturation, still have poor contrast.


Different shades and poor contrast


Different saturation and poor contrast.

What's going on here? The answer is that different shades have different internal tonal values. It is difficult for many people (including me) to imagine what tonal values ​​can take on different shades. And this brings us to my favorite trick ...

Hack with shades of gray

If you display colors in shades of gray, then the brightness of the resulting gray can serve as a good indicator of the value of tones of different colors. But it is useful not only for this: it is important if you create a design taking into account the needs of people with disabilities. This is a simple way to visualize the amount of contrast existing in a design regardless of hue.


Internal tonal values ​​for different shades

Let's see how these tonal values ​​look in the HSB color selector. Also notice how changes in tonal values ​​change in the spectrum for each hue (shown in the rightmost column):


If we look at the previous examples, but now in shades of gray, then it will be much easier to say which colors have high and low contrast.


Saturation contrast: high contrast above, bad contrast below.


Shade contrast: high contrast above, bad contrast below.

Let's take another look at the games shown above, but now in grayscale.


You can easily notice that the foreground stands out clearly against the background, the interactive elements contrast strongly with the non-interactive ones, and that if the game was in grayscale, it would still remain playable. The most important conclusion from this:

Use the grayscale hack frequently and intentionally to visualize the contrasts that exist in your design.

Beautiful contrasts lead to the creation of beautiful color palettes, so I present to you ...

Formula for choosing beautiful color palettes

Let's apply the above analysis, but in the reverse order: start with the design in grayscale, and then move on to the selection of the appropriate colors.

1: Determine where we need contrast.

Create the frame of your design, and then decide in which areas of the frame you need more contrast and in which less.

2: Colorize the design in shades of gray

Try to color the design frame only in shades of gray. Make areas that require more contrast have the greatest difference in brightness. This step must be done in the final resolution of the design. Small design elements (for example, logos and application icons) require particularly high contrast to highlight small elements.

3: Choose basic colors

Choose the basic shades of colors you want to work with. This is a subjective step, and you can use tools like ShapeFactory's Pigment or Adobe Color CC to select it . Fun fact: some color combinations are so popular that they got the status of a trail .

4: Adjust the colors to have the corresponding tonal values.

Having selected the shades, find the interval of tonal values ​​at which the hue approximately corresponds to the value of the gray tone from the sketch drawn earlier. When experimenting with brightness and saturation, switch between real color and grayscale modes. Your task is to get a color palette that, when displayed in shades, matches the design from step 2.

Example 1


(1) Frame and (2) preferred grayscale contrasts


(3) Selected base colors

If we wanted to get to the color palette shown above, we would have to find which areas of each color roughly correspond to the design in grayscale.


Corresponding areas of tonal values ​​for basic colors

Now we can select color combinations from any part of these areas:


(4) Several options for color palettes

Example 2

Here is what this process looked like when developing my Overlink application:


The process is from left to right, from top to bottom: frame, grayscale, basic colors, the final design

Congratulations! I hope this helps you choose sets of colors that contrast where you need it, blend where you don't need it, and overall look beautiful.

Contrast alone is not the most crucial aspect for creating a great design, but it plays an important role in choosing beautiful palettes.