Color theory

    The first impression is all. The proverb “They meet people by clothes, they see them off with their minds” is relevant not only in life, but also in design. The impression of the design consists of many factors, and one of the most important is the color.

    It’s not always easy to understand what colors are combined with each other. This article describes the basics of color theory, which are useful when choosing a color scheme for website design. Let's start with the simplest.

    Primary Colors

    The main colors of the palette are red, yellow and blue. If we talk about the primary colors on the screens of various devices - these are RGB, red, green and blue.

    Secondary Colors

    If you mix red and yellow, yellow and blue, blue and red evenly, the secondary colors are obtained, respectively, orange, green and purple. The combination of these colors in the design can give the design a contrast.

    Tertiary Colors

    Tertiary color is obtained by mixing the primary and secondary. For example, red-violet, blue-violet, blue-green, yellow-green, red-orange, yellow-orange.

    We figured out the basics of the "wheel of flowers." With it, it’s easy to select well-matching colors for your design. Let's move on to more complex combinations.

    Complementary Colors

    As is clear from the diagram, complementary colors are opposite to each other on the wheel. They give the design more contrast, but use them with caution, otherwise there will be a “tear-out-design”

    Similar colors (Analogous Colors)

    Located next to the wheel of flowers. Nearby colors create a sense of diversity, such as blue-green or yellow-orange.


    Using triads on the color wheel, you can achieve a sufficient variety, but at the same time, good balance.

    Split Complementary Colors

    This combination of colors adds contrast and variety to the design.

    Square scheme

    This design works well with one enhanced color and three muted.

    Rectangular Pattern (Tetradic Colors)

    It is similar to the previous scheme, or rather, just its variation.

    The use of light and shadow (Tints and Shades)

    Gives the design volume and color diversity.

    Warm and cool colors (Warm and Cool Colors)

    Cold and warm colors themselves are classic color schemes. Their main difference is in human perception. Warm colors evoke summer associations: heat, sun, green landscapes, and cold colors are associated with winter: cold, snow, cloudy weather.

    Understanding color theory and its competent use in practice is one of the most important skills of a good designer. The right combination of colors on the site improves the overall perception of the design and can cause various emotions.

    In addition, I can advise kuler  - a very cool service for selecting color schemes from Adobe.

    Pictures of the wheel of flowers from here .

    PS shalaev added another great service - .

    Also popular now: