Micro Tools
Advertisement

Color Harmonies

Generate color harmonies from any base color, free. Pick a color and instantly get complementary, analogous, triadic, tetradic and shade palettes with click-to-copy HEX codes.

Your base color

Harmonies

Click any swatch to copy its HEX code.
Advertisement

How it works

Pick a base color or paste a HEX code. The tool converts it to HSL, rotates the hue wheel by the classic harmony angles (180 degrees for complementary, 120 for triadic, and so on) and shows each resulting palette as swatches. Click any swatch to copy its HEX code straight into your design tool or stylesheet.

Which harmony should I use

Complementary pairs give bold contrast for calls to action. Analogous colors sit next to each other and feel calm and cohesive. Triadic schemes are vibrant but balanced. Shades and tints give you darker and lighter versions of your base color for backgrounds, borders and hover states.

Related tools

Password generatorStrong random passwords with a strength meter. Meme generatorClassic top and bottom text on any image. Download as PNG. Color palettesHarmonious palettes, palette from image, and contrast checker.

Color Harmonies FAQs

What is a complementary color?
The color directly opposite on the color wheel, 180 degrees away. It creates the strongest contrast with your base color.
What is the difference between triadic and tetradic?
Triadic uses three colors spaced 120 degrees apart. Tetradic uses four colors forming a rectangle on the wheel, 90 degrees apart, giving a richer but harder-to-balance palette.
Can I copy the HEX codes?
Yes. Click any swatch and its HEX code is copied to your clipboard instantly.
What are shades and tints?
Shades are your base color darkened step by step; tints are the same color lightened. They are perfect for backgrounds, borders and hover states that match your palette.
Do I need design software to use this?
No. Everything runs in this page and the copied HEX codes paste directly into CSS, Figma, Canva or any design tool.
Advertisement