We believe that there is no one on Earth who would dare to claim that colors are insignificant in web design. Both professional and amateur web designers study color theory in order to select only the most efficient shades and their combinations for the projects they are carrying out.
This topic is too extensive, so it is impossible to completely cover it in a single blog post. However, we can enumerate the basic principles of color theory, list the main tools for choosing the right color scheme and name some of the trendiest shades of the year. And, of course, we will finish our entry with a compilation of sites where the authors managed to adapt the colors, which at first glance seem absolutely incompatible. That’s our plan. If they are all eyes, we will start with the first point.
Playing with color – Theory and examples
What is color theory?
Color theory is a kind of guide to color mixing and visual effects of a particular combination of colors. According to them, colors are divided into primary, secondary and tertiary.
Color theory has a long history. His principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490). Thus, a tradition of “color theory” began in the 18th century, initially in the context of a party-political controversy over Isaac Newton’s color theory (Opticks, 1704) and the nature of the so-called primary colors. Since then, it has developed into an independent artistic tradition with a superficial reference to colorimetry and visual science.
Isaac Newton’s color wheel is often used to describe complementary colors. Complementary colors are those that cancel each other’s hue to create an achromatic (white, gray or black) light mixture. Newton assumed that colors that are exactly opposite each other on the hue circle cancel each other’s hue.
A key assumption in Newton’s hue circle was that the maximally saturated hues are on the outer circumference of the circle, while the achromatic white is in the center. The saturation of the mixture of two spectral shades was predicted by the straight line between them; the mixture of three colors was predicted by the “center of gravity” or the center of gravity of three triangle points, and so on.
According to the traditional color theory based on subtractive primary colors and the RYB color model, yellow mixed with violet, orange mixed with sapphire or red mixed with green produces an equivalent gray and are the complementary colors of the painter. Taking into account the above, it is possible to form the basis of Chevreul’s law of color contrast: colors that appear together are changed as if mixed with the complementary color of the other color. For example: yellow on a sapphire background appears tinted orange, since orange is the complementary color to sapphire.
An interesting fact is that complementary colors based on the definition by light mixing do not coincide with the primary colors of the artists. This discrepancy comes to the fore when color theory is applied across media. Digital color management uses a hue circle defined around the additive primary colors – the RGB color model, since the colors in a computer monitor are additive mixtures of light, and not subtractive mixtures of colors.
Warm and cool colors
The distinction between ‘warm’ and ‘cool’ is generally not noticed in modern color science in relation to painting, but is still used in design practices today. The contrast between two color types is observed in landscape light, with the “warm” colors associated with daylight or sunset, and the “cool” colors associated with a gray or cloudy day. Warm colors are often called shades from red to yellow, brown and tan; cool colors are often called shades from sapphire-green to sapphire-violet, most shades of gray are included. The 19th-century sources place the peak contrast between red-orange and greenish-sapphire, although there are historical disagreements about the colors that anchor the polarity.
Why is the division into warm and cold colors so important for web designers? Because they are perceived differently and have the opposite psychological effect on viewers. Warm colors look more active, they excite the viewer, while cool colors tend to withdraw, calm and relax. Therefore, there is an exception to this rule – brown is a dark, unsaturated warm color, which very few people consider visually active or psychologically exciting.
What colors are called achromatic? An achromatic color is any color that does not have strong chromatic content, is unsaturated or almost neutral. Pure achromatic colors include black, white and all shades of gray; near neutrals include shades of brown, tan, pastels and darker colors. Almost neutrals can have any shade or brightness.
How are neutral colors obtained? Neutrals are obtained by mixing pure colors with white, black or gray or by mixing two complementary colors. In color theory, neutral colors are colors that can be easily modified by neighboring saturated colors, and they seem to take on the hue that is complementary to the saturated color. For example: next to a bright red, gray appears clearly greenish.
Black and white colors have long been known as the friendliest. That is, they combine well with almost all other colors. Black reduces the apparent saturation or brightness of colors paired with it, and white shows all shades with the same effect.
Tints and shades
When mixing additive color models, the achromatic mixture of spectrally balanced RGB is always white. Mixing dyes, and pigments into color mixtures, we produce a color that is always darker and lower in chroma or saturation than the primary colors. As a result, the mixed color moves closer to a neutral color – gray or almost black. Lights are made brighter or darker by adjusting their brightness or energy level. In painting, the brightness is adjusted by mixing with white, black or a color complement.
Do you know the difference between a shade and a shade? When painters darken a color by adding black paint, they create shades. When you lighten a color by adding white, you create shades. However, you should be careful with the technique, since an unfortunate result may occur in the form of a shift in the shade. For example, if you darken a color by adding black, colors such as yellow, red, and orange may shift toward the greenish or bluish part of the spectrum. Lightening a color by adding white can cause a shift towards sapphire when mixed with red and orange. There is another practice of darkening a color – with its opposite or complementary color in order to neutralize it without a shift in hue, and darken it if the additive color is darker than the parent color. When lightening a color, this shade shift can be corrected by adding a small amount of a neighboring color to bring the shade of the mixture back into harmony with the parent color.