Just because you know color doesn’t mean you can use it. Color matching has a rational level, also has a perceptual level. Color matching also needs to follow a certain rhythm. Some match color jump lively, some appear slow and downy again. We start from the rational at the same time, but also put their feelers into the perceptual level to understand color.
The color order
Every kind of colour has its own idiotypic, and the play of this one characteristic, still need to rely on colour to be in the place when whole match color, area to wait, namely the order that colour and other colour place form.
The main color
Main color is to point to the color that is in dominant position in match color. Before color matching, the primary color is the first color to be determined. For example, when we want to design a jewelry display page and what color the page needs, we decide to use purple, and purple is the primary color. The determination of the main color seems not difficult, because the primary color is determined at the beginning of a macro direction, and not refined into a specific tone. The choice of main color is very free also, because do not have completely correct “formula”, every color has its characteristic and actor bad, without best color or worst color.
Deciding on the main colors requires emotional involvement. Do you want your site to look “calm and elegant” or “fresh and bright”? These different feelings all come from the balance of tonal control.
Normally, main color is the color with the most area used in match color. Used for main components, component backgrounds, large areas of color blocks, etc.
The main color on the page is crisp blue. Although a large area of white is also used in the background, black, white and gray belong to no color, and no color does not participate in the color matching process. Red appears as a foil color:
Foil color
Foil color is outside main color, another color that appears for foil main color. Background colors are usually complementary or contrasting colors of the main color. The area that foils color place uses can be big but small, want to achieve the purpose that foils only can.
Yellow is the main color and blue is the background color. Contrasting colors of blue and yellow:
Foil color can also be used in larger areas, and the main color equally, each other echo.
The main color of the page is orange, and the background color is light pink. These two colors are adjacent colors. There is a very obvious contrast in each other’s saturation, which can also set off the main color well and increase the temperature for the atmosphere of the page:
There must be a dominant color in a group of matching colors, and foil color is not essential. Whether or not to use a foil color depends on your color scheme. Normally onefold colour can compare drab, and the rich change that uses foil color to aggrandizement advocate color is one of the scheme that solves this one problem.
The background color
Background colors are often colorless (black, white, gray) or desaturated. Background colors are mainly used as background, and it is best not to appear in a very strong posture. Background color does not have a function, it is the base color of a page.
The background color of the page is blue-green to blue-purple gradient, so the collocation and coordination of the background color should be considered when illustrating:
Black as the background color, light beige as the main color, the main color and background color complement each other, then the background color can also be seen as a foil color:
Accent color
Emphasize color is in advocate color outside the color that has emphasize effect, can say it is very important visual focus. It itself has a kind of independence, because this should form with the strong contrast with the main color on match color. It can be dominant color contrast color, complementary color, make its can jump off at dominant color color.
The main color of the page is blue, and red is used as the emphasis color. When entering another page, red is used as the main color, and purple is used as the emphasis color:
The area used to emphasize color is relatively small, as long as the focus area is used to emphasize color, its itself has the role of focus. Sometimes accent color also plays the role of foil color.
Monochrome color matching method: homology of the same color
Monochrome system color refers to the main color of the site only use a color, it should be noted that the so-called monochrome is not “single”, often use monochrome system color scheme is the site with more pictures, these pictures themselves have contained rich color, from the whole page, color is not only a main color. When the color of the picture also participates in the overall color matching system of the page, only need to find a color that can coordinate with the picture as the main color, you can easily master the skills of monochrome color matching method.
The main color of the page is refreshing turquoise. At this time, the background image selected is the part of the eyes of the human face. The photography itself has soft flesh color, which complishes the turquoise:
Monochrome plays the role of the main color while also playing an emphasis on color, in the application of color matching, important components, the focus of the part can use this color, forming an obvious visual focus frame. At the same time, the background color should be kept as black, white and grey as possible without interfering with the main color. If you want to form a certain level, you can also form the spatial visual depth of color in monochromatic color matching by reducing its color saturation or lightness in addition to the main tone.
In the monochrome system color matching method, even if it belongs to the same color system, the tone will be different, so this is another color matching method, used in fewer pictures, and the picture color is not changeable.
The main color of the page is orange, which also shows different tones of orange in subtle places. When the mouse Hover button changes to a more red orange. Light orange is used as the background color. All three colors are orange, and represent different levels of color space:
When there are more pictures on the website, it is often necessary to consider both the match of the picture itself, the match between the picture and the picture, and the match between the picture and the single main color.
In order to make the page clean and clean, in addition to the product thumbnail itself, we should maintain the unity and coordination of simple and clean background and product shooting, and also consider the color echo of products:
The monochromatic tone of the dominant color is not necessarily used on the component, sometimes also use “anti-white” processing, especially when the dominant color itself is more intense, filling the dominant color as the background, delivering a dominant color strong performance effect.
The blue color on the page serves as the background color, while the shaded part shows the outline of the image content, creating a hazy visual impression. The text against white is easier to read:
There is also a more pure mono-tone color matching method, which sets the image of the whole website as gray pattern, so that the main color appears particularly eye-catching in the whole black, white and gray atmosphere, so as to highlight the theme. The advantage of doing this is to make the picture more simple, restrained, of course, also lost the colorful gorgeous atmosphere.
With the picture black, white and grey, as the main color of orange can stand out from it. This makes each orange-red detail element stand out:
It is relatively risky to “remove” the color of the picture, which is only used in some websites that emphasize the personality and texture of the picture and are not eager to show all the details of the product to users. Brand stations can adopt this method to strengthen the appeal and image characteristics of the brand.
Gradient color matching method: Dream glide
Gradient can be seen as an effect or as a means. The use of a variety of colors in the gradient, their distribution is a soft transition, showing a dreamlike feeling. Generally speaking, the gradient is usually arranged with two colors as the end point, and the middle transition into two colors of the glide zone, which covers a wide range of colors, so it is difficult to determine the dominant color is a fixed color value. From the Angle of color temperature for consideration, gradual change can have warm color gradual change, cold color gradual change, also have cold warm transition gradual change, and from the relationship between the two ends of the color, divided into adjacent color gradual change, contrast color gradual change and so on. Different tonal gradients create a different brand atmosphere. However, in light designs, gradient colors are usually concentrated in a high degree of brightness, which makes the image appear more transparent and soft. The gradient color range should not be too wide, too large color distribution will make the image itself easily lost in chaos.
Gradients often take the form of backgrounds or apply them to larger elements. Depending on the gradient, the illustrations and other components displayed will also be coordinated according to this gradient.
The transition between blue and purple, purple and pink is like a dream, and the white text and image selection are also taken into account to coordinate with the gradient color. The color is rich and full, and the page is simple and crisp:
The colors of elements floating above the gradient background can also contrast with the background, so the gradient color range needs to be more precise and clear to prevent the color from becoming “cloudy.” After all, in light design, it is important to maintain “clarity” of the image.
Using the flexibility of gradient color schemes, it is also popular to overlay a transparent gradient on top of a large illustration. The result is also quite dazzling and instantly enhances the appeal of photography itself.
In order to make the page more “clear”, you can use the gradient mapping method, that is, only use the blue and green gradient for the core focus, while maintaining the simple white background color, this method more subtly capture the gorgeous feeling formed by the gradient spread out in a large area, but like turning on a special flash light for the protagonist:
Using gradient changes, the gradient changes by switching images. Because the gradient is highly saturated, the elements above it are shown in white to make the text legible:
Gradients spread out the entire background, allowing the page to display a colorful atmosphere:
In the real world, it is difficult for us to find a completely solidified color. For example, although the clouds are white, they always show different shades of blue, orange and so on, and the sky is not completely the same blue, but shows different shades. We used gradient in the design, which is to make the image more realistic.
The starry sky rendered by the northern lights itself flows with color gradients, and the color gradients in the photos themselves are dynamic and beautiful.
Sometimes when gradient is used in the background, gradient is also used in the foreground object. After gradient is used to fill the picture, the whole picture is full of futuristic feeling:
You can also apply gradients to elements, where gradients need to be stronger and more vivid, to stand out from the background and form visual emphasis.
In large text that needs to be noticed, use a very high gradient of bright red to purple, and use a nearly colorless dark background to make the text more dazzling:
Gradients are not only changes in color, but also changes in time. The use of gradients in developing web design doesn’t stop there.
Use gradients to add richness to the color without cluttering the image. This is used in many brand sites. If you want your page to look serious, you can limit the range of gradients you can use. In short, gradients are a “dream” means, not an end in itself.
Multicolor matching: addition, subtraction, multiplication and division of colors
Color not only has hue, but also includes saturation, lightness, color temperature and other characteristics. At the same time, from the psychological level, it will also derive the weight of color, distance and other psychological feelings. Two different colors match with each other, and more complex effects will be derived through the proportion of each other.
Double color is complementary
By matching the existing colors at 180° opposite each other on the color ring, the two colors form a visual complementary relationship. We know that colors cannot be simply stated as red and blue, so we cannot simply conclude that red and blue are complementary to each other in terms of relative relationship, because in fact, there are various shades of red and blue. However, we know that a group of colors located at 180° relative to each other complement each other and balance each other, which will promote a balanced visual satisfaction in practical application. What we need to do is still open the chakras of vision on an emotional rather than an irrational level.
Complementary colors are at opposite positions on the color ring. In web design, one color is usually used as the main or background color and the other as an accent or foil color:
When the background color is blue, orange is used as the accent color, and blue and orange are a group of complementary colors:
The use of two-color complementarity is not 50/50, but a choice of organic combination of one main and one auxiliary, which is conducive to highlighting the character of the color theme.
Three color contrast
Three colors located 120 degrees away from each other on the color ring are contrasting colors, and the collocation of these three colors will also form a very harmonious combination.
In addition, there is another kind of three-color combination, in which two colors are 60 degrees away from each other, and the third color is 180 degrees away from them. Using the common power of the first two colors to form a counterbalance relationship with the other color can also produce another kind of harmony.
There are two cases of three-color contrast. One is to select colors with a distance of 120° from each other on the color ring, and the other is to maintain a 180° relative relationship between a certain color and other two colors:
Of course, in web design, choose three colors to apply to the page, the main color of the picture itself to control, otherwise it is easy to make the page appear messy. Especially in light style design, color should be controlled within three kinds as far as possible. If you want to choose this kind of color matching method, you should try to choose colors with higher lightness and lower saturation to dilute the strong impact of colors on each other. Best method still makes give priority to color with some colour, other two kinds of colour have emphasize, contrast effect.
The web design chooses blue, amaranth and pink three-color collocation, the use of three-color contrast, looks harmonious color, lively. The illustration illustration used by the web page also follows the general color matching rule, maintaining the unity of the color matching style of the page:
Without the use of pictures, the whole page returns to the minimalist state, then the use of pure color contrast, is to use the charm of color itself to infect users. Can say, such match color means is safer, let aesthetic become more pure.
The page is evenly distributed by three colors, giving a very strict sense of balance:
As we’ve said before, web design has a global concept for individual pages. Sometimes a page or screen on a web page can be considered a graphic work. “Tricolor” can be viewed from an entire web page or from a single screen. Even if we find pages that use more than three colors, the colors that appear on a screen are still controlled by the tri-color contrast. The dynamic effect of web pages is to increase the variability of color matching more flexible space.
In order to reflect the baby series of products brand lively fun, the use of a variety of colors can show colorful, and the selection of pink and tender tone to emphasize the soft sense of the newborn baby. The page chooses blue, purple, green and other colors as three-tone and, when dragging down, the appearance of pink makes the page turn to a more gentle atmosphere, but there is no conflict with the original color:
A screen color
We start from the visual perspective of a screen, rather than the overall view, a screen with a monochrome collocation, is effective minimalist style color scheme. It is a good solution to the problem of single color, at the same time, the whole web page still retain colorful color impression. This type of color matching technique is common in many display pages.
Only one main color is used on each page. Although the whole page is composed of multiple colors, a rich dynamic and harmonious relationship between colors is presented:
Each screen uses a different background color, illustration, and color of web elements, such as orange buttons and illustration to match the background color:
Page switching in the web page is also very flexible, can be achieved through mouse scrolling, but also through the switch button to switch the theme screen, but also to achieve the purpose of one screen one color.
The front page of extet. R is cleverly designed with a circular, clock-like scrolling home screen, with different background colors and different themes for display. Unique and novel modeling:
Most of the time, the choice of multi-color color matching pictures should try not to disturb the atmosphere of the original color matching, or according to the image to determine the color scheme of the web page.
Color and color collocation is by no means simple addition, but the use of color characteristics, to make a richer addition, subtraction, multiplication and division, the result is not another single color experience, but a comprehensive visual effect and emotional experience. It is not so much that colors are illusory, but rather that a rational analysis of color matching, forgetting all the rules, may be able to achieve more.
Copyright: This article is excerpted from “Light Design — Light Luxury and Zen Thinking in Web Design”
Book details purchase click: jingdong buy, Dangdang buy