Sharing of web color contrast and harmony techniques

Color contrast and harmony

In contrasting conditions, the interaction of colors is different from the feeling given by a single color. This phenomenon is caused by visual afterimage. When we stare at a color image for a long time and then look at a white background, a complementary color image with roughly the same hue and brightness relationship will appear in front of our eyes. If the background is colored, the afterimage will be mixed with the background color, creating a visual effect of complementary color afterimage. Color harmony refers to the rational combination of two or more colors to produce a unified and harmonious effect. It has two meanings: first, it is a form of beauty; second, it is a means of color matching. The basis of color harmony is color contrast.

1. Contrast and harmony of brightness

Brightness contrast refers to the contrast between different brightness of the same hue and the contrast between different brightness of different hues. It is one of the most important factors in color composition.

The contrast of different brightness of the same hue will present different levels of depth, which helps to express the spatial relationship and order of colors and create the charm of color gradient. The contrast of different hues and brightness can not only show the difference in hue, but the color difference produced by adding different brightness will also make the colors appear rich and varied. The greater the brightness contrast, the stronger the color effect of the hue; the smaller the brightness contrast and the smaller the difference between the cold and warm hues, the softer the color effect.

When harmonizing with the same brightness, we must pay attention to the following issues.

1. To harmonize the same brightness and hue, it is necessary to increase the saturation to create a change.
2. To harmonize with the same brightness and chroma, it is necessary to change the hue to increase contrast.
3. The coordination of different hues and saturations of the same brightness can adjust the contradictions among various parties and make it rich in changes.
4. Adjacent brightness harmonies have a unified sense of harmony, but the brightness changes little, and the hue and purity need to be changed to increase contrast.
5. The brightness of similar colors should be harmonized. Colorful colors will appear more subtle and soft, but the hue and saturation also need to be changed appropriately to make them look more coordinated.
6. Contrast and brightness harmony, the colors are bright and strong, but difficult to unify. It is necessary to enhance the hue and saturation to make them harmonious.
7. The brightness of complementary colors is harmonious, the colors are bright and stimulating, but they feel harsh.

2. Contrast and harmony of chroma

Chroma contrast is a contrast method that combines colors of different chromas to bring out the best in each other. In chroma contrast, if the color or hue with the largest area belongs to the line color (a color with high chroma) and the other color has a low chroma, it will form a sharp contrast. Generally speaking, the hue of the line color is clear, eye-catching, and has strong visual interest. The psychological effect of the hue is obvious, but it can easily make people feel tired and unable to maintain continuous attention. The blurriness and vividness of colors are mainly caused by chroma contrast, which helps to enhance the mutual contrast between colors. For example, using gray to set off a bright solid color will make the bright solid color more vivid due to the contrast between the two colors.

Under the conditions of equal hue and brightness, the biggest feature of chroma contrast is softness. The smaller the saturation difference, the softer the feeling. The same saturation can harmonize colors of different hues and brightness, but to break the steady color structure, it is still necessary to change the hue and brightness. The harmony of adjacent chromaticities requires increasing the changes in hue and brightness; the harmony of contrasting chromaticities requires enhancing harmony through the unification of hue and brightness.

3. Contrast and harmony of hue

Hue contrast is formed by the difference between each hue, and its intensity can be expressed by the distance between the colors on the hue wheel. Choose any color on the 24-color color wheel, and the color produced after strengthening or weakening its brightness is the same color of this color. The color adjacent to this hue is the adjacent color, the color about 60° adjacent to this hue is the similar color, the color about 90° adjacent to this hue is the middle difference color, the color about 120° adjacent to this hue is the contrasting color, and the color about 180° adjacent to this hue is the complementary color. The same color, adjacent colors, and similar colors have weak hue contrast; medium-difference colors have medium hue contrast; contrasting colors and complementary colors have strong hue contrast.

Achromatic colors are the easiest to blend, but you must pay attention to the changes in brightness between colors; colors that are too close will be blurred, and colors that are too far apart will be too harsh. When the same color is harmonized with a single hue, it appears monotonous. The brightness and saturation must be adjusted to produce varied colors. In addition to using the "small interval" method to match colors, you can also add contrasting colors for embellishment. Adjacent colors are very similar, and usually the brightness and chroma are changed to add depth. Although similar colors have changes compared to adjacent colors, they can easily appear monotonous because the change in hue is not obvious. At this time, it is necessary to change the brightness and saturation to make the colors lively and vivid.