Color Harmony — How to Build a Beautiful Palette
Every memorable color palette starts with an understanding of the color wheel and the three properties that define any hue: hue (the pure color angle, 0–360°), saturation (intensity from gray to vivid), and lightness (brightness from black to white). When you adjust these three values in intentional ways, you move from random swatches to a palette that feels designed. The generator varies saturation between 35–85% and lightness between 20–85% to ensure every color is both vibrant enough to use and readable enough to read over.
Color harmony describes a specific relationship between hues on the wheel. Complementary schemes pair hues 180° apart — think deep teal and burnt orange — producing high contrast and visual energy, ideal for call-to-action buttons against backgrounds. Analogous schemes draw from neighboring hues (within ~30–60°), giving a calm, cohesive look perfect for illustrations, dashboards, or landing-page sections that should feel unified. Triadic schemes space three hues evenly at 120° intervals for vibrant yet balanced results; tetradic and split-complementary schemes add a fourth hue to maximise variety while keeping one dominant color anchoring the composition.
The lock feature is designed for real-world iteration: if you land on a brand color or a background shade you love, click its lock icon and hit Generate again — the generator will keep that color exact while building harmonious companions around it. For any palette you plan to use in a product or website, always verify text-on-background pairs with the Color Contrast Checker to meet WCAG 2.1 AA (4.5:1 for normal text) requirements. You can also explore tonal ranges for each swatch using the Color Shades Generator.
| Harmony Type | Description | Best For |
|---|---|---|
| Complementary | Two hues directly opposite on the wheel (180° apart) | High-contrast UI accents, CTAs, logos |
| Analogous | Three or more adjacent hues (within ~60°) | Calm, cohesive illustrations and backgrounds |
| Triadic | Three hues equally spaced at 120° intervals | Vibrant, balanced palettes with variety |
| Split-Complementary | One base hue + two hues flanking its complement | High contrast with more nuance than complementary |
| Tetradic (Square) | Four hues spaced evenly at 90° intervals | Rich, complex palettes for editorial or illustration |
Frequently Asked Questions
What is color harmony?
Color harmony refers to the aesthetically pleasing arrangement of colors based on their relationships on the color wheel. Harmonious combinations — like complementary, analogous, or triadic schemes — feel balanced and intentional because they follow predictable hue relationships rooted in color theory. A well-chosen palette guides a viewer's eye and communicates mood without needing words.
What is the difference between complementary and analogous colors?
Complementary colors sit directly opposite each other on the color wheel (e.g., blue and orange), creating strong contrast that makes each color appear more vivid. Analogous colors are adjacent on the wheel (e.g., yellow, yellow-green, green), producing a softer, cohesive look with minimal visual tension. Use complementary pairs when you need contrast to draw attention; choose analogous when you want the palette to recede harmoniously into the background.
How many colors should a UI color palette have?
Most UI color palettes work best with 4–6 purposeful colors: a primary brand color, a secondary accent, a neutral (for backgrounds and text), and one or two semantic colors for states like error or success. Generating 5 swatches in this tool gives you a solid starting point. More colors increase cognitive load and are harder to keep consistent across a product — use the Shades Generator to expand a single hue into a full tonal scale instead of adding entirely new hues.
Can I lock a color and generate the rest?
Yes. Click the lock icon on any swatch to freeze that color in place. When you click Generate again, locked colors stay exactly as they are while the remaining swatches are regenerated around them, keeping your base hue as a reference for new colors. You can lock multiple swatches simultaneously and share the resulting palette via the URL — state is encoded in the address bar automatically.
How do I check if my palette is accessible?
After generating your palette, copy any text-on-background color pair and paste both hex values into the Color Contrast Checker. It will calculate the WCAG 2.1 contrast ratio and flag whether the pair meets AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1) standards. Remember: never rely on color alone to convey meaning — pair it with labels, icons, or patterns to support colorblind users.