Want to do a good job of UI color matching? Just these three steps!

What colors should a set of product colors have: brand color + reminder type color (success, error, warning) + neutral black, white and gray colors (various fonts, backgrounds, dividing line colors, etc.)

Then the color types used are:

• Brand color
• Brand Black
• Content background color
• Global background color
• Split background
• Icon color
• Text link clickable color
• Tips
• Error message
• Error Raising

Text Color

• Important text
• Regular text
• Auxiliary text 1
• Auxiliary text 2
• Highlight text or graphics
• Secondary highlighted text or graphics

Dividing Line

• Regular dividing line (10%), emphasized dividing line (30%), weakest dividing line (5%)
• Highlight: Normal dividing line (10%), Emphasized dividing line (30%), Weakest dividing line (5%)

How to Decide on Your Brand Colors

When choosing brand colors, it is safest to choose the company logo color, which is consistent with the company's brand identity and has better recognition. If the company's product strategy requires that it be differentiated from other products of the company, it is more important to consider the characteristics of the product itself. For example, medical products often use blue and green to give users a sense of safety and reliability; shopping products often use bright colors, the main purpose of which is to stimulate users' desire to buy.

First, we determine the main color:

After obtaining the brand color scale, select several colors from them and use them in the product for continuous trial and evaluation, and finally determine:

Secondary color selection

According to the HSB method, we can get the following 24 colors with the same color temperature:

With the H value (hue) at 15, and S and B remaining unchanged, increase to 24 color bands based on the primary color. The principle is 15/360=24, which just goes around the color wheel.

Auxiliary colors are secondary colors used to enrich applications. They contain one or more colors that are different from the primary color. In addition to brand communication, they have stronger practicality.

The choice of the real auxiliary color is determined according to the actual scene function.

For example, red is used for notifications, reminders, and cancellations, green or blue is used for confirmations and approvals, and orange and yellow are used for favorites, ratings, and reviews. These are all standard color types that have been established in the minds of users.

Draw red, yellow and green from the color wheel, cover these four colors with pure black #000, and select Hue for the blending mode. This way you can see if they are at the same brightness. Then correct and compare them according to actual needs until you feel comfortable.

Change the brightness and contrast of the selected auxiliary color to get the corresponding color scale. If you are not sure whether the color scale is scientific and reasonable, you can also use color tools, such as Antdesign's color matching tool. There are also many color matching plug-ins in Figma, which can quickly obtain the corresponding color scale. Then make reasonable color matching according to the actual application scenario.

Neutral color choice

Neutral colors are usually combined with text colors into a gray module, which usually includes background color, segmentation element color, feedback color, and disabled color. The background color is bound to be used when using the card design mode, which is generally a light gray with a little primary color.

The segmentation element colors include common wireframe elements, linear segmentation elements, and surface segmentation elements. The feedback colors include hover, press, and highlight. Neutral colors make the entire page more hierarchical.

The configuration of neutral colors is to develop a grayscale ladder from dark to light and apply it to elements of corresponding weights. The main basis for judging the lightness of color is the B (brightness) value in HSB.

Although neutral colors refer to having no personality, they do not have to be pure gray. A common practice is to add an appropriate amount of blue saturation to neutral colors to enhance the viewing experience (satisfying certain characteristics of RGB).

According to the selected brand color, use the above-mentioned center color selection method to select neutral colors:

Use previous works or existing design pages to continuously adjust and match them to ensure the best overall page effect. Of course, we also need to consider some special scenarios. If there are no complex or special application scenarios at this stage, we can first unify the colors. With the continuous improvement and iteration of the product, it is possible that the current neutral colors cannot meet the needs. Timely adjustments and updates should be made to ensure overall consistency and uniformity.

Text Color

In actual application scenarios, the color scale of text can be divided into 3-5 levels: important titles and text, secondary copy of auxiliary content, secondary level text, and the most secondary text that needs to be further weakened. Of course, when naming text colors, you can use primary colors, secondary colors, tertiary colors, or other naming rules to define each level of color. In addition, there are text colors with special semantics, such as link text colors, emphasized text colors, etc.

The intensity of text color represents the importance of the information, and also shows the hierarchy and logical relationship of the information, conveying to users how to find the required information correctly and quickly. At the same time, the text color also explains whether it is operable, which requires obvious contrast between the various color levels of the text and clear semantics.

Sam Gordain has an article on Medium titled "Pick Better Colors with the Hue Shift Method" which describes the key theories of the rules and techniques for step color selection. In summary, if you want to split a set of step colors from a base color, adjust the three attributes of hue, saturation, and brightness while adjusting the transparency or brightness. In this way, the final set of step colors will be more coordinated and the transition will be more natural.

Article link: https://medium.muz.li/natural-color-palettes-7769e5b38ecd

When matching colors, most of us know how to use the color matching rules such as similar colors, analogous colors, medium and different colors, contrasting colors, complementary colors, etc. But in actual work, this knowledge cannot meet our needs, especially when working with several designers on a project, many problems will arise: differences in auxiliary colors, text colors, backgrounds, dividing lines, shadows, etc., resulting in the inability to ensure visual consistency.

On many design websites, if you search for "color matching", you will see many articles about color matching. People discuss it from many principles and theoretical aspects, but there are few articles that describe in detail how to match colors and the process of color matching. After looking for many reference articles, color matching theories and color matching tools, we combined them with actual application scenarios to carry out color matching. I hope this article can help designers who have the same doubts.