Website Color Thinking--(website color thinking)

Have you ever tried to design a set of colors for your Web site that is one bright color combination? Or do you always wonder why the websites of banks, company lines, or financial institutions always use the blue line? So you've come to the right place. Although most web site developers are well aware of the network's use of the color plate and the calculation of the color of the 16-carry system, but the color and effective color combination of the underlying principle is still ignorant.
For centuries, color itself has been a difficult puzzle to solve. For example, Socrates had assumed that the source of "fire" was the color produced by the eye's combination of the "white" (whiteness) of the object itself. Newton later explored the relationship between light and color, and after many scientific studies, the absolute relationship between light and color sensing was finally confirmed in 20th century.

Nowadays, the research information of color harmony and color adjustment has direct influence on artists, designers and advertising AE personnel. This guide to color theory is designed to explore how to use colors effectively on the site, while also providing a number of color blending techniques that allow you to use colors to harness your web design.

Color Science

We can see that color is formed by interacting with three elements: the light source, the reflective properties of the object, and the way the human retina and the visual cortex of the brain interact with light waves. No matter what media we use to work-painting, printing or networking-we all have to rely on the above process to use colors effectively.

The arrangement of colors--the Rainbow

In the late 17th century, Newton proved that color does not exist in the object itself, but as a result of the action of light, and the white light can be formed by combining the short and long light waves on the visible spectrum. The wavelengths of these visible light correspond to seven different colors: red, orange, yellow, green, blue, indigo, violet.

The visible spectra that Newton had isolated in the experiment accounted for a small fraction of all the electromagnetic spectrum, ranging from "short frequency, long wavelength area" (such as Radio FM) to "High-frequency, HF area" (e.g. X-ray). The area of the visible spectrum is between infra-red and ultraviolet, and the wavelength is about 400nm (purple) to 700nm (red). Although Newton proved that these light waves combine to form white light, only red, green and blue Sanguang waves are needed to produce white lights.

Absorption and reflection of light

When light waves are projected on an object, the substance transmits, absorbs, or reflects light waves from different parts. Depending on the nature of the object and its own atomic structure, it may reflect the green light but absorb the other wavelengths. At this point, people's retina and the visual cortex of the brain process this reflected light, and then form the color we see.

When artists and designers copy colors to canvas or paper, they simulate the process by absorbing some of the light waves from the paint and reflecting other light waves. For example, to produce green, we can use pigments that absorb red and LANGONGPO. This process is the basis for all painting and printing media color patterns.

All by the eyes

Of course, whether it's reflected from an object or emitted from the light itself, our ability to process light waves depends on the retina and the visual cortex of the brain. There are three receptors (or cones) in the retina that respond to the frequency of certain light waves. Red cone cells can induce low-frequency wavelengths, and green cones respond to medium-frequency wavelengths, and blue cones respond to high-frequency wavelengths. These cones do not operate at two yuan, but are similar to channels, which can be transmitted to the visual cortex of the brain, and then processed to produce the color we see.

In order to produce specific colors, artists/designers must rely on the way to increase or decrease the light wave, so that the human body's visual receiver only to reflect certain light waves. As for the principle of addition or subtraction, it depends on what material you use to represent your work. There are usually two ways for designers to deal with colors: first, by adding color, by mixing different colors of light waves to form white lights, and subtractive methods, using pigments to reduce light waves. The color plate and CMYK system used by traditional artists are subtractive modes. On the website, we are faced with the projection of light, not the light reflected back from the object, so we use the additive mode, which we call RGB.

Additive method in nature, the light waves we see are reflected through the object into our retina, but the way in which it produces color is not just this one. For example, stage lighting uses white light to pass through colored filters to produce different colours. The computer screen is also used to project light waves, but the difference is that it creates the shade by projecting the electron light gun onto a phosphor-containing screen. These electronic light guns can emit three colors: red, green, and blue. With these three colors, the computer screen can produce a complete spectrum. This is known as the RGB color.

In RGB systems, designers can also make a spectrum by mixing three primary colors. Mixing any two primary colors produces three secondary colors: cyan, magenta, and yellow. As mentioned above, the three primary colors of light can be added together to make white light. So, if an RGB value of 255,255,255 is white. If you completely remove the three primary colors of the light (rgb:0,0,0) will produce black.

Subtractive method
The opposite mode of RGB mode is the CMYK mode, which is to use the method of reducing light wave to produce color. Because the color of the object comes from the reflected light wave, the system uses three primary colors to absorb the object's red, green or blue. For example, if you reduce the red light, then the extra green and blue waves will produce cyan. Pigments used to remove red light, reflect green, and blue light will display cyan. Similarly, the graphic designer uses magenta to absorb a portion of the green light, and to use yellow lights to absorb a portion of the Blu-ray.

In this way, we can clearly know that the three primary colors used in the CYMK mode is the secondary color in RGB mode, and vice versa. Moreover, if the red, green, blue light mixed together to form white, then that will be green, magenta, yellow three-color pigment mixed together will produce black, because the three primary colors will be absorbed by the pigment. However, due to the factors of pigments and printing systems, mixing cyan, magenta, and yellow does not completely absorb all the light waves. So we actually have to add a black to complete, so we have a CMYK inside the K element.

Color Management
With these two different ways of reproducing colors, it's a headache for designers to create both digital and print images. In addition to the corresponding color method and the difficulty of subtractive, RGB and CMYK can be used in the color range is quite large. Therefore, for Cross-media designers, have a set of color management system can be converted according to the output devices can reduce a lot of headache problems. Color management systems can be included in the operating system, in some applications.

One of the greatest challenges of visual design is to find effective harmonic colors, so that the colors are neither monotonous nor exaggerated. To understand the relationship between color balance, you can start by understanding the color loop. The color ring presents all the possible hues of a color pattern. Each color pattern contains a set of three primary colors, which are then mixed with each other to produce a different color. In the traditional color science, the three primary colors are blue, red, yellow, and in RGB color mode, the three primary colors of the shade refers to red, green, blue. Any combination of two shades of light will produce a set of secondary colors. Three times the color is mixed with the primary and secondary color, or a mixture of two secondary colors produced. We use color loops to render the logic of color. You can see from the image below that RGB color rings are very different from the color rings used by traditional artists.

Same hue and: single color, only shades, shades and shades of light are different.

Approximate tonal and: reconcile with adjacent colors or colors that are close to the color ring.

Complementary tones: Reconcile with two opposite colors on the color ring. Such color combinations can usually provide the greatest contrast sensation, but excessive use causes exaggeration.

Contrast tones and: use a color, plus the two colors next to its complementary color to reconcile. Contrast tones and can provide a softer contrast than complementary tones.

Triangular blending: Use three equidistant colors on the color ring.

Double Complementary Harmony: use two groups (a total of four colors) complementary color.

When exploring color blending, it is usually best to start with a solid color and then try different levels of rendering, toning and shading. You can then test the visual effects of a particular color combination using the Web site emulation diagram. Remember, the importance of contrast is not just designed to be attractive, it can also help or hinder the readability of the site.

The meaning conveyed by color
When we examine the scientific nature of color and the aesthetic considerations of color harmony, we find that the senses play an important role in the use of color. In addition to the sensory response and the identification of harmonic colors, there is a deeper human response to color. Color can trigger a strong physiological/psychological resonance, whether positive or negative. When you select a color combination, make sure that the color you choose can cause appropriate echoes.

The physiological reaction of color
Although there is no direct evidence that color can trigger a specific response, studies have shown that certain colours can actually cause some physiological reactions. Red, for example, is a very stimulating color that tends to cause a faster heartbeat and shortness of breath. So, red is ideal for use when you need attention and emphasis, but it may seem too strong when used in background color. Similarly, yellow can cause attention, but because of its reflective nature is too strong, easy to cause eye fatigue and discomfort. On the other hand, blue has a relaxing effect on the nervous system, and according to some studies, a blue background can also increase productivity. However, if your product is related to food, do not use blue as the background color, because the blue will inhibit people's appetite oh.

A symbol of color.
The symbolic meaning of color is sometimes related to things in nature. For example, the color of the sky and the sun produced by Lenovo World-connected. However, most color meanings are related to national culture, such as politics, religion, mythology, or social structure-factors that may differ over time and geography. If your site is designed for foreign countries, you must be careful that the same color in different cultures may have the opposite effect. In addition, most colors have both positive and negative associations. You can use the difference between the quality and saturation of the color, or use a mixture of two colors to emphasize a particular meaning.

Generally in Western culture, the meaning conveyed by color is:

Red: Passion, romance, flames, violence, aggression. Red in many cultures represents a stop signal, used to warn or prohibit some action.

Violet: Creation, mystery, loyalty, mystery, rarity. Purple is associated with death in some cultures.

Blue: Loyal, safe, conservative, quiet, indifferent, sad.

Green: Natural, stable, growing, jealous. In North American culture, Green represents "doing", which is related to environmental awareness and is often linked to financial matters.

Yellow: Bright, glorious, disease, cowardly.

Black: Ability, delicacy, modernity, death, sickness, evil.

White: purity, innocence, cleanliness, truth, peace, indifference, poverty. White also represents the color of death in Chinese culture.
      Choosing colors for your site is not an easy task; many companies also hire professional consultants, so that their color combination can match, strengthen the overall brand image. However, if you already have a sense of color, and understand how certain colors might react, you just follow your lead and develop effective color combinations. Before you start looking for a color, you have to be aware of the message and the goal that your site is going to deliver. Once you understand the message to be conveyed, you can start to color palette work. In the process, you have to constantly test the mix of colors, this is a highly creative process. Don't be afraid to use bold color combinations, but before you make your product publicly available, remember to pass the full test!

The use of color tips and pointers
1. Understand the message and brand that your website will convey. Select the colors that will enhance these messages. For example, if you are designing a financial institution that emphasizes moderation, choose a cold, soft color, like blue, grey or green. In such a situation, if the use of warm color system or lively colors, may damage the site brand.
2. Get to know your readership. Cultural differences may result in unintended reactions to color. At the same time, different regions and different age groups of the color response will also be different. Young ethnic groups generally prefer saturated colors, but such colors do not lead to a high age level of interest. 3. Do not use too much color. In addition to black and white, the choice of about four to five colors is enough. Too much color leads to confusion, and it also pulls away the reader's attention.
4. Use contrasting colors in the Reading section. Too close to the color does not produce enough contrast and can hinder the audience from reading. White bottom Black word reading effect is the best.
5. Test the contrast with gray scale. When you are dealing with colors other than black, white and gray, it is sometimes difficult to determine the relative value of each color. To make sure that your color swatch provides enough contrast, you can create a simulation website and convert it to grayscale.
6. Choose color to pay attention to timeliness. The same color can easily fill the entire market, and consumers quickly become numb to the popular color. But from another perspective, you can use the popular color decades ago, causing people's nostalgia.
7. When choosing a color disk, consider the color of functionality. Don't forget to create functional colors for the key information section, such as headings and hyperlinks.
8. Pay attention to the website chromatic aberration problem. Every web developer knows that even the common colors of the web will be different when they are displayed across platforms. Remember to correct your gamma and test your swatch on a different platform.