Basic UI color guide
It is alway a fight when it’s about COLOR. Designer sees it red, CEO sees it blue, CTO sees it #2D88F3, CMO says why not gradient like “IOS7?”.
Previous post about the UI Design system , I mentioned about Color as one crucial foundation of Design language. This topic is interesting to me because the color system of UI is not as easy as Brand guideline. Color in UI is very alive. One single color is not only a beauty spot on page but also a signal, sometimes leading to activities or presenting a hint of ideas.
Before we start, stick your mind with Design principles when you choose the color:
Who is the user? what is their nature, habit, preference?
What message does this UI tell? voice of tone?
What goal should the UI guideline achieve? (optional)
You good? here we go:
1.Primary colors
Usually brand colors. Primary colors is the dominant color that user most see in your product. One or 2 colors maximum is ideal.
Besides primary color, upon the need of particular situation, the designer can made up secondary color set. Example of Atlassian
2. Accent Color
Use to emphasize actions and highlighted information: text, call-to-action, floating button ( see material design ), progress bars, selection controls, special buttons, slider, links… From Primary color, accent color can be extracted by using color wheel combination: analogous, monochromatic, complementary, split complementary, triadic,…
In case the chosen accent color is too dark or light to the background, there should be another alternative options but should not too different to the original color.
Be playful and crazy here but don’t forget that accent color should just be around 10% of color of the whole product. The ideal model as mentioned in this article is 60–30–10: 60% is primary color, 30% is sub-primary and 10% is accent color. I find this reasonable since: if everyone is hero, no one is hero. However, since the real cases are various, we don’t need to follow this article, just be crazy with a strong reason.
3.Semantic Colors
Error, success, warning, information. These color are based on very firm research about psychology of signal:
- Red for error, danger, wrong.
- Green for success, safe, right.
- Yellow for alert, caution, warning.
- Blue for information.
4. Neutrals
White, black or gray schemes.
These colors are usually made for text and/over background. To do that, Material design has a good hack. Instead of defining specific code for black or grey, they use the opacity of black to apply typography value. In other words, no need to define grey color code, they adjust the opacity of black to 54% or 81% or so. Pretty smart, huh?
Above all, whatever ways, the key point is the contrast between objects and background. Checking the contrast of these colors is very important. try here
5.Chart ( optional )
To make a set of 10 or 20 colors in particular order for data visualization. Data engineer can use it for their work easier. However, it’s very hard work, read the reference for more tips.
- Categorical: contains multiple colors which contrast to each other and arrange as a specific order. This set presents different types of data ( bar chart, line chart, … ). Set different hues next to each other, not same hue but different saturation. Because when you look at the data, you want to present the audience the contrast between blue and green line, not blue line and some-kind-of-blue line, right? Special note: red and green are 2 meaningful colors in general ( green up, red down,… ), use them wise!
- Sequential: fixed, incremental changes ( heat map, tree map, … ). Make the contrast strong from light to dark, never stop in the middle.
- Polarize : a series of two extremes ( mostly heat map ). Tip: never use gradient with 2 opposite colors, always make stepping stone(s) between them.
- Special state of data: No data, false/null/incorrect data. I usually choose grey for null data and white for no data. Of course, that 2 colors a re distinctive enough among each other.
- Special elements ( mostly using neutral ) : tooltips, chart title, data points, chart axis, lines, values,…
One final note when design UI guideline:
Keep It Systematic Simple
References:
