Color Harmony
Generate beautiful color palettes from any base color. Complementary, analogous, triadic, tetradic, split-complementary, and monochromatic schemes — with one-click copy and CSS / Tailwind / JSON export.
About this tool
A color harmony is a set of colors spaced around the color wheel in a proven relationship. Because the spacing follows a fixed geometric rule, the resulting palette tends to look balanced and intentional rather than random. This tool generates six of the most widely used schemes from any base color you pick.
The schemes differ by how many colors they include and where they sit on the wheel: complementary adds the single color directly opposite (maximum contrast), analogous picks the two neighbors for a calm, blended look, triadic places three colors 120° apart for a vibrant but balanced set, tetradic (rectangle) uses two complementary pairs, split-complementary takes the two colors flanking the complement, and monochromatic varies only lightness for a clean, single-hue feel.
Example: starting from a base of #4a7aef, the complementary scheme adds #efba4a (warm gold), the analogous scheme adds the neighboring blues and purples, and triadic adds two more evenly spaced hues. Export the result as CSS custom properties, Tailwind config, or JSON and drop it straight into your project.
FAQ
Which color harmony should I pick? ›
It depends on the mood you want. Complementary creates strong contrast (good for call-to-action buttons), analogous feels calm and unified (good for backgrounds), triadic is vibrant and balanced, and monochromatic is the safest choice for a clean, minimal look.
What is the difference between split-complementary and complementary? ›
Complementary uses one color opposite the base; split-complementary uses the two colors on either side of that opposite point. The result is less harsh and easier to balance, which is why designers often prefer it for full interfaces.
Why do my generated colors look different in HSL vs RGB? ›
The harmony rules are calculated in HSL space (rotating the hue), which is how the wheel works. When the colors are converted back to RGB for display, very saturated hues can shift slightly because HSL and the screen gamut are not perfectly aligned.
Can I export the palette to my code? ›
Yes — the export buttons produce CSS custom properties, a Tailwind config snippet, or a JSON array, so you can paste the palette directly into a stylesheet or design system.
Can I extract a palette from a photo instead of generating from a color? ›
Yes — the <a href="/color-palette">Color Palette</a> tool extracts dominant colors from any image using median-cut quantization. It gives you a small set of representative swatches sorted by frequency, with hex, RGB, HSL values, and CSS exports. Use harmony generation here when you have a brand color and need a coordinated scheme; use Color Palette when you want the main colors from a real photo or design mockup.