Now the research information about color harmony and color tonality directly affects artists, designers and advertising AE personnel. This guide to color theory aims to explore how to use colors effectively on the website, and also provides many color harmony skills, so that you can make good use of colors to control the website design.
chromatology
We can see that color is formed by the interaction of three elements: light source, reflection characteristics of objects and the way human retina and visual cortex process light waves. No matter what medium we use to work-painting, printing or the Internet-we must rely on the above process to use colors effectively. The arrangement of colors-rainbow
At the end of the seventeenth century, Newton proved that color does not exist in the object itself, but is the result of light, and the combination of long and short light waves in the visible spectrum can form white light. These wavelengths of visible light can correspond to seven different colors: red, orange, yellow, green, blue, indigo and purple.
In fact, the visible spectrum separated by Newton in the experiment only accounts for a small part of the whole electromagnetic spectrum, and the whole spectrum ranges from "short wave and long wave region" (such as RF modulation) to "high frequency and short wave region" (such as X-ray). The visible spectrum is between infrared and ultraviolet, and the wavelength is about 400nm (purple) to 700nm (red). Although Newton proved that these light waves combine to form white light, in fact, only red, green and blue light waves are needed to produce white light.
Absorption and reflection of light
When light waves are projected on an object, the object will transmit, absorb or reflect different parts of light waves. Depending on the characteristics of different objects and their atomic structure, it may reflect green light, but it will absorb light of other wavelengths. At this time, the human retina and the visual cortex of the brain will process this reflected light and then form the color we see.
When artists and designers copy colors to canvas or paper, they simulate this process, using pigments to absorb some light waves and reflect others. For example, in order to produce green, we can use pigments that can absorb red and blue light waves. This process is the basis of the color pattern of all painting and printing media.
Everything depends on the eyes.
Of course, whether it is reflected from an object or emitted from the light source itself, our ability to handle light waves depends on the retina and the visual cortex of the brain. There are three receivers (or cone cells) in the retina that can respond to the frequencies of certain light waves. The red cone can sense low-frequency wavelengths, the green cone responds to intermediate-frequency wavelengths, and the blue cone responds to high-frequency wavelengths. The operation of these cones is not binary, but similar to channels, which can transmit stimuli to the visual cortex of the brain and then process them to produce the colors we see.
In order to produce specific colors, artists/designers must rely on increasing or decreasing light waves, so that the visual receivers in people's bodies can only respond to certain light waves. As for the principle of addition and subtraction, it depends on what material you use to express your work. Color mode and color management designers usually have two ways to deal with color: one is additive method, which mixes light waves of different colors to form white light; Second, the subtractive method uses pigments to reduce light waves. The color wheel and CMYK system used by traditional artists are subtractive methods. On the website, we are facing the projection of light, not the light reflected by the object, so we use the addition mode, which we call RGB.
Addition process
In nature, the light waves we see will be reflected by objects and enter our retina, but there are more than one way to produce color. For example, stage lighting uses white light to pass through color filters to produce different colors of light. The computer screen also adopts the way of projecting light waves, but the difference is that it produces colored light by making the electronic light gun shine and projecting it onto the phosphorus-containing screen. These electronic light guns can emit red, green and blue colors. With these three colors of light, the computer screen can produce a complete spectrum. This is the well-known RGB color system.
In RGB system, designers can also make spectra by mixing three primary colors. Mixing any two primary colors will produce three secondary primary colors: cyan, magenta and yellow. As mentioned above, white light can be composed of three primary colors of light. Therefore, if an RGB value is 255, 255, 255, it is white. If the light of these three primary colors (RGB: 0,0,0) is completely removed, black will be produced.
Refining process
The opposite mode of RGB mode is CMYK mode, that is, color is generated by reducing light waves. Because the color of the object comes from reflected light waves, this system uses three primary colors to absorb the red, green or blue light of the object. For example, if red light is reduced, the extra green light and blue light will produce cyan. Pigments used to remove red light, reflected green light and blue light will show cyan. Similarly, graphic designers will use red to absorb part of green light and yellow to absorb part of blue light. In this way, we can clearly know that the primary colors used in CYMK mode are the secondary colors in RGB mode, and vice versa. In addition, if red, green and blue light are mixed together to form white light, this means that mixing cyan, magenta and yellow pigments will produce black, because the light waves of the three primary colors will be absorbed by the pigments. However, due to the factors of pigment and printing system, mixing cyan, magenta and yellow can not completely absorb all light waves. So in fact, you need to add a black color to complete it, so the K element in CMYK is produced.
Color management
Because of these two different ways of copying colors, it is a headache for designers to create digital and printed images at the same time. In addition to the difficulties between additive method and subtractive method, the available color ranges of RGB and CMYK are also quite different. Therefore, for cross-media designers, having a color management system that can convert colors according to output devices can alleviate many headaches. The color management system can be included in the operating system and some application software.
colour harmony
One of the biggest challenges of visual design is to find out effective harmonious colors, so that the color system is neither too monotonous nor too exaggerated. If you want to understand the relationship between color balance, you can start by understanding the color circle. The color ring presents all possible tones in a certain color pattern, each color pattern contains a set of three primary colors, and then the three primary colors are mixed to produce different colors. In traditional chromatics, the three primary colors refer to blue, red and yellow; In RGB color mode, the three primary colors of color light refer to red, green and blue. The combination of any two colors of light will produce a set of secondary colors. The third color is a mixture of primary colors and secondary colors, or a mixture of two secondary colors. We use color rings to present the logic of color. As can be seen from the figure below, RGB color rings are very different from those used by traditional artists.
Homochromatic harmony: a single color, but different in depth, tone and brightness. Approximate hue sum: use adjacent colors or very close colors on the color circle to reconcile.
Complementary color harmony: Harmony with two opposite colors on the color circle. This kind of TINT usually provides the greatest sense of contrast, but it will be exaggerated if it is overused.
Contrast color harmony: use one color and add two colors next to its complementary color to make it harmonious. Contrast color harmony can provide softer contrast than complementary color harmony.
Triangulation: Use three equidistant colors on the color circle.
Double complementary color harmony: use two sets of complementary colors (* * * four colors).
When exploring color harmony, it is usually best to start with solid colors and then try different degrees of rendering, hue and brightness. Then you can test the visual effect of a color combination with the website simulation diagram first. Remember, the importance of contrast lies not only in designing for attracting people; It may also help or hinder the readability of the website.
The meaning conveyed by color
When we examine the scientific essence of color and the aesthetic consideration of color harmony, we find that the senses play a very important role in the use of color. In addition to coordinating the sensory response and recognition of color, human's internal reaction to color has a deeper side. Color can trigger a strong physiological/psychological reaction, whether positive or negative. When you choose a color combination, please make sure that the color you choose can arouse the appropriate response.
Physiological reaction of color
Although there is no direct evidence that colors can trigger specific reactions, studies have shown that certain colors can indeed cause some physiological reactions. For example, red is a very exciting color, which often makes people's heart beat faster and their breath is short. So red is very suitable for attention and emphasis, but it may be too strong for the background color. Similarly, yellow can attract attention, but because of its strong reflectivity, it is easy to cause fatigue and discomfort to the eyes. On the other hand, blue has a relaxing effect on the nervous system. According to some studies, using blue as the background can also improve productivity. However, if your product is related to food, don't use blue as the background color, because blue will suppress people's appetite.
Symbol of color
The meaning symbolized by color is sometimes related to things in nature. For example, the connection between the colors of the sky and the sun is world-famous. However, most color meanings are related to national culture, such as politics, religion, myth or social structure-these factors may vary with time and region. If the website you design is aimed at foreign regions, you must be careful. The same color may have diametrically opposite effects in different cultures. In addition, most colors have positive and negative connections. You can take advantage of the difference in color quality and saturation, or emphasize a special meaning by mixing two colors.
Generally speaking, in western culture, the meaning conveyed by color is:
Red: passion, romance, flame, violence and aggression. In many cultures, red stands for stop signal, which is used to warn or prohibit certain behaviors.
Purple: creation, mystery, loyalty, mystery and rarity. In some cultures, purple is associated with death.
Blue: loyal, safe, conservative, quiet, indifferent and sad.
Green: nature, stability, growth and jealousy. In North American culture, green stands for "action", which is related to environmental awareness and usually associated with financial problems.
Yellow: bright, brilliant, morbid and cowardly.
Black: ability, exquisiteness, modernity, death, morbidity and evil.
White: purity, innocence, cleanliness, truthfulness, peace, indifference and poverty. In China culture, white also represents the color of death.
Choose the most suitable hue.
Choosing the right color for the website is not an easy task; Many companies also hire professional consultants to match their colors with the overall brand image and strengthen the overall brand image. However, if you already have a sense of color harmony and know what kind of reaction some colors may cause, you just need to develop an effective tone according to your method. Before you start looking for the corresponding colors, you must be clear about the information and objectives of your website. Once you understand the message, you can start color mixing. In this process, you will inevitably try to match colors, which is a very creative process. Don't be afraid to use bold color combinations, but remember to go through a comprehensive test before making your product public!
Skills and key points of color application
1. Know the information and brand of your website. Choose a color that highlights these messages. For example, if you are designing a financial institution that emphasizes stability, you should choose cool colors and soft colors, such as blue, gray or green. In this case, if you use warm colors or lively colors, it may destroy the brand of the website.
2. Know your readership. Cultural differences may cause unexpected color reactions. At the same time, people in different regions and different age groups will have different reactions to colors. Young people generally prefer saturated colors, but such colors can't interest older people.
3. Don't use too many colors. Besides black and white, about four or five colors are enough. Too many colors will lead to confusion and attract readers' attention.
4. Use contrasting colors in the reading section. Too close colors can not produce enough contrast effect, and will also hinder the audience from reading. The reading effect of black characters on white background is the best.
5. Test the contrast with gray scale. When you deal with colors other than black, white and gray, it is sometimes difficult to determine the relative value of each color. To ensure that your palette can provide enough contrast, you can build a simulation website and convert it into grayscale.
6. Pay attention to timeliness when choosing colors. The same color can easily flood the whole market, and consumers will soon feel numb to popular colors. But from another perspective, you can use the popular colors of decades ago to arouse people's nostalgia.
7. Please consider the functional color when choosing the color wheel. Don't forget to create functional colors for key information parts, such as headlines and hyperlinks.
8. Pay attention to the chromatic aberration of the website. Every website developer knows that even the common colors on the Internet will be different when displayed across platforms. Remember to correct your gamma value and test your color wheel on different platforms.
References:
/web/base/200506/4078.html
Dalton was a famous British chemist and physicist in the18th century. He bought a pair of "brown-gray" socks for his mother on Christmas Eve. When mom saw the socks, she thought they were too bright, so she said to Dalton, "How can I wear these cherry red socks you bought?" Dalton was very surprised. The socks are obviously brown and gray. Why did his mother say they were cherry red? Dalton was puzzled and asked his brother and the people around him. All the people who were asked said that the socks were cherry red except his brother. Dalton didn't let this little thing go easily. After careful analysis and comparison, he found that his color vision and that of his brother were different from others. It turns out that they are all color blind. Although Dalton was neither a biologist nor a medical scientist, he became the first person to discover color blindness and the first person to be found to have color blindness. For this reason, he wrote a paper "On Color Blindness" and became the first person in the world to put forward the problem of color blindness. Later, in memory of him, people called color blindness Dalton's disease.
Color blindness can be divided into congenital color blindness and acquired color blindness. Congenital color blindness is a sex-linked inheritance, with more males than females, normal binocular vision and abnormal color vision. Patients often feel that color discrimination is not difficult, but it is discovered during the examination. Acquired color blindness is often secondary to some fundus diseases, such as some optic nerve and retinal diseases. Monocular color vision disorder is seen in central retinal degeneration or optic neuropathy, which has obvious visual involvement and corresponding color vision involvement. Drug poisoning can also cause binocular color vision disorder. Refractive opacity such as corneal leukoplakia and cataract can lead to low color vision.
The rate of male color blindness in China is 4.7 1+_0.074%.
The female color blindness rate in China is 0.67+-0.036%.
Frequency of color blindness gene carriers in China: 8.98%.
Color blindness refers to the lack or complete lack of ability to distinguish colors. Usually, color blindness refers to red and green color blindness. How do people perceive the colorful world? It turns out that there is a kind of photosensitive cell on the human retina-cone cell, which has three kinds of photosensitive pigments: red, green and blue. Each photosensitive pigment is mainly excited by one primary color light, but reacts to the other two primary colors to varying degrees. If a certain pigment is lacking, it will cause sensory obstacles to this color, which is manifested as color blindness or weak color discrimination. There are many different types of color blindness, and only one primary color is called monochromaticity, such as red color blindness, also known as first color blindness, which is more common; Green blindness, called second color blindness, is smaller than first color blindness; The third color blindness, blue blindness, is relatively rare. People who lack the ability to distinguish between two colors are rarely called color blindness. Color blindness is mostly caused by congenital inheritance, and a few are caused by visual pathway conduction system disorder. Generally, it is spread by women and expressed by men. According to statistics, the incidence of color blindness in men is 5%, and that in women is 1%. People with congenital color vision disorders often don't know that they have abnormal color vision, and most of them are discovered by others or during physical examination. All personnel engaged in transportation, fine arts, chemistry and medicine must have normal color vision. Therefore, color vision examination has become a routine item in military service, employment and pre-school physical examination.
resources/question/4628457 . html？ si= 1