Web Interface  |  Color

Palette

This section is about how to create a color palette for the interface.

01Creating a palette

A small number of colors is enough to create a good and solid color palette of the interface. Black, white and a few base colors.

A palette of base colors.

In addition to the base colors, you will need shades of these colors to create your design. Usually three to seven shades are enough. If more is required, that's fine. It all depends on the design goals and visual style.

The shades of the base color are found by mixing with white or black. If necessary, you can fine-tune the Saturation parameter for shade harmony.

For black shades, the easy way is to first find a base gray, which is within 40-60% of the lightness of black. And then from the base gray you can create a palette of grayscale shades. These are usually used for backgrounds, borders, and controls.

Shades of base colors.

02States & controls

In addition to the base colors often you need a palette of colors for states, notifications, buttons and other controls. Usually there are three states Active, Negative and Positive.

Active — links, buttons, call-to-action elements.
Negative — error messages, accents, notification.
Positive — successful messages and other positive notification.

The colors of the states and controls can be the same as the base colors, or they can be different if the base colors do not contain enough options to reflect all the states. As a rule, the colors of the states and controls are slightly brighter and more saturated than the base colors.

Blue, green, and red state colors - can often be out of harmony all together. That's okay. Their role is auxiliary. They do not even have to be in harmony with the base colors of the site. And they are unlikely to appear on the screen together three at once, so their disharmony will not affect the overall perception of design.

But of course, the tonality of color states should still be close to the base colors. The balance is important so that in any state the design is not screaming and tasteless.

Color palette of states and controls.

As with the base colors, the additional colors of the states and controls also need to be tinted. Shades are used for borders, backgrounds, and text colors in different states. The shades of these colors are found by mixing with white or black. If necessary, you can fine-tune the Saturation parameter for shade harmony.

Shades of states and controls colors.

03Warning

The "Warning" state makes no sense and does not need to be done in the design.

The color and state of "Warning" makes no sense.
Active, positive, and negative colors are enough for all needs.