Color Theory for Non-Designers: The Only 3 Rules You Need

Design confidence in 5 minutes

You don't need a design degree to pick great colors. Follow these three rules and your work will look professional every time.

Rule 1: The 60-30-10 rule

60% dominant color (background), 30% secondary color (cards, sections), 10% accent color (buttons, links). This creates natural visual hierarchy.

Rule 2: Use a palette generator

Don't guess. Use Coolors.co or Adobe Color to generate harmonious palettes. Start from one brand color and let the tool generate complementary shades.

Rule 3: Contrast is king

Text must have a contrast ratio of at least 4.5:1 against its background (WCAG standard). Use WebAIM's contrast checker. If you squint and can't read it, neither can your users.

Quick palette for dark themes

• Background: #0a0a0a (near-black)
• Cards: #1a1a2e (dark navy)
• Accent: #22bbd6 (vibrant cyan)
• Text: #e0e0e0 (light gray, not pure white)

Master these three rules and you'll outdesign most developers.