Hierarchy

Colors don't exist alone. There is no white on white. If is then it's just simple full white.

Once a color is paired with another color they differ; they become engaged in a relationship. They interact.

Their interaction is multiple but most importantly is about contrast / hierarchy. Which is the dominating color bringing forward it's content? Or a dominated color bringing into background it's content?

Hierarchy exists on a monochromatic composition too; we don't have to add vivid colors to differentiate. Vivid colors are—only and only—to bring in the mood.

Source: It's Only Color

Grayscale hierarchy
Grayscale hierarchy

Warm and cool

By the most simple classification colors are either warm—active—light or cool—chill—dark. They are either highlighting or shading something.

And warm colors always win over cool colors.

Cool colors are used for backgrounds, warm colors are used for important content.

Cool colors are blue, green, violet. Warm colors are red, orange, yellow.

Color hierarchy
Color hierarchy

Color family

The easiest way to create a family of cool and warm colors is to use the color wheel.

The color wheel has 3 primary colors. They mixed together produce another 3 secondary colors. Secondary colors mixed with primary colors produce another 2 * 3 colors. Finally we have 12 colors.

The upper-right side of the color wheel contains the lighter, warmer colors. The bottom left the cooler colors.

Highlight and shade

Beside the three main colors we will need others for gradients and decorations.

This technique uses a main color and a highlight and shading color to create a gradient palette by transitioning the main color to the highlight and shading colors.

It's puncte forte is the usage of the mix() SASS mixin instead of the lighten() and darken() to offer a better, uniform transition.

Main colors

Main color
Highlight color
Shading color

Tint

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Shade

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Main colors

Main color
Highlight color
Shading color

Tint

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Shade

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Main colors

Main color
Highlight color
Shading color

Tint

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Shade

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%