Color theory basics for non-designers
Hue, contrast, and the 60-30-10 rule in plain language — enough color sense to make your side projects look intentional.
You do not need a designer's education to use color well — you need three working ideas and one rule of restraint. These are them, in plain language, for developers and makers whose side projects deserve better than default blue.
Hue, saturation, lightness
Every color is three decisions: hue (where it sits on the wheel — red, teal, gold), saturation (how vivid it is), and lightness (how close to black or white). Most "too colorful" interfaces are not wrong-hued — they are too saturated. When a palette fights you, pull saturation down before you change hues.
Contrast is a job, not a vibe
Color has exactly two jobs in a UI: carry meaning (this is a link, this is an error) and sit quietly behind text. Both jobs are actually contrast jobs. Body text needs roughly 4.5:1 contrast against its background; if your pale-gray-on-white text fails that, no palette choice downstream will save the design.
The 60-30-10 rule
Interiors borrowed it, and it works for screens: 60% of the interface is a neutral (background), 30% is a secondary (cards, sections), 10% is the accent — buttons, links, highlights. One accent color at 10% looks intentional. Three accents at equal weight look like a circus, no matter how good each color is.
- One accent — and if two are needed, the second is a tint of the first, not a new hue.
- Status colors are reserved — red/yellow/green belong to errors, warnings, and success. Never reuse them decoratively.
- Grays are colors too — a well-chosen warm or cool gray family does more for polish than any new accent.
Found this useful? Share it.