Robert HESS released last month on August 14, 2000, I provided some introductory information about using colors and images on the Web site. This column discusses some basic technical questions, such as page coding, .jpg format and .GIF formats and other subjects that may have been very skilled in "programmers". But these topics may feel some uncomfortable for a graphic artist because graphic artists are always accustomed to controlling the color and composition of the work. In this article, I plan to change the direction, discuss the graphic artist's familiar color, and programmers may take a revision in this regard. In fact, I found that many sites have not applied these principles correctly, and this can be seen that many programmers need to further understand these concepts. Although the main goal of this article is to discuss some of the characteristics when coloring and another color interaction, first need some primary knowledge to make our starting point. Basic knowledge 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 cyclic ring typically includes 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. Graphic Figure 3. The primary color is defined according to the definition, the base color is the most basic color, and any other color can be produced by mixing the base color by 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 feeding synthesis (English), from JIM Scruggs, except for transmitting and absorbing light, this paper discussed in two modes of color and decoration - but according to our Outcome, we will focus on the color mode, in this mode, the base is red, green, and blue. Secondary color Figure 4. Supreme color In order to build a collier, we want to learn about the 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-time color Figure 5. The final step of the three-time color rings is to find the middle color between the colors of the color ring again. 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. Similar color matching 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. Complementary color is also called 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. Columnized complementary color Figure 8. Complement columns of column complementary colors 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. Sany-color group Figure 9. Sany-color group three-color group is any three colors of the color ring. 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. Warmth color Figure 10. Warm warmth is made 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. Cooling 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. Using the contrast 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 comparison Figure 13. Monochrome comparison when using a blue monochrome comparison when you use a color, 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 colors 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 can see this is a much better combination, it indicates that it is important to consider contrast: not only in the sense of analysis, it is necessary to consider from 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; the text on the background image is a better way to use a set of column 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. Collection of complementary colors; texts on the background image know how color theory will 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. To find some possible options, see this dynamic example (English). The MSDN show is hosted by Robert Hess. Archived More Or Hess Column
July 10, 2000, let your world colorful (English) is really wonderful on June 12: There is a cache in the browser (English), the essence of things and appearances (English) April 10th Broken Commerce (English) March 13 Service Simple History (English) February 14 Back to Windows2000's future (English) Evolution on January 10 (English) December 13, 1999 and exceeding the limit (English) Safety, November 8, is also a disadvantage. (English) October 11 (English) September 13 (English) Subaraka (English) April 9 on August 9th (English) July On the 12th Internet (English) June 14 XML: Approximate business topic (English) April 12 new browser, new features, new options (English) March 30 Science and Technology Future Development (English) 2 On the 8th, it is the exclusive news of the Internet or not (English) on January 11th. (English) December 14, 1998 Web Application Optical side (English) Make your web application's actual effect on November 16 Same as expectation (English) October 12 Application Tools (English) August 17 Application Web (English) July 17th, I face it: I am with you? (English) June 17th: Renewal is a new (English) May 20th, from the simple presence (English) April 20th common sense and sensitive (English) March 23 What is your web concept? ( English) February 23 Safety Dance (English) January 26th Your HTML is compatible? (English) December 23, 1997 Brace (English) November 25 let me move (English) October I worship me on the 12th, I am a website designer (English) September 22 style: Not so easy (English) is made from each other on June 2? Let your website browser compatible with each other (English) Waiting User Tax on May 1st (English) March 27 Vulcan Document (English) February 27 Ugly Web (English) Goodwill belongs to: Sean Masterton / Microsoft Corporation
