UI Color Strategies
Rules and techniques for applying color effectively in User Interfaces.
The 60-30-10 rule
The 60-30-10 rule is a classic interior design principle adapted perfectly for UI. A balanced layout should be roughly 60% dominant color (usually neutral surface/background), 30% secondary color (cards, heavy typography, secondary buttons), and 10% accent color (CTAs, key highlights).
If everything is brightly colored, nothing stands out. Using the accent sparingly (10%) ensures that when a user needs to find the 'Buy' button, their eye is instantly drawn to it.
| Proportion | Role | UI Examples |
|---|---|---|
| 60% | Dominant | Page background, whitespace, main surfaces |
| 30% | Secondary | Headers, sidebars, secondary buttons, text |
| 10% | Accent | Primary CTAs, badges, active states |
According to the 60-30-10 rule, what should the 10% accent color be primarily used for?
Tinting neutrals
Pure neutral greys (`#808080`, `hsl(0, 0%, 50%)`) can look dead, muddy, or cheap in a UI. To create a premium feel, designers tint their neutrals by mixing a small amount (2-5% saturation) of the brand's primary hue into all grey surfaces and borders.
A blue-tinted grey (slate) feels professional. A yellow-tinted grey (sand/warm grey) feels organic and approachable. This subtly ties the whole design system together.
Why do UI designers typically add a slight tint to their grey neutrals?
Designing for colorblindness
Roughly 8% of men and 0.5% of women have some form of color vision deficiency (CVD). The most common is red/green colorblindness, meaning a red 'Error' state and a green 'Success' state might look identical.
The golden rule of accessibility: Never use color as the only means of conveying information. Always pair semantic colors with icons (✓ and ✗), distinct text labels, or different shapes to ensure the message is clear to everyone.
How can you ensure a success state and an error state are distinguishable for colorblind users?