The Color Wheel
Primary (red, blue, yellow), secondary (orange, green, purple), tertiary (6 combinations). Understanding relationships between these colors drives every design decision.
Color Harmonies
Complementary: opposite colors (blue/orange) — high contrast, energetic. Analogous: adjacent colors (blue/teal/green) — harmonious, calming. Triadic: equidistant (red/yellow/blue) — vibrant, balanced. Split-complementary: one color + two adjacent to its complement — versatile, less tension than complementary.
For more on this topic, see our guide on best free design tools for non-designers in 2026.60-30-10 Rule
60% dominant color (background), 30% secondary (containers, cards), 10% accent (buttons, links, CTAs). This ratio creates visual hierarchy without chaos.
Contrast & Accessibility
WCAG 2.1 requires 4.5:1 contrast ratio for normal text, 3:1 for large text. Use WebAIM Contrast Checker. Never rely on color alone to convey information — add icons or text labels.
Tools
Coolors.co — Generate palettes with spacebar. Adobe Color — Extract palettes from images. Realtime Colors — Preview your palette on a real website layout instantly.
Dark Mode Tip
Dont just invert colors. Use dark gray (#1a1a2e) not pure black. Reduce saturation of accent colors. Increase spacing for readability.