Color Matching skills in Website Design

Basic Color knowledge

We know that people think that "visible" light can be broken down into a gradual rainbow band from blue to red.

Figure 1. Visible Spectrum

We have also seen (or even used) a color ring that shows how to generate a specific color by mixing two or more colors. In essence, a color ring is a long color sequence seen in the color spectrum. It only connects the beginning and end together to connect the red to the purple of the other end.

Figure 2. Color Ring

The color ring usually contains 12 different colors (). Although painters have a deep understanding of the important aspects of the Color Ring and color theory, some of our programmers may not be very clear about it. This lack of understanding will make things messy.

Base color

Figure 3. base color

By definition, the base color is the most basic color, and any other color can be produced by mixing the base color in a certain proportion. To identify the base color, you must first know exactly what media is used. You may learn that the base colors are red, yellow, and blue in elementary school, but now we use red, green, and blue as the base colors for color display. I don't think so.

If you are using a color inkjet printer, open the camera cover to check the ink cartridge. Do you see red, green, and blue? No. You may see four types of ink: blue, magenta, yellow, and black. The color is different because the computer monitor uses coloring, while the printer uses fading. The display emits colored light, while the ink on the paper absorbs a certain color from the light it reflects. More information about this topic is beyond the scope of this article. For more information, visit the following two links:

• Coloring and synthesis (English), provided by Jim Scruggs

• Reduced-color synthesis (English), provided by Jim Scruggs

Apart from the differences in light emission and absorption, the concepts discussed in this article apply to the two modes of addition and subtraction-but for our purpose, we will focus on the addition mode. In this mode, the base colors are red, green, and blue.

Secondary color

Figure 4. Secondary colors

In order to establish a color ring, we hope to understand the three colors obtained by mixing any two adjacent base colors. These colors are secondary colors: green, red, and yellow. Did we talk about these three colors? Yes. Secondary colors in the coloring method are the base colors in the fading method. It can be inferred that the secondary color in the fading method is the base color in the coloring method. This is the relationship between the coloring mode and the fading mode.

Three colors

Figure 5. Three colors

The last step to establish a color ring is to find the middle color between the colors that are already filled in the color ring again. Fortunately, these three colors are the same for addition and subtraction. Since we have defined the color used in the 12-point color ring, we can discuss the relationship between these colors.

Similar colors

Figure 6. Similar colors

A similar color refers to the color next to a given color. If you start with orange and want two similar colors, select red and yellow. The color scheme of similar colors can provide coordination and blending of colors, similar to what we see in nature.

Complementary colors

Figure 7. Complementary colors

It is also called contrast color. The complementary colors are aligned with each other on the Color Ring. If you want to highlight some colors more clearly, it is useful to select a contrast color. If you are making a lemon image, the blue background will highlight the lemon.

Complementary colors

Figure 8. Complementary colors

The complementary colors are composed of two or three colors. Select a color, find its complementary color on the other side of the color ring, and then use one or two colors on both sides of the complementary color.

Three-color group

Figure 9. Three-color group

A three-color group is any three colors of the upper distance of the Color Ring. When a three-color group is used in the color scheme, the observer will be given a certain degree of tension, because the three colors are strongly compared. The base color and secondary color are three colors.

Warm color

Figure 10. Warm colors

A warm color consists of red, such as red, orange, and yellow. This color gives people a warm, comfortable, and energetic feeling. The visual effects produced by these colors make them closer to the audience and more prominent on the page.

Cold color

Figure 11. Cold colors

Cold colors come from Blue, such as blue, blue, and green. These colors make the color scheme appear stable and refreshing. They seem to have effects far away from the audience, so they are suitable for page backgrounds.

Note that you may find that these color groups refer to different contents in different books, but they can be understood as long as you understand the basic principles.

This leads me to the main concept I want to discuss. This is the comparison.

Comparison

Contrast is the difference between two adjacent colors. Since white and black are not real colors, they are said to represent non-color contrast. Black and white also show the strongest contrast. The complementary colors in the color ring show a large color contrast. The human eye is more sensitive to non-color contrast than the contrast of color. This is why the. JPG compression algorithm first removes color information and then removes black and white information when you increase the compression coefficient.

Figure 12. Black and white: Non-color contrast bar

Figure 13. Use a blue contrast bar

When you use a color and then increase or decrease its brightness, a monochrome comparison is established.

Comparison is very important in web design. There are many different methods for comparison, all of which are based on another color concept described above. Everyone understands that black text on a white background is the easiest to watch, which is partly because most of the printed material you see is black text on a white background. Similarly, black background and white text have a strong contrast, but it is difficult to read, because black is heavier than white. Therefore, please try to use it as little as possible.

Figure 14. high-contrast color combination

Warm and cold colors have the same effect. Warm colors give people a slight impression of the screen, while Cold colors appear concave into the screen. This means that warm/Black is best suited for text, while cold/White is best suited for background. However, this method is not static. The following is a simple example. Two contrasting colors are selected, and one is used as the background and the other is used as the text.

Figure 15. Complementary colors

You will notice that the effect is very poor. The two colors are not clear, and they almost penetrate together. This is obviously not a good combination. Or keep the color basically the same, and adjust its brightness/darkness to make them more visible.

Figure 16. Modified color combination

It can be seen that this is a much better combination. It indicates that there is a very important point in considering contrast: not only in the sense of analysis, but also from the visual perspective.

The application of these colors and comparisons is perhaps the most important for overlapping text on the background image. When using these comparison concepts, remember that the text section on the page must be strongly compared with all colors in the background image. For example, if you simply use the above three-color set, you can make these three colors compare each other on the page.

Figure 17. Three-color combination; text on the background image

A better way is to use a set of complementary colors, use similar colors as the background, and use complementary colors as the text. In this way, the background color will be properly integrated without obvious attention, and the text will appear prominent.

Figure 18. Complementary color combinations by column; text on the background image

Knowing the color theory also works when you select the color tone for your website. You can select a high-contrast pattern from the color ring based on the background color, navigation components, and different text styles. Then, using a tool similar to my security palette computing table (English), you can easily select a darker/brighter color and increase the comparison between elements to an appropriate level. There are many combinations that are suitable for your pages. They make the colors exciting, without causing headaches for users. So, put those pain pills aside and spend more time thinking about how to use colors on the web site.