Treatise on the power of color

What is color perception power?

Talk about the power of color perception. In previous posts, I have already said that some color tones are perceived by the consciousness as stronger, brighter than others.

Technically, this is due to the strength of the signal entering the brain from S, M and L cones: tones close to yellow are perceived simultaneously by S and M receptors, and tones close to red-violet (magenta) are perceived by M and L.
The brightest tone in red-orange is perceived, yellow-green and red-violet tones are perceived slightly less bright. The obvious outsiders are blue and azure tones: they are 3.5 and 5 times weaker in intensity than the brightest tone.

I created a chart illustrating the power of color perception: ^{On the chart on the left are brighter colors, on the right are less bright. To emphasize the level of perception, less vivid tones are specially darkened.} Naturally, when color vision is disturbed, the brightness of color perception changes. Here's what happens in the case of protanopia (impaired perception of red): In the case of deitanopia (deficiency of green): And tritanopia (indistinguishability of blue):

How is this used in design? The triad scheme of selection of a color palette.

To create color schemes for sites (and indeed in life), the “ process colors" approach is widely used . The bottom line is: a color wheel is taken (obtained using the HSL model )



And an equilateral triangle is placed on it. When this triangle rotates around its center, its vertices indicate harmonious colors. In theory, the sum of these three colors, taken in equal proportions should give white.

Two process colors of the same brightness, located one on the other in theory should have the same power of perception. Therefore, if you place a rectangle of one process color against the background of another, then the eye will immediately see either a frame or a figure.

As a result, it is a great opportunity to make frames for photographs or objects on the page so that the photo is perceived without a frame, and not as a whole with it, as happens when a frame is made from a neutral color.


^{Two more examples of frames from process colors.}

Problems of selection

But let's analyze this color wheel in terms of color perception power! Take a round color target and highlight the colors on it in order to see if the colors taken with an equilateral triangle make up a harmonious triad: ^{On the left is the original color wheel, on the right is the result of processing. On the right circle, for stronger colors, saturation is artificially increased. Click to see larger images; here you can see a few more color targets .}



Mentally arrange an equilateral triangle so that one of its vertices falls on a maximum of yellow. And what do we see? - That the colors at the ends of the triangle, taken in equal proportions in white, do not add up! More precisely, the sum of these colors will be perceived as milky yellow, with a slant in pink. And in order to get a truly harmonious triad, you need to make yellow and majeut a little less pronounced (remove saturation by about 6% for yellow and 2% for mazhenta).
Moreover, which is important, the process selection of colors, in principle, working well on bright, pronounced colors, does not work well on light and dark colors. The lighter or darker the color, the b of greater harmonic error will triad selection of standard color wheel.

Complementary colors

Another method of selecting a color palette is the method of complementary colors: the same color circle is taken and a segment is drawn through its center, at different ends of which there will be colors that, in total, should again give white.

A feature of complementary colors is the ability to reinforce each other: say, yellow and blue are located at different ends of the diameter. Blue against a yellow background will look visually brighter than the same brightness gray color located on the same background.

By the way, if the photo frame is made of a color complementary to the overall tone of the photo, then everything that will be inside this frame will look brighter.

And again, the problem of the standard color wheel is visible: the color strength of different tones at the ends of the diameter can differ significantly for light and dark colors. The sum of the tones selected in this way will not be perceived as a result, as a gradation of gray.

Palette selection and color blindness

Now that the theoretical foundations of the methods for selecting palettes are known, you can finally look at how the color wheel looks with a 60% loss of color vision: ^{the “highlighted” images are} presented ^{in accordance with the perception of the picture} . I won’t comment on the diagrams presented, to the question how they were received, look here .

How do designers take into account the specifics of color perception of color blind?

For designers and usabalists who think about color blind, I recommend reading the article “Effective Color Contrast”.
I hope that I have sufficiently covered the theme of color blindness in design, so the next post will be about the distribution of attention in the picture. :)