color properties

Colors have inherent properties that allow them to be distinguished from others: saturation, hue, brightness. This allows us to make groups of colors such as chromatic, complementary, close, triads, etc. We also analyze the contrast…

Colors have inherent properties that allow them to be distinguished from others: saturation, hue, brightness. This allows us to make groups of colors such as chromatic, complementary, close, triads, etc. We also analyze the color contrast.

We continue to address color theory in , this time going into important issues that can help us use colors and know how to combine them with each other.

In this article we are going to see two large blocks of information. In the first part we are going to analyze different properties of color, essential information that every person who works on the web and design in general should know perfectly well.

In the second section we are going to enter into another matter of vital importance such as the contrast between colors, analyzing various situations when combining different types of color.

color properties

Every color has a series of properties that make it vary in appearance and that define its final appearance. Among these properties it is possible to distinguish:

Hue (Hue)

It is the pure state of color, without added black or white, and is an attribute associated with the dominant wavelength in the mix of light waves. The Hue is defined as a color attribute that allows us to distinguish red from blue, and refers to the path that a tone makes towards one side or the other of the chromatic circle, so that yellowish green and bluish green will be different shades of green.

The 3 primary colors represent the 3 primary shades, and by mixing these we can obtain the other shades or colors. Two colors are complementary when they are opposite each other on the circle of hue (color wheel).

Saturation or Intensity

Also called Chroma, this concept represents the purity or intensity of a particular color, its vividness or paleness, and can be related to the bandwidth of the light that we are viewing. The pure colors of the spectrum are completely saturated. An intense colour is very alive. The more a color is saturated, the greater the impression that the object is moving.

It can also be defined by the amount of gray a color contains: the grayer or more neutral it is, the less bright or “saturated” it is. Likewise, any change made to a pure color automatically lowers its saturation.

For example, we say “a very saturated red” when we mean a pure, rich red. But when we refer to shades of a color that have some gray value, we call them less saturated. The saturation of a color is said to be lower when its opposite (called a complementary) is added to it on the color wheel.

To desaturate a color without changing its value, you have to mix it with a black and white gray of the same value. A strong color like blue will lose its saturation as white is added to it and it becomes light blue.

Another way to desaturate a color is to mix it with its complement, since it produces its neutralization. Based on these concepts we can define a neutral color as one in which its saturation is not clearly perceived. The intensity of a color is determined by its light or dull character.

This property is always comparative, since we relate intensity in comparison to other things. The important thing is to learn to distinguish intensity relationships, since intensity often changes when one color is surrounded by another.

Value or Brightness (Value)

It is a term used to describe how light or dark a color appears, and refers to the amount of light perceived. Brightness can be defined as the amount of “darkness” a color has, that is, it represents how light or dark a color is with respect to its standard color.

It is an important property, since it will create spatial sensations through color. Thus, portions of the same color with strong differences in value (value contrast) define different portions in space, while a gradual change in the value of a color (gradation) gives a sense of contour, of continuity of color. an object in space.

Value is the greatest degree of lightness or darkness of a color. A blue, for example, mixed with white, results in a lighter blue, that is, of a higher value. Also called tone, it is different from color, since it is obtained by adding black or white to a base color.

As more black is added to a color, the darkness intensifies and a lower value is obtained. As more white is added to a color, its lightness intensifies, so higher values ​​are obtained. Two different colors (such as red and blue) can have the same tone, if we consider the concept as the same degree of lightness or darkness in relation to the same amount of white or black that they contain, according to each case.

The classic description of the values ​​corresponds to light (when it contains amounts of white), medium (when it contains amounts of gray), and dark (when it contains amounts of black). The brighter the color, the greater the impression that the object is closer than it actually is.

These color properties have given rise to a special system for representing them, as we have seen in the previous section, the HSV system. To express a color in this system, one starts from the pure colors, and their variations in these three properties are expressed by means of a percentage.

We can use these properties in the search for the appropriate color ranges and contrasts for our pages, making it possible to create contrasts in hue, saturation and brightness, and the latter is perhaps the most effective.

color groups

With these concepts in mind and based on the color wheel, we can define the following groups of colors, which will create good combinations on a web page:

Achromatic colors: those located in the central zone of the chromatic circle, close to its center, which have lost so much saturation that the original hue cannot be seen in them.

Gray chromatic colors: located near the center of the chromatic circle, but outside the zone of achromatic colors, in them the original hue is distinguished, although very little saturated.

Monochromatic colors: variations in saturation of the same color (hue), obtained by moving from a pure color to the center of the color wheel.

Complementary colors: colors that are symmetrical with respect to the center of the wheel. The Hue varies by 180º from one to the other.

Near complementary colors: based on a color on the wheel and then another two that are equidistant from the complementary of the first.

Complementary Doubles: Two pairs of colors that are complementary to each other.

Complementary triads: three equidistant colors both from the center of the wheel, and from each other, that is, forming 120º from each other.

Multiple ranges: scale of colors between two following a uniform graduation. When the extreme colors are very close on the color wheel, the gamut originated is also known as analogous colors.

Bright-Dim Mix: A pure bright color and a dim variation of its complementary are chosen.

All these color groups form harmonic palettes, suitable for use in graphic compositions.

color contrasts

We saw that the contrast between elements was an important aspect when creating a graphic composition, and that one of the most effective ways to achieve it was through color.

Contrast is a phenomenon with which colors can be differentiated according to the luminosity, the background color on which they are projected. When two different colors come into direct contrast, the contrast intensifies the differences between them. Contrast increases the greater the degree of difference and the greater the degree of contact, reaching its maximum contrast when one color is surrounded by another.

The contrast effect is reciprocal, since it affects the two colors involved. All colors in a composition are influenced by the colors with which they come into contact.

There are different types of contrasts:

light contrast

Also called light-dark contrast, it is produced by confronting a light or saturated color with white and a dark or saturated color with black.

It is one of the most effective, being highly recommended for textual content, which must stand out clearly from the background.

value contrast

When two different values ​​are presented in contrast simultaneously, the lighter one will appear higher and the darker one lower.

For example, by placing two maroon rectangles, one on a greenish background and the other on an orange background, we will see the one on a greenish background more clearly.

The juxtaposition of primary colors exalts the value of each one.

saturation contrast

It originates from the modulation of a pure tone, saturating it with white, black or gray. The contrast can occur between pure colors or by confronting them with other non-pure ones.

Pure colors lose lightness when black is added to them, and their saturation varies by adding white, modifying the attributes of warmth and coldness. Green is the color that changes the least when mixed with both white and black.

As an example, if we place three rectangles with different saturations of yellow on the same background, the purest one will contrast more.

temperature contrast

It is the contrast produced when confronting a warm color with a cold one.

The warmth or coldness of a color is relative, since the color is modified by the colors that surround it. Thus a yellow can be warm with respect to a blue and cold with respect to a red. And also the same yellow can be warmer if it is surrounded by cold colors and less warm if it is surrounded by red, orange, etc.

contrast of complementary

Two complementary colors together offer the best contrast possibilities, although combining two intense complementary colors is visually very violent.

To achieve harmony it is convenient that one of them is a pure color, and the other is modulated with white or black.

simultaneous contrast

It is the phenomenon according to which our eye, for a given color, simultaneously demands the complementary color, and if it is not given, it produces it itself.

The complementary color engendered in the eye of the beholder can be seen, but it does not exist in reality. It is due to a physiological process of correction in the organ of sight.

other contrasts

A bright, pure color applied to a large area of ​​the page is often irritating and tiresome (especially yellow), while the same color, used in small proportions and on a muted background, can create a sense of dynamism.

Two bright light colors placed side by side impact on…