The 60-30-10 Rule

The most practical rule for web color palettes: use your primary color for 60% of the design, a secondary color for 30%, and an accent color for 10%. This creates visual harmony while allowing enough contrast to guide the eye.

Color Harmony Types

• Complementary: Opposite colors on the color wheel (e.g., blue + orange). High contrast, energetic.
• Analogous: Colors adjacent on the wheel (e.g., blue, blue-green, green). Harmonious, calm.
• Triadic: Three colors evenly spaced (e.g., red, yellow, blue). Vibrant, balanced.
• Monochromatic: Different shades of one color. Sophisticated, cohesive.

Building Your Web Palette

1. Start with your brand's primary color
2. Use the color wheel to find complementary or analogous colors
3. Check contrast ratios for accessibility (WCAG requires 4.5:1 for body text)
4. Test your palette in context — colors look different on screen vs in isolation

Tools to Help

• Color Picker — pick and compare colors
• Color Palette Generator — extract palettes from images
• Contrast Checker — verify accessibility