Color theory, contrast

Many say that color is a purely subjective thing and there are no rules or principles in it. In fact, as in any science, there is a place and theories. Color helps to complement the meaning and idea that you want to invest in your work, and its proper use helps to make your product more visible and professional looking.

Many researchers dealt with color issues, and one of the most notable was undoubtedly Johannes Itten, author of The Art of Color. In his work, the author considers many aspects of color: the psychological effect of color, the "weight" of each shade, the combination of color and shape, and much more.

Let's start with the most understandable - color combinations. It is the work of colors in a pair or group that has the most direct impact on the first impression of a drawing. For this, the term “contrast” is used - that is, matching two or more colors so that they can be effectively compared and show the differences. Contrast helps to reveal the dynamics of the picture, its mood, character, purpose. Itten identifies seven major contrast groups:

Contrast by color- one of the simplest work schemes. As stated in Itten’s book, “It is expressed in the interaction of the ultimate saturation of pure colors. As white and black exhibit the strongest contrast of light and dark, so the primary colors, yellow, blue and red, are endowed with the property of the strongest color contrast, giving the impression of simplicity, strength and determination. The color contrast intensity is weakening from primary to third-order colors. ”

Simply put, if for your work you choose a combination of two (preferably opposite) colors, and in their saturated form, and put them side by side, you will get a very sonorous and rich contrast. But the main thing is to know the measure, to be able to "muffle" such combinations and correctly distribute the masses. Otherwise, you risk getting a very bright picture without focusing on any detail.

As an example: in the picture with the sticker you can see several types of contrast, but the leading one is the contrast in color. The contrast of red and blue gives a very sonorous combination, but to make it look more relaxed, muted tones were used. There is more blue in the picture - this creates a frame for those small saturated red spots that can be seen on the girl's face.

Second example: a poster from the game Prey. As you can see, the contrast of extremely saturated colors is used here, but due to the distribution of masses, this contrast looks harmonious and the accents are clearly placed in it.





The contrast of light and dark. This combination of colors seems to be the most understandable. It is based on the use of colors of different lightness and tonal gradations of color. A light spot will stand out in a dark environment, just like a dark spot will stand out against a light background.

All colors can be lightened with white or darkened with black. Each color has its own tone - it is very easy to check, just try to make the colors on the color wheel black and white. But here lies the main problem. Not all colors can systematically become light or dark. Some of them, if they start to lighten or darken, begin to lose saturation, and this can become a problem - especially within the framework of mobile art. This is best solved using a different color, rather than dimming the original one - this will help to avoid adding “dirt” to the picture.

Itten says the following: “Pure yellow corresponds to the third step of gray, orange to the fifth, red to the sixth, blue to the eighth, and purple to the tenth. Saturated yellow is the lightest of pure colors, and purple is the darkest. So the yellow color, to coincide with the dark tones of the gray scale, should be muffled, starting already with the fourth step. Pure red and blue colors are located more deeply, at a distance of only a few steps from black and far from white. Each admixture of black or white reduces their saturation. "

So, when creating the contrast of light and dark, two things must be taken into account - the contrast of colors and the contrast of the tone of these colors. And this gives you control over what depth of the image you want to set, and what elements you want to highlight or push in (although there are some exceptions here too - about them a bit later).

We will analyze everything with a specific example. Take a look at the screenshot of the map from the game Cut the Rope 2. If you transfer the image to b / w and analyze it, you can see that the main story track is the lightest and brightest element on the screen, lying on the lawn of medium tone. Coins in the upper part of the screen stand out just as brightly, as they lie against the dark background of trees and create a good contrast. The trees themselves (above and below) are fused in tone into one dark spot with a slight color variation - this was done intentionally to create the desired focus on the screen, but at the same time not to make it boring. Buttons, although not very contrasting with the background in tone, they stand out in color.



The contrast of warm and cold colors. We can say that this contrast is the simplest. Usually yellow, yellow-orange, orange, red-orange, red and red-violet are called “warm colors”, and yellow-green, green, blue-green, blue, blue-violet and violet - “cold”. And basically, this formula works great.

But as elsewhere, there are also nuances here. For example, you should pay attention to which particular shade of color is used and in what environment this color is used.

Let's take specific examples for illustrative purposes. In the picture below you see a very simple sticker in the flat colors technique. The skin of both girls is the same shade, but the hair is different shades of the same color. What is the result? Firstly, the hair on the left looks warmer than those on the right (that is, the same color may seem warmer or colder). Secondly, the skin, surrounded by different shades of purple, looks different. The skin of the girl on the left seems darker and warmer than the skin of the girl on the right.

This confirms the general theory: shade and surroundings can greatly affect the impression of color. This is a tool that is important to understand and be able to use. Sometimes a seemingly cold color is just a “grayer” version of the color warm, but when interacting with each other, they form a warm / cold pair.

Also, do not forget about the effect of warm and cold tones on the image as a whole. From Itten’s book: “In nature, more distant objects, by virtue of the air layer separating them from us, always seem colder. The contrast of cold and warm has the property to influence the feeling of proximity and remoteness of the image. And this quality makes it the most important graphic tool in conveying perspectives and plastic sensations. ”

In short, cold tones move the subject away, warm tones bring them closer. If it is important for you to beat off some element from the background, make the background cool and the element (button, for example) warm. This is a very effective technique used in mobile games. As an example, look at the screenshot from the game Cut the Rope 2. The





contrast of complementary (complementary) colors. From Itten’s book: “We call two colors complementary if their pigments, when mixed, give a neutral gray-black color. In physics, two chromatic lights, which when mixed give white light, are also considered complementary. Two complementary colors form a strange pair. They are opposite to each other, but they need each other. Located next to each other, they excite each other as much as possible and mutually annihilate when mixed, forming a gray-black tone, like fire and water. Each color has only one single color, which is complementary to it. "

What can we learn from this definition? First: complementary colors are colors that are opposite each other on the color wheel. If you mix two of these colors, you get a neutral gray. Well, if you put two of these colors next to each other, they will create a very bright contrast.

As an illustrative example, we can take several pairs that fit this definition. It is yellow and violet, yellow-orange and blue-violet, orange and blue, red-orange and blue-green, red and green, red-violet and yellow-green.

Additional colors give the picture a special confidence and sonority. At the same time, it is important that both such colors retain their intensity in the picture, so it is extremely important to be able to balance them by mass so that one color does not “crush” the other.

Another important point - each pair of complementary colors has other characteristics. So, a pair of yellow and purple is not only a contrast of complementary colors, but also a strong contrast of light and dark. Red-orange and blue-green are not only a pair of complementary colors, but at the same time an extremely strong contrast of cold and warm. That is why it is important to correctly select a pair of such colors in accordance with the theme of your picture, so that the color enhances the meaning, rather than crushing it with its brightness.

Let's analyze an example. The basis is a pair of “red-orange and blue-green” - a pair that emphasizes the theme of nature associated with the fairy. Notice how the green wings stand out against the background of red-orange hair and reddish skin. All this helps to create the desired image and maintain it.



Simultaneous contrast . From Itten’s book: “The concept of 'simultaneous contrast' means a phenomenon in which our eye, when perceiving a color, immediately requires the appearance of its additional color, and if there is none, then it simultaneously (that is, simultaneously) gives rise to it. This fact means that the basic law of color harmony is based on the law on complementary colors. Simultaneously generated colors arise only as a sensation and objectively do not exist. They cannot be photographed. Simultaneous contrast, as well as consistent contrast, in all probability, arises for the same reason. "

In simple terms, a combination of colors is called simultaneous contrast, in which in our eyes there is a distortion of real color information and the generation of a new color (or distortion of the current), which is not in the picture. This effect is manifested when using two not directly complementary colors.

This effect is difficult to explain, since it cannot be fixed, but let's try to consider it with an example. Pay attention to the skin of the girl, especially the color of the skin in the shadow of the face, right next to the hair. What color do you think? If you think that this is some kind of shade of green, then you are mistaken - this is completely wrong. This is a medium shade of orange. But those greenish strands on the top of the hair? This is a dark yellow version. My head is spinning, right?

This is the contrast created by the environment. Gray against warm skin will appear either bluish or greenish, muted orange against red will appear greenish, etc. Impressionists, like no other, understood the value of this contrast, and actively used it in their work. So be careful, observant, and try to study the effect of colors on each other through a drawing.



Saturation Contrast. From Itten's book: “The words 'contrast in saturation' record the opposite between saturated, clear, and faded, muted colors. Spectral colors obtained by refracting white light are colors of maximum saturation or maximum purity. Among the pigment colors, we also have colors of maximum saturation. As soon as pure colors darken or lighten, they lose their saturation. "

That is, the contrast in saturation is the contrast of colors that differ in degree of purity. For example, you can use a pair of bright red and medium yellow, and this will be considered a contrast in saturation. Or you can muffle the whole gamut of the picture, keeping it within the framework of medium-saturated colors, and highlight some particularly interesting elements with bright saturated color. This type of contrast is especially good for highlighting certain points of interest.

How can I mute the colors? In traditional painting, this can be done by adding black, white, gray and an additional color to the main mixture. In digital painting (in particular, in Photoshop) there are many other useful tools - Vibrance, Photo filter, Hue / saturation, Exposure and the like.

But the question is, why should the colors be muffled at all? The fact is that when everything in the picture is equally saturated, it can be difficult to see the hierarchy of objects in the picture, and the viewer's eye gets wide. Take a look at the picture below. In this sketch of the character, which is very restrained in terms of color, we see how a saturated saturated shadow of the same beard stands out against the background of a beard unsaturated in the light. Or as yellowish, more saturated pupils stand out against the background of a medium-saturated eye shadow. A more saturated scar on the face also stands out against the background of medium-saturated skin. All this helps to correctly place accents in the picture and convey the details that are important for the character description.



Contrast over the area of ​​color spots. From Itten's book: “Contrast over the area of ​​color spots characterizes the dimensional relationships between two or more color spots. Its essence is the opposition between 'many' and 'small', 'large' and 'small'. ”

Itten also says that each color has its own “weight”, and if we measure the colors on a scale of 1 (darkest) to 10 (lightest), then we get this table: yellow - 9, orange - 8, red - 6, purple - 3, blue - 4, green - 6. In order to properly build the relationship of colors in the picture, you need to correctly distribute these masses. If we take purple and yellow, then we see that purple is 3 and yellow is 9. To make the masses look harmonious and not outweigh each other, we need to bring them to the correct ratio - from 3/9 we get 1/3, which means that one part of purple should account for three parts of yellow.

Color spots harmonized in their sizes give the impression of calm and stability. The contrast in the area of ​​color spots in this case is neutralized due to harmoniously composed color spots.

If you need to break the harmony and create a sharp contrast, you have to use other ratios. The main thing is that the choice matches the mood and nature of the picture.

The presented system of quantitative ratios is only valid when using colors in their maximum saturation. When it changes, the corresponding sizes of color spots also change. Both factors - both saturation and color spot size - are most closely related.



The main thing that should never be forgotten is the importance of understanding that knowledge of color needs to be reinforced by analysis of other people's works, and reading theory, and practice. Without this, it is very difficult to understand the essence of the phenomenon of color and begin to use it wisely.