Color Theory for Developers: Creating Harmonious Palettes
Developers often struggle with color. "I'm not artistic," they say. But color in UI design is math and science, not magic. By understanding a few core rules, you can generate professional schemes programmatically.
HSL: The Developer's Friend
Forget Hex codes (#3498db) and RGB. Use HSL (Hue, Saturation, Lightness).
- Hue (0-360): The color wheel position (Red is 0, Blue is 240).
- Saturation (0-100%): How "intense" the color is.
- Lightness (0-100%): How close to black or white it is.
Why? To create a darker shade for a hover state, you just decrease L by 10%. To create a complementary color, you just add 180 to H. It makes logical sense.
The 60-30-10 Rule
A classic interior design rule that applies perfectly to UI.
- 60% Primary neutral: Your background (White/Grey/Black).
- 30% Secondary color: Your brand color (Headers, Logos, decorative elements).
- 10% Accent color: Your CTA buttons and alert states.
Avoiding "Muddy" Colors
One common mistake is using pure grey saturation (0%). In the real world, shadows are rarely pure grey; they are usually slightly blue. Tip: Add a tiny bit of saturation (3-5%) and a blue hue (220) to your greys to make them feel "cool" and premium, or a orange/yellow hue for "warm."
Contrast and Accessibility
Always prioritize contrast. A beautiful button is useless if colorblind users can't read the text.
- Use tools like the WebAIM Contrast Checker.
- Just because two colors look good next to each other doesn't mean they work as text-on-background.
Semantic Colors
Define colors by function, not name.
- Don't verify:
$blue-500 - Do verify:
$action-primary - Do verify:
$status-error(usually Red) - Do verify:
$status-success(usually Green)
Conclusion
Color evokes emotion. Blue is trust (Banks), Red is urgency (Errors/Sales), Green is growth (Money). By combining the psychological effects with the mathematical precision of HSL, you can build palettes that look designed, not guessed.