Arrangement of basic knowledge of color design

Product design: industrial design, UI design, book and newspaper design, etc. Focus on brand impression, clear, comfortable and durable. Eye-catching, can stare for a long time without fatigue.

Operation/promotion design: posters, advertisements, posters and other forms. The key point is to create a compelling and expressive atmosphere. Very attractive, instantly attract people's attention.

Distinguish levels; Render the atmosphere; Strengthen the theme; Relevance conveys brand characteristics;

H(hues) hue: red, yellow, blue and other colors; Display position, adjacent color, contrast color, etc. The division of colors.

Hue will have a certain bias, such as blue-green/yellow-green, and different bias will produce different effects when matched with other colors.

From the color attribute, it can be divided into cool color and warm color. Cool colors such as blue and purple show a feeling of calmness. Warm colors such as yellow and orange give people a warm feeling.

S(saturation) purity/saturation: the brightness of the color, which is gray when it is 0;

B (brightness) Brightness/brightness: the brightness of a color, the highest is white and the lowest is black; High lightness: light and bright; Low lightness: heavy and calm.

Large brightness difference: strength and vitality; Small brightness difference: elegant and stable.

RGB: red, green and blue; Additive color mixing (mixing together to become white), the color used in the screen.

CMYK: cyan, magenta, yellow, black; Subtractive blending (mixing together to become black), a color pattern used in printing.

Tone series: the combination of different lightness and purity of colors. Tone is produced by the intersection of purity and lightness. Different tones will leave different psychological impressions and determine the atmosphere of the picture.

The three elements that determine the picture are hue, hue and contrast intensity.

If the hue difference is small, the contrast is small, stable and harmonious; If the hue difference is large, the contrast is strong and the change is strong.

Light tone (p)

Psychological impression: gentle, dreamy, light, light, light, shallow, mostly used in cosmetics, baby products and so on.

Light tone (LT)

Psychological impression: refreshing, relaxed, lively, light, light and shallow, mostly used in cosmetics, children's products and so on.

Light gray tone (LTG)

Psychological impression: simple and elegant, gentle, negative, mature and elegant.

soft voice

Psychological impression: simple, negative, peaceful and mature.

Bright hue (b)

Psychological impression: lightness, liveliness and childlike interest. Mostly used for children's products.

Strong tone

Psychological impression: a strong, profound and enthusiastic impression.

Bright hue (v)

Psychological impression: gorgeous, lively, exciting and vivid.

Gray tone (g)

Psychological impression: senior, calm, heavy, mature, reserved, conservative and negative.

Turbid hue (d)

Psychological impression: passive, heavy, simple, steady and advanced.

Deep tone (DP)

Psychological impression: calm, capable and steady.

Dark gray tone (DKG)

Psychological impression: steady, dull, simple and heavy.

Dark tone (DK)

Psychological impression: thick, deep, steady and simple.

Warm colors: red, yellow, orange, etc. , reminiscent of the flame, warm sun and other warmer things;

Cool colors: blue, green, purple, etc. , reminiscent of cooler things such as ice and snow;

Forward color: it looks closer to you than it really is, and it is swollen, usually warm white;

Backward color: it looks farther away from you than it really is, and the color is reduced, usually cool, black, etc.

Expansive colors: warm colors and high brightness colors make objects look and feel bigger than they really are;

Shrinking colors: cool colors and low brightness colors, which make objects look and feel smaller than they really are;

Weight sense of color: Black is heavier and stronger than white. The lower the brightness, the heavier it appears. On the contrary, it looks lighter.

Psychological impression of different tones:

Color is divided into five roles: main role, collocation role, dominant color, fusion color and emphasis color.

Main function: the central color of color matching, on which all other colors are based.

The protagonist decides the subject and makes the whole picture stable. Use the strongest color. The area does not need to be large, but it needs strength.

Matching role (highlight color): Set off and support the protagonist, and set it near the protagonist to make the protagonist stand out.

Cooperate with the role to increase contrast, add changes to the unchanging colors, and highlight the main roles. The difference between the area and the protagonist will enhance the contrast effect (for example, when the protagonist has a large area, the smaller the area, the better the matching effect).

Main color (background color): the color that surrounds the whole as the background. Even a small area can dominate the overall feeling.

The background color dominates the overall feeling of the picture. The background color surrounds the subject, even if the area is small, it will "see" the background color behind the protagonist in the audience's mind, so it will dominate the overall feeling.

Fusion color: when the protagonist is free from other colors, the same color is placed at the free place to play the role of fusion.

However, when the opposition between the two colors is too intense, the fusion color is added to ease the contradiction and make the whole more stable.

Emphasis color: strong coloring on a small range of points makes the whole picture more vivid.

Emphasis color makes the change of the page more intense and increases the overall vitality. Similarly, the area is quite different from the theme, which can increase the contrast effect.

First of all, we should make clear the purpose, content and audience of the design.

Design is a way to solve problems. Knowing the image of products and the role of users can make clear the overall style and temperament, the problems we want to solve and the ideas and directions to solve. For example, consider the color preferences of users of different ages, genders and levels. Children generally like colors with high lightness and purity; Old people generally like colors with low lightness and purity. In this way, there will be a direction and a goal when choosing colors.

To understand the content of design, we can pay attention to the limitations of technology, the distance of viewing and the influence of surrounding environment. For example, graphic design generally adopts cmyk mode, and UI design generally adopts rgb mode. When the viewing distance is far away, strong contrast is needed to increase the recognition; On the contrary, it needs to be softer when the distance is close, so that the viewer's eyes will not be tired. Using night mode is a response to lack of light. As far as the environmental impact is concerned, if the objects and products around the product are fancy and rich in color, it will be easier to highlight the simple and achromatic color matching.

The choice of main color is generally the main color of the brand, which needs to be consistent with the theme temperament to be conveyed. The proportion of main colors is generally large, which plays a leading role in the overall style.

For products within the company, the brand color of the company will generally be considered. For new toC products, you can use the scene version to determine the main color. Or use industry/customer specific colors, such as designing products for China power grid, and consider using its green as the main color.

After the main color is determined, monochrome color matching will generally change the brightness and purity of the color, and add achromatic colors such as black, white and gray to form a color matching scheme. Two-color matching can consider similar colors, contrasting colors, complementary colors and other color matching methods. Generally speaking, brightness and purity are not much different from the main color. Multi-color color matching can consider the color matching methods of triangle, quadrilateral and pentagon.

The contrast intensity of color can be any aspect of hue, brightness and purity. It needs to be selected and adjusted according to the overall feeling and temperament needs. Intense and lively atmosphere needs big contrast, while soft and quiet atmosphere needs weak contrast.

Cold and warm feeling of color: If you choose cold or warm color, the whole picture will be cold or warm. Unless there is a special theme demand, in general multi-color collocation, it is necessary to add warm colors to all cold colors, or add cold colors to all warm colors to embellish and balance the cold and warm feeling of the picture.

The brightness of color: the brightness of color is like the light and shadow of a painting, and objects with highlights and shadows will have a sense of volume. Similarly, the contrast between light color and dark color brings a sense of hierarchy and depth to the picture. At the same time, all bright colors will appear impetuous, and all dark colors will appear dull.

Echo between colors: the colors in the whole picture are inseparable, one here and one there exist independently. But scattered between elements. The echo of color will make the whole feeling more obvious and make the picture more harmonious.

Area of color: the area occupied by main color and auxiliary color will generally be different, forming a contrast. The common ratio is 7:2: 1. The overall feeling and impression are the result of pulling between different color feelings.

Influence of ambient color/light source color: the colors of highlights and shadows will be affected by ambient color, such as objects under yellow light, and highlights will be yellow; Objects on a blue background will also have blue shadows. When coloring elements, the influence of environmental color/light source color should be considered. The tone of basic color tends to light source color or multi-layer superimposed color, which makes the overall details richer and more textured.

Give consideration to "prominence" and "integration": after completing the color scheme, we should examine the consistency of the overall scheme with the target temperament and positioning tone. If it is too quiet, you can make some efforts to highlight it; If it is too noisy, you can adjust the direction like immersion and integration.

The vertex in the upper right corner of the color swatch is a solid color of a certain hue. Horizontal to the left is a process of gradually adding white, and the color purity gradually decreases; Vertically downward, it is a process of gradually adding black, and the color brightness gradually decreases. Divide the color sample into 9 areas on average. The color of each area will give people a different feeling. Similar to pccs, it is more convenient to choose colors in design software.

Color Jiugongge and Psychological Impression

Area 1- light tone

Psychological impression: high education, low purity, gentleness, lightness, dreaminess and elegance,

Region 2- Bright Tone

Psychological impression: high and medium purity, fresh and bright, lively and lovely. Mostly used for children's products and so on.

Zone 3- Pure Tone

Psychological impression: high intelligence and purity, bright, exciting, lively, gorgeous, young and strong impact. Mostly used in advertising, posters and other operational design.

Region 4- Pale and cloudy tones

Psychological impression: medium brightness and low purity, elegant, elegant, quiet, simple, comfortable and peaceful. Advanced gray, Mo Landi.

Region 5- Turbid Tone

Psychological impression: medium brightness and medium purity, firm, simple, quiet and advanced.

Region 6- Dark Tone

Psychological impression: medium brightness and high purity, plain, mature and calm.

7-8-9 Region-Dark Tone

Psychological impression: low brightness, danger, upscale, dull, heavy and dark.

The color of this area is regarded as a color forbidden zone by some people. The color is dirty and difficult to match. When the replacement color of pure black is needed, the color of these areas can be considered, and the color can be biased towards the tone of the main color or the tone coordinated with the main color.

Skills of using Jiugongge color matching: The simpler method is to choose the color of the same block and change the hue. Good results can be achieved in the case of multi-color color matching. You can also consider lightness and color weight, and choose light and dark, light and heavy colors to coordinate.

Get started quickly! 10 minutes to learn this super easy-to-use "Jiugongge" color matching skill-Youjian. com-UISDC

With my own cross color matching method, you can quickly get started with color matching! -There's a room. com-UISDC

After reading a lot of color matching theory, I still can't learn it. Look at these three practical skills I summarized! -There's a room. com-UISDC

A consistent color scheme

The hue of each color remains the same or close, and this difference is caused by the change of lightness or purity.

Color matching with consistent brightness

The brightness of each color is the same or close, which will not produce a strong sense of contrast, and the whole will appear more balanced.

Color matching with consistent purity

The purity of each color is the same or close, the higher the purity, the stronger the irritation, and the lower the purity, the more calm it is;

Same color matching

The hue is unchanged, but the purity and lightness change, forming a color scheme. Monochrome color matching is easier to make the effect.

Adjacent color/similar color matching

The hue span is small, and it is easy to form a clear and consistent effect with obvious intention.

Medium difference color matching

The color position on the color circle is 90, which has a certain contrast but not too strong, advanced, gorgeous and capable.

Contrast/complementary color matching

On the color circle, the two are 180, which is in strong contrast and easy to form glare effect. Generally, the area difference or brightness difference is used to make the page more stable.

Triangle color matching

The color on the color ring is triangular, and the contrast is strong and stable.

Quadrilateral color matching

The colors on the color ring are quadrilateral, with a certain contrast and rich colors.

Pentagonal color matching

Colors are selected from the color circle in the form of pentagons, and the contrast between tones is relatively balanced. Rich in color and lively.

When the whole is vague, it is necessary to delete ambiguous places, highlight the theme, and strongly emphasize the part as the protagonist, so as to make the whole more refreshing and practical.

When the color matching is too heavy and depressing, black should be reduced, bright color should be increased, brightness and saturation should be improved, and the whole is clear and vivid.

The stronger the contrast, the more energetic and energetic; The weaker the contrast, the more stable it is, the more stable it is.

Add contrast color: contrast color is a supplement to the main color, and the two conflict. Pay attention to the adjustment of area, lightness, purity and position to avoid too strong and uncoordinated pictures.

Quasi-contrasting color brings a smooth contrast: the effect is milder than using contrasting color directly, that is, using complementary color slightly deviating from contrasting color.

Full hue type: rich color types, lively and open picture, similar to pentagonal color matching.

Triangle color matching: balanced and stable, similar to the color matching of three primary colors.

Cross: two groups of contrasting colors form a cross on the color circle, which is powerful and compact.

Black plays a prominent role: black highlights the sense of output and can set off bright colors.

White plays an important role without destroying the feeling of the picture: as a neutral color, white does not destroy other colors. Can be used as accent color and interval color.

Fix light-colored protagonists with light-colored groups: light-colored protagonists, background colors, auxiliary colors, etc. It shouldn't be too strong to steal the limelight of the protagonist. The overall light tone makes the picture atmosphere more brisk.

Methods of strengthening the central part: improving the purity; Strengthen brightness contrast; Strengthen tone contrast;

Add bright colors: bright colors appear energetic, and dark colors appear solemn and elegant.

Reduce a part of black: like adding bright colors, make the tone closer to the bright and bright direction.

Set brightness difference: that is, increase contrast. Contrast produces strength and exuberant vitality. Color contrast includes hue, lightness, purity and area contrast.

Create a bright spot: suppress the background color, highlight the brightness and purity of the theme color, and compare it with the background salad in a large area.

Increase the color area: the picture is too monotonous and empty, so you can appropriately increase the color area, reduce blank space, and increase the output rate and visibility. (The rate of loading is high, and the overall activity is lively, which is suitable for quick browsing. If the output rate is low, it will be quiet and tend to read carefully, which is suitable for the design of reading, documents and other applications. See-write an article)

Separate color matching: colors are not arranged in the order of color rings, but opposing colors are put together to increase conflict and create movement.

Center of gravity: the upper part is dark (low lightness) and the lower part is light, so the center of gravity will move up and become unstable, forming a sense of movement. Prevention, lower and more stable center of gravity.

The color of the picture is not harmonious/too noisy. Use three attributes (hue, lightness and purity), location and area to ease the atmosphere and make the whole more harmonious.

Similar tones: homologous colors, adjacent colors, etc. Tone difference is small, and stable, warm, conservative and quiet effects are tested.

Bicolor: hue is&or similar, but hue is different, while light color & bright color/bright color &; The combination of turbid colors, etc.

Contrast two tones: two groups of two tones form the contrast between tones. The smoothness of the two tones and the tightness of tone contrast exist.

Uniform lightness: When the hue difference is large, using the same lightness will give people a feeling of overall stability.

Close to the tone: Pure and light constitute the tone, and the same tone can enhance the feeling brought by the tone and unify the overall picture atmosphere.

Convergence of chaos by grouping method: a part of hue, lightness and purity is unified to obtain a sense of unity.

Shade method: color matching according to the order of hue or lightness to form a stable sense of rhythm.

Difference: approximate hue and lightness, the whole will be very quiet.

Flexible use of annoying tones: it is very effective to use a small area of accent color. The key points of color selection: the same color with high chroma, the contrast color with quasi-high chroma, and the high brightness color.

By repeatedly fusing the whole: putting the same color in different positions to form an echo, the whole picture is better fused.

Use white space to soften the picture: Using white space in an overly rich color scheme can ease the strong contrast between tones.

Get color matching from nature:

Choose photos of natural scenery, mosaic them, and choose colors as color matching.

Choose a color consistent with the main body:

There are some pictures, patterns, etc. That must be added to the design materials, from which colors can be extracted as the colors of fonts and decorative elements. Make the whole picture more harmonious.

Insert interval color:

When the subject conflicts with the background color, auxiliary color, etc. , you can insert a space color between them to distinguish, buffer and transition. The interval color is generally achromatic color or mud color.

Color impression:

Babies → children → adulthood → middle age-light tone, soft tone → bright tone, bright tone → strong tone, turbid tone → dark tone and gray tone;

Male-solid color, with strong contrast; Female-soft, elegant and weak in contrast.

Vitality and vitality-warm colors and full tones;

Cute-increase the proportion of white areas and add white to the color;

Simple and elegant-elegant and bright colors, weak contrast;

Luxury-warm colors, bright colors and strong contrast;

Nature-bright and elegant turbid color, soft tone, strong tone and turbid tone in tone diagram.

Strength and speed-bright and thick colors with strong contrast;

Fantasy and mystery-the same color system, rare in nature;

Gradient:

Use colors with the same tone to form different atmospheres through tones.

Similar color gradient: soft, slight and delicate. There is a soft sense of light and shadow.

Adjacent color gradient: fashionable, durable and active.

Complementary color/contrast color gradient: impact, eye-catching and fashion.

Determine the layout first, then choose the color scheme.

Quantity and coordination of colors:

Many colors are easy to form a lively and gorgeous atmosphere. But the more colors, the more difficult it is to coordinate. A small amount of color will have a strong sense of quantity, giving people a firmer and clearer direction;

Similarity can be maintained in lightness or purity. You can also add achromatic colors as segmentation and transition. Or use a certain color on all elements to make the whole more unified.

Multicolor color matching:

At least one of hue, purity and lightness should be the same or close. For example, when there are multiple colors, the purity and brightness of each color should be kept at least one difference. If they are all very different, it is easy to be uncoordinated. You can improve the brightness or purity of one of the colors and emphasize it deliberately.

Multicolor color matching should also pay attention to the echo between colors, for example, some details should be consistent with the colors of a large area, rather than one color occupying one piece.

When multi-color collocation, the proportion between colors also needs to be weighed. When it is more balanced, the whole is more lively. When the priority is clear, it is closer to the feeling of large area color.

Coverage mode:

Through different superposition modes (soft light, superposition, color deepening, etc. ), the fusion between pictures or colors is more natural.

ColorMunki-ColorMunki design

colour

Color Selector-A Convenient Design Tool from Color Supply

Color Search-A Popular Palette for Designers and Artists

LOL color-planning palette inspiration

Coolers.co-Super Fast Color Scheme Generator

0-255

Color Designer 3_ Advanced Online Color Matching Device _ Color Matching Network

Material Design Color, Plane Color, Icon, Palette | Material User Interface

China color-the traditional color of China.

What is the essence and difference between CMYK and RGB color modes? -Zhihu

Notes on Color Design Principles-Complete Book

Get started quickly! 10 minutes to learn this super easy-to-use "Jiugongge" color matching skill-Youjian. com-UISDC

With my own cross color matching method, you can quickly get started with color matching! -There's a room. com-UISDC

After reading a lot of color matching theory, I still can't learn it. Look at these three practical skills I summarized! -There's a room. com-UISDC

Master's flight class! The simplest way to use color matching-Youjian. com-UISDC

NCD Website: NCD Business: Image Scaling System

PCCS_ Baidu encyclopedia

Principles of Color Design (Douban)

Learn a little about color psychology every day (douban)

PCCSの hue

The Basic Principles of Color Matching (Douban)

Use a practical project to help you master the scientific UI color matching method. com-UISDC

Master the basics of design and color matching in seven days