I've always been terrible at picking colors. Every side project I build ends up looking like it was designed by a robot โ because it was. But learning the basics of color theory changed that.
The 60-30-10 Rule
The easiest rule in design:
- 60% dominant color (usually your background)
- 30% secondary color (cards, sections)
- 10% accent color (buttons, links, highlights)
That's it. Follow this and your app won't look like a clown exploded.
HSL > Hex
If you're still picking colors in hex, switch to HSL (Hue, Saturation, Lightness). It's way more intuitive:
- Hue = the actual color (0-360 on the color wheel)
- Saturation = how vivid (0% is gray, 100% is full color)
- Lightness = how bright (0% is black, 100% is white)
Want a darker shade of your button color? Just lower the lightness. Easy.
My Color Palette Generator
I built a quick tool that generates harmonious palettes using different color schemes โ analogous, complementary, triadic, and more. You can lock colors you like and regenerate the rest.
Check it out on my projects page.
Takeaway
You don't need to be a designer. You just need a few rules and a decent palette generator.