Color Harmony Generator
Pick a base colour and see the colour schemes that go with it. Complementary, analogous, triadic, tetradic, square and monochromatic harmonies are all generated from the hue wheel, with copyable values and CSS you can paste straight into a project.
How to Use
Choose a base colour using the picker or by typing a hex code. Every harmony updates instantly. Click any swatch to copy its hex, or copy the whole set as CSS custom properties.
- Seven classical harmony schemes
- Base colour under your control
- Hex, RGB and HSL for every swatch
- One-click copy per colour
- CSS custom properties export
Reading a harmony
Analogous schemes use neighbouring hues and feel calm and cohesive. Complementary schemes use opposite hues and feel energetic. Triadic and square schemes spread hues evenly around the wheel for a balanced, vivid palette. Monochromatic schemes stay on one hue and vary lightness and saturation instead.
Related Image & Color Tools
You might also need
Tools from other categories that people pair with the Color Harmony: