Basic Color Matching Methods
1. Overview
Color plays a very important role in visual analysis. When building dashboards or data screens, appropriate color matching can make the presentation of the entire data chart clearer, cleaner, and more accurate. However, in actual operation, for a novice, being able to skillfully design color matching for their dashboard is not a simple task, sometimes even time-consuming and labor-intensive.
Therefore, this article mainly introduces how to design beautiful and appropriate color matching for dashboards or data screens, helping zero-basic users quickly master the tricks of color matching and easily solve the color matching problems of dashboards and data screens. In addition, Guandata also provides multiple official color schemes that users can directly select and quickly apply to charts.
2. Color Matching Principles
2.1 Basic Color Principles
2.1.1 Three Elements of Color (HSB)
- Hue H (Hues)
Hue refers to the appearance of color and is the obvious characteristic that distinguishes colors from each other. The basic colors that can be distinguished in physics or psychology are "red, orange, yellow, green, cyan, blue, purple". Black, white, and gray have no hue attributes.
The feelings brought by hue are generally divided into three types: cool color series (blue, blue-green, etc.), warm color series (red, orange, yellow, etc.), and intermediate color series (purple series and green series). Intermediate colors basically cannot create warm and cold impressions alone.
In data visualization applications, hue has no obvious order and is generally not used to express the height of data quantity, but to express the categories of data columns.
- Saturation S (Saturation)
Saturation refers to the vividness of color, also called purity.
The higher the purity of color, the more vivid the color, and it is easier to form a strong, powerful, and energetic impression; the lower the purity, the paler the color, and it is easier to form a mature and stable impression.
- Brightness B (Brightness)
Brightness refers to the brightness of color, also called lightness.
Brightness is divided into two types: different brightness of the same hue and different brightness of different hues (brightness perceived by the human retina).
In data visualization applications, saturation and brightness are easily distinguished in terms of priority in vision, mainly used to express order or data quantity.
2.1.2 Color Contrast
Color contrast refers to the contrast produced when using two or more colors in combination.
Color contrast tool: https://color.adobe.com/zh/create
- Same Hue Contrast (0°)
Contrast of different brightness or saturation of one hue. Such as blue and light blue (blue + white) contrast. The contrast effect is unified, elegant, implicit, stable, but also easy to produce monotony and stiffness.
- Similar Color Contrast (30°)
Weak contrast. The contrast effect is soft, harmonious, elegant, quiet, but also easy to produce monotony, blur, dullness, and weakness. It needs to enhance the effect by adjusting brightness.
- Analogous Colors (60°)
Weak contrast. The contrast effect is richer and more lively, but does not lose unity, elegance, and harmony.
- Contrasting Colors (120°)
Strong contrast. The contrast effect is strong, eye-catching, lively, and powerful, but it is also easy to produce visual fatigue due to lack of unity and disorder, stimulation. Generally, various harmonizing means are used to improve the contrast effect.
- Complementary Colors (180°)
Strong contrast. The contrast effect is strong, eye-catching, lively, and powerful, but it is easy to produce visual fatigue. Generally, various harmonizing means are used to improve the contrast effect.
2.2 Color Palette Types
2.2.1 Categorical Palette
Categorical palettes are mainly used to describe data categories, where each category has no fixed order, such as displaying different countries, different enterprises, and different individual classifications.
2.2.2 Sequential Palette
Sequential palettes are mainly used to express the size of values and gradient changes in the same thing. Generally, the darker the color, the larger the value, and the lighter the color, the smaller the value.
2.2.3 Diverging Palette
Diverging palettes are mainly used to express continuous changes from negative numbers to 0 to positive numbers. Often adopt a presentation method from one color through a light color and then uniformly transition to another opposing color, while the middle light color serves as the center value or reference value.
As shown in the figure below: green represents positive numbers, red represents negative numbers, and the middle light color is 0; or green represents positive, red represents negative, and the middle light color represents neutral.
2.2.4 Semantic Palette
3. Color Matching Methods
3.1 With Theme Color
3.1.1 Create Inspiration Palette
Step1. Enter design website:https://dribbble.com/
Step2. Input theme color to get a list of theme color related reports
Step3. Choose your favorite image, imitate color matching, you can use the color picker in Keynote or PPT to pick colors
3.1.2 Explore Color Schemes from Brand Colors
3.1.2.1 Divergence of Single Brand Color
Step1. Find Brand Primary Color
Step2. Calibrate Primary Color
In dashboards or data screens, some basic principles need to be followed:
-
Cannot use colors with too high saturation in large areas (especially on dark backgrounds) and colors with too high brightness (especially on white backgrounds)
-
Do not occupy functional colors (such as pure green, red, yellow)
So in the above cases, calibration adjustments need to be made on the basis of brand hue (combined with scenarios such as dark backgrounds of large screens), so that these colors can convey brand feeling when applied to charts.
Step3. Divergence of Auxiliary Colors
Based on the primary color, we need to find a series of auxiliary colors to meet the needs of visualization. Generally, about 80% of similar colors and 20% of contrasting colors (for layout embellishment) are needed.
-
To pursue consistent layout style, you can select similar colors and contrasting colors in the same direction
-
To pursue balanced layout style, you can select in the opposite direction
On the 60° color wheel of similar colors, we can select more colors to create categorical palettes; at the same time, by adjusting brightness and saturation, we can create sequential palettes.
3.1.2.2 Divergence of Multiple Brand Colors
From the divergence of single brand color, we can summarize that in visual charts, we need a categorical palette, its corresponding sequential palette, and 1-2 types of contrasting colors. Then by appropriately placing multiple brand colors into the palette and filling them through similar methods, the divergence of multiple brand colors is completed.
Step1. Find Brand Colors
Select the primary color from multiple brand colors as the chart primary color, and accent color as contrasting color or reference for contrasting color harmonization.
Step2. Determine Categorical Palette
On the 60° color wheel of similar colors, we can select more colors to create categorical palettes; at the same time, by adjusting brightness and saturation, we can create sequential palettes.
Application Example:
3.2 Without Theme Color
3.2.1 Create Inspiration Palette
Step1. Enter design website:https://www.zcool.com.cn/
Step2. Input keywords, such as data visualization, data screen, Data Visualization, Dashboard, etc.
Step3. Choose suitable images, imitate color matching, you can use the color picker in Keynote or PPT to pick colors
3.2.2 Divergence of Color Schemes from Photos/Images
Step1. Choose a suitable photo
You can import photos and extract exclusive color cards through the following tools: Muzli Colors or Coolors Generator
Step2. Divergence of Colors
When more colors are needed in charts, you can extract primary colors from photos again, or continue to diverge based on primary colors. Specific operations are as follows:
- Extract sky color from the above photo
-
Continue to diverge based on primary colors
- Determine the approximate position of five color cards in the color wheel. Make slight weakening (reduce saturation, increase brightness, color value moves toward bright colors) or slight enhancement (increase saturation, decrease brightness, color value moves away from bright colors) on the color cards to extract new colors generated from changes
- Pull out a gradient bar according to the color card order, and you can extract new identifiable colors from it
After performing the above operations, a categorical palette can be created. At this time, based on the principle of "all colors are visually balanced and equivalent and clearly distinguishable" of the categorical palette, color fine-tuning can be performed again. Specific operations are as follows:
-
Since the orange block and light blue block are brighter and easy to be in the visual center, reduce the brightness of orange and light blue.
-
Since light blue is not easily distinguishable from the adjacent dark blue after reducing brightness, increase the saturation of dark blue, and slightly move the blue color value toward purple to widen the color gap.
4. Common Color Matching Problems
- Low Color Distinguishability
- Using Colors with Too High or Too Low Saturation (on White Background)
- Using Too Many Colors: Should adopt the 7±2 rule, try to control colors within 8
- Data Mapping Rules Too Complex: For the same data, try to keep mapping rules as one type
5. Common Color Matching Tools
-
Analogous colors/Monochromatic gradients/Contrasting colors color picking: https://color.adobe.com/zh/create/color-wheel
-
Multi-color gradient color picking: https://palettte.app/
-
Color editing: https://colorbox.io
-
Extract color cards:
-
Design/Inspiration websites:
6. Guandata Official Color Dictionary
6.1 Seaside
6.2 Spring Day
6.3 Lake and Mountain Scenery
6.4 Formal Occasions
6.5 Vitamin
6.6 Colorful Movement
6.7 Future Blue
6.8 Glass Curtain Wall
6.9 Winter Afternoon
6.10 Mint
6.11 Magic Ball
6.12 Playground
6.13 Picnic Party
6.14 Road Trip
