Color basics
We know that people see "visible" light can be broken down into a gradual rainbow spectrum band from blue to red.
Figure 1. Visible spectrum
We have also seen (perhaps also used) color loops, color loops show how to generate specific colors by mixing two or more colors. The color circulation is essentially the long strip sequence seen in the color spectrum, just connect the first end to the purple of the red to the other end.
Figure 2. Color ring
Color circles typically include 12 different colors (as shown). Although the painter has been very understandable about the importance of color rings and color theory, some of our programmers may not be very clear. This understanding is a mess.
Primary color
Figure 3. Base
According to the definition, the base color is the most basic color, and any other color can be generated by mixing the base color at a certain proportion. In order to identify the base color, it is first necessary to know what media used is used. You may learn to have red, yellow, blue in elementary school, but now we are using red, green, blue as a color display. I think this is not enough.
But if you use a color inkjet printer, turn on the cover to see the cartridge. Have you seen red, green, blue? No. You may see four kinds of ink: cyan, magenta, yellow and black. The color is different because the computer display uses a plus color, and the printer uses the color. The display emissions color light, while the ink on the paper absorbs some color from the light it reflects. More discussion about this topic will exceed this article, but if you want to know more information, please visit the following two links:
Synthesis (English), JIM Scruggs Feeds (English), Feed by Jim Scruggs
In addition to launching and absorbing light, the concept discussed in this article applies to two modes of color and decoration - but according to our purpose, we will focus on the color mode, in this mode, the base is red, green, blue.
Secondary color
Figure 4. Secondary color
In order to build a collier, we'd like to know three colors obtained by mixing any two adjacent primary colors. These colors are secondary: blue, magenta and yellow. Hey, isn't we talk about these three colors? Yes, the secondary color in the measuring method is the base color in the toning method. Thus, you can infer, the secondary color in the reduction method is the base color in the mean method. This is the interrelationship between the color mode and the reduction model.
Three times
Figure 5. Three colors
The final step of establishing a color ring is to find the middle color between the colors of the color ring now. Fortunately, these three colors are the same for both the measuring and decay. Since we have defined the colors used in the 12-note ring, the interrelationship between these colors can be discussed.
Similar color
Figure 6. Simple color
Similar colors refers to the color next to a given color. If you start with orange and want to get two similar colors, you choose red and yellow. The color scheme using the similar color can provide color coordination and blending, similar to those seen in nature.
Complementary color
Figure 7. Complement
Also known as contrast color. Complement colors are correct in color circles. If you want to highlight some colors more clear, select the contrast color. If you are making a picture of a lemon, using a blue background will make lemon more prominent.
Column complementary color
Figure 8. Collection complementary color
The complementary columns of the column can be composed of two or three colors. Choose a color, find its complementary color on the other side of the color ring, and then use the complementary colors on one or two colors.
Tricolor group
Figure 9. Sany-color group
The three-color group is any three colors of the collar. When using a three-color group in a color scheme, an observer will give a sense of tension because these three colors are strong. The base color and secondary color are all three-color groups.
warm color
Figure 10. Warm color
Warm color consists of red, such as red, orange and yellow. This color is selected to give people warm, comfortable, and energetic feelings. The visual effects of these colors make it closer to the audience and have a more prominent page.
Cold color
Figure 11. Cool cold color comes from blue tone such as blue, cyan and green. These colors make color schemes appear stable and refreshing. They seem to be away from the audience, so suitable for page background.
Please note that you may find that these color groups are not identical in different books, but they can understand as long as they understand the basic principles.
This makes me eventually enter the main concept I want to discuss, this is the contrast.
Use comparison
The contrast is the difference between the two adjacent colors. Because white and black are not true colors, they are said to be non-color contrast. Black and white also showed the strongest contrast. The complementary color of the color ring exhibits large color contrast. The human eye is more sensitive to non-colored contrast than color contrast, which is when you increase the compression coefficient. Thejpg compression algorithm first removes the color information and then removes the cause of black and white information.
Figure 12. Black and white: non-colorful contrast
Figure 13. Monochrome contrast using blue
The monochrome contrast is established when you use a color and then increase or decrease its brightness.
Comparison is very important in web design. With a variety of different methods, all of these methods are based on the other color concept described above. Everyone understands that the black text in white background is the easiest to watch, this is some of the printed materials you see are part of the black text in white background. Similarly, the contrast of the black and white words is also very strong, but it is more difficult to read, because the black gives people feel more than white, in view of this, please use it as little as possible.
Figure 14. High Contrast Color Combination
Warm and cold color produces the same effect. Warm color gives people a slightly highlighting the feeling of the screen, and the cold color appears to be concave on the screen. This means that warm colors / black is most suitable for text, and cold / white is best suited as a background. However, this method is not a constant. Let's take a simple example in which two contrast colors are selected, using one as a background and the other as the text.
Figure 15. Complementary color combination
You will notice that the effect is very poor. These two color contrasts are not distinct, they almost penetrate together. This is obvious that it is not a good combination. Still keeping the color basically, and adjust its brightness / darkness, making them more obvious.
Figure 16. Modified color combination
It can be seen that this is a much better combination, which shows that it is important when considering contrast: not only in the sense of analysis, it is necessary to consider visual perspective.
These colors and contrast applications may be most important to overlapping text on background images. When using these comparison concepts, you must remember that the text section on the page must be sufficient to form a strong comparison with all the colors in the background image. For example, if you simply use a set of three-color groups described above, you can make these three comparison colors to fight on the page.
Figure 17. Sany-color group combination; text on background image
A better way is to use a set of complementary colors, using similar colors as a background, and text uses complementary colors. In this way, the background color will be appropriately integrated and not causing the attention to them itself, while the text will appear.
Figure 18. Column complementary color combination; text on the background image
Know how color theory will also work when you select a color tone for your website. Depending on your need for background color, navigation components, and different textual style, you can select high contrast pattern from color circles. Then, use some kind of tool similar to my safety palette (English) to easily choose a dark / brighter color, increase the contrast between the elements to the appropriate level. There are many combinations suitable for your page, which makes colors more exciting use, and does not let the user's headache. So, put those painkillers to one side, or spend more time to consider how to use colors on the Web site.
