In the many UI design specifications, the colour section inevitably contains three types:
- Primary: the application’s core colour, the brand colour.
- Secondary: the supporting colours enriching the page’s visuals and communication.
- Neutral: text and background colours with no hue.
1. Choosing the primary colour
The primary colour is an application’s most core colour, the brand’s symbol: think of Ele.me’s blue, WeChat’s green, JD’s red, Taobao’s orange. Fixing the primary is not as complex as imagined: decide which emotion you want users to feel, associate that emotion with a rough colour range, then fine-tune.
2. Choosing secondary colours
Secondary colours are the supporting colours inside the application, one to several hues different from the primary; beyond brand communication they carry stronger practicality. The colour wheel mentioned before now comes into play. The wheel is a ring model where the colour sequence’s head and tail join, and it embodies a plain principle: the greater the angle between two colours on the ring, the greater their visual difference and the stronger the contrast.
These colour schemes cannot be picked blindly; they serve only as a standard for judging colour contrast. Real secondary colour choice is decided by the function of the actual scene: notifications, alerts and cancellation take bright red; confirm and agree take green or blue; favourites, rating and reviews take orange-yellow. These are colour types already established in users’ minds, and following convention is the simplest, safest route when no other idea exists. Where no standard element colour applies, use the wheel’s angle principle: the more a colour must stand out, the further from the primary it sits on the wheel, and the less, the nearer. In Ctrip’s app, with blue as primary, the payment and insurance tags that need emphasis use the primary’s complementary colour, catching the eye at once and stirring the urge to act.
3. Choosing neutral colours
Neutral colours are the colours of the page’s text and backgrounds, carrying the most basic layering and the duty of readability. Most beginners think them trivial; the truth is the opposite. Primary and secondary colours decide whether the interface dazzles; the neutrals decide whether the page works at all. Anyone who has seen many prototype cases understands: even in pure black, white and grey, we grasp and use those pages without the slightest obstacle.
XZS Tech is a Shenzhen-based development company. We build custom mini programs, WeChat and mobile apps, e-commerce systems and corporate websites, covering requirement analysis, design, development and after-sales support, and we hand over the source code at delivery.
If you are planning something along the lines of what this article describes, tell us the scenario and we will come back with an approach and a cost range. Call 0755-82494862, or reach us through the contact page at hk.xiaozhushoukeji.cn/en/contact-en/. The first conversation costs nothing.
Want to talk through what you just read?
We work end to end, from product design to launch. Tell us about your scenario and we can start there.
Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861