Quick Answer
How does color harmony work? Pick a base color and a harmony type (Complementary, Analogous, Triadic, etc.). The generator calculates colors that work together based on their positions on the color wheel.
Frequently Asked Questions
A color harmony is a set of rules for selecting colors that work well together based on their positions on the color wheel. The generator supports Complementary (opposite hues), Analogous (adjacent hues), Triadic (three evenly spaced hues), Split-Complementary, and Tetradic schemes. Choose one from the Harmony dropdown, then adjust the base color to generate a matching palette.
Free palettes contain 5 colors. Pro subscribers can generate extended palettes of 6 to 10 colors, useful for comprehensive design systems that need more tonal variation.
Click any color swatch to copy its value as HEX, RGB, or HSL. Pro features include export as a CSS custom properties block, Tailwind config snippet, JSON object, and a PNG swatch sheet.
Yes — enable the Contrast Check option to see WCAG contrast ratios between color pairs. Colors that fail AA contrast are highlighted in red. Use this before finalising text and background combinations in your UI.
Yes — click the lock icon on any color swatch to fix it in place. When you regenerate or shift the palette, locked colors remain unchanged. This is useful for building a palette around a specific brand color.
Use the Extract from Image option (Pro) to upload a photo. The tool samples the dominant colors and builds a palette from them. This is useful for matching brand palettes to photography or for extracting a scheme from a reference image.