Tools › Color Harmonies

Find harmonies for any color

Enter any color and instantly get harmonic palettes — complementary, analogous, triadic and more. Click any color to copy the HEX.

Color

How color harmonies work

Color harmonies are based on the position of colors on the color wheel. Complementary colors sit opposite each other and create strong contrast. Analogous colors are neighbors and create soft combinations.

When to use each type

Complementary — for accents and buttons. Analogous — for backgrounds and interiors. Triadic — for vibrant diverse designs. Monochromatic — for minimal and elegant solutions.

Based on HSL model

All harmonies are calculated in HSL (Hue, Saturation, Lightness) space. This allows precise rotation of the hue by the desired angle while preserving the saturation and lightness of the source color.

FAQ
What are complementary colors?
Complementary colors sit opposite each other on the color wheel — 180° hue difference. They create maximum contrast and work great for highlighting accents.
What is the difference between analogous and monochromatic?
Analogous colors are neighbors on the color wheel (±30°), different hues but similar in character. Monochromatic uses the same hue at different brightness and saturation levels.
When should I use triadic harmony?
Triadic harmony (three colors at 120°) gives vibrant and varied results. Great for children's brands, gaming interfaces and any project that needs energy and dynamism.
Is this tool free?
Yes, completely free with no limits. All calculations happen in your browser, no registration required.

More color tools

Color PickerUpload a photo and click anywhere — get HEX, RGB, HSL and color name Palette from ImageExtract 5–8 dominant colors from any image Palette BuilderGenerate N colors with guaranteed text readability Color VariationsLighter, darker, more saturated, paler, warmer, cooler Gradient GeneratorCreate beautiful gradients and copy the CSS code WCAG ContrastCheck AA and AAA accessibility — free Color Blindness SimulatorHow colors look to people with protanopia, deuteranopia and other types Tailwind ConverterNearest Tailwind class for any HEX color Color ConverterHEX ↔ RGB ↔ HSL ↔ CMYK instantly, with one-click copy Color by NameFind HEX by name — "terracotta", "indigo", "azure" CSS Filter for SVGRecolor SVG icons to any color via CSS without a code editor Color PalettesCurated palettes by theme — click a color to copy HEX