Color theory is the foundation of every good design. At its core, it involves three properties: hue (the color itself — red, blue, green), saturation (intensity — vivid vs. muted), and lightness (how light or dark the color is).
The color wheel organizes hues in a circle. Understanding the relationships between colors on this wheel is what makes the difference between a palette that feels random and one that feels intentional.
Two colors directly opposite on the color wheel (e.g., blue and orange). High contrast, vibrant, attention-grabbing. Best for CTAs and accent elements, but can be overwhelming if overused.
Three colors adjacent on the wheel (e.g., blue, blue-green, green). Naturally harmonious and calming. Great for backgrounds and content-heavy pages. Risk: can feel monotonous without a contrasting accent.
Three colors evenly spaced around the wheel (e.g., red, yellow, blue). Balanced and vibrant. Works well for playful, energetic designs. Use one dominant color and the other two as accents.
A base color plus the two colors adjacent to its complement. Less tension than pure complementary but still high contrast. A safe bet for beginners — hard to mess up.
Multiple shades and tints of a single hue. Elegant, sophisticated, and impossible to clash. Perfect for minimalist designs. Add contrast through lightness variation, not hue variation.
Four colors: two complementary pairs. The most complex scheme — offers maximum variety but requires careful balance. Let one color dominate; the other three should be supporting.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Accessible design is not optional — it is essential. Key rules:
Start with the Color Palette Generator: pick a base color and explore all six harmony types. Use the Color Picker to extract colors from inspiration images. Then refine with the CSS Gradient Generator for smooth transitions.