Picking colors for a user interface seems creative but is actually systematic. My early projects had beautiful hero sections with carefully selected gradients, but the rest of the interface was a mess of inconsistent grays and slightly-off blues. A polished UI requires a color system, not a collection of nice swatches.
Start With Constraints
Every UI needs five color categories: a primary action color for buttons and links, a neutral scale for text and backgrounds, success green, error red, and warning amber. Some designs add a secondary accent, but you can ship a professional product with just these five. More than that, and you risk visual noise that distracts from user tasks. The temptation to start on Dribbble saving inspiring shots leads to a Frankenstein palette — bits from different designers that were never meant to coexist.
The 60-30-10 Rule
Interior designers have used this for decades and it works perfectly for digital interfaces. 60% of your visual space should be neutral backgrounds and text. 30% should be supporting secondary colors — tinted backgrounds, borders, inactive elements. The remaining 10% is your primary action color — the vibrant shade that draws eyes to buttons and links.
This ratio creates natural hierarchy without effort. Your primary buttons stand out because they own that 10% exclusively. I have seen countless projects where the developer used the brand color everywhere — teal navbar, teal buttons, teal headings, teal borders. The result is that nothing stands out because everything screams equally loud.
Accessibility Is the Foundation
WCAG requires a minimum contrast ratio of 4.5:1 between text and background. In practice, this means gray text on light backgrounds needs to be darker than you might prefer aesthetically. The trendy light gray placeholder text often fails — #9CA3AF on white has only 3.0:1 contrast. Darkening to #6B7280 pushes it to 4.6:1, passing the requirement. The visual difference is subtle, but the accessibility difference is significant.
Never rely on color alone to communicate information. A red border on an invalid form field means nothing to someone with red-green color blindness. Always combine color with icons and text labels. This redundancy helps everyone, not just colorblind users — anyone in bright sunlight with screen glare benefits from multiple visual cues.
Test in Context, Not Swatches
Colors interact with each other. A blue that looks perfect next to white might feel dull next to a vibrant hero image. My testing process now starts with building a single screen using the candidate palette — navigation bar, hero section, card grid, form with inputs, success and error states, and footer. I view it on my laptop, phone, and external monitor. Then I show it to someone who has not been staring at it all day. This 30-minute investment catches problems that weeks of swatch-staring will miss.