Generate harmonious color palettes — complementary, analogous, triadic and more
Two colors directly opposite on the color wheel (180° apart). Creates maximum contrast and visual energy. Best for call-to-action elements that need to pop against a background.
Colors adjacent on the color wheel (30° apart). Creates cohesive, comfortable palettes that feel natural — like sunsets or forests. Ideal for backgrounds and content layouts.
Three colors evenly spaced (120° apart). Vibrant and balanced, offering variety while maintaining harmony. Common in children's brands and playful designs.
Four colors at 90° intervals. Rich palette with many possibilities. Complex to balance — best to let one color dominate and use others as accents.
Variations in lightness and saturation of a single hue. Very cohesive and elegant. Easy to implement in UI — one color family with different usage weights.
Shades add black (lower lightness); tints add white (higher lightness). Useful for creating hover states, disabled states, and depth in a single-color design system.
A complementary color is the color directly opposite on the color wheel — 180° away in HSL hue. Complementary pairs (blue/orange, red/green, yellow/purple) create the highest possible contrast between two colors, making each appear more vivid. Use them to create visual emphasis — a blue background with an orange CTA button immediately draws the eye to the button.
Color harmony means colors that look visually pleasing together. The human eye has learned certain relationships — complementary, analogous, triadic — from patterns in nature, and these relationships feel satisfying. Random color combinations often look jarring, while harmonic combinations feel intentional and professional. For product design, using a harmony rule also ensures your colors work well together across different elements: backgrounds, text, buttons, icons.
Start with your brand's primary color, then pick a harmony type: analogous for a calm, professional feel (SaaS, fintech); complementary for bold contrast (marketing sites, CTAs); monochromatic for elegant simplicity (luxury brands). Limit your palette to 3–5 colors: one primary, one secondary, one neutral (gray/white/black), and one accent for CTAs. Export as CSS variables so the palette is centralized and easy to update.
A shade is created by adding black to a color (reducing lightness in HSL). Shades look richer and more serious. A tint is created by adding white (increasing lightness). Tints look lighter and softer. A tone adds gray. In a design system, shades are typically used for hover/active states, dark backgrounds, and borders, while tints are used for light backgrounds and subtle highlights.
Copy the CSS output and paste it into your stylesheet's :root block. Then use the variables anywhere: background: var(--color-1);. This centralizes your palette — to change a color across your entire site, you only update one variable. Works in all modern browsers. For Tailwind, use the Tailwind export tab to add the palette to your tailwind.config.js.