Color Harmony Generator
Start with one color and generate everything around it. Get classic harmony schemes (complementary, analogous, triadic, split-complementary, tetradic, and square), a full set of tints and shades, and a developer-ready 50 to 950 UI scale spaced in OKLCH. Check WCAG contrast on every stop, preview the result for color blindness, and export to Tailwind v3 or v4, CSS variables, SCSS, JSON, or OKLCH. Everything runs in your browser, with no account and nothing uploaded.
Color wheel
Click the wheel to set hue and saturation, drag the lightness slider, or hit the center button to randomize a fresh base color.
Or start from a curated pack, sized for what you are building.
Live UI preview
Export
Frequently asked questions
What is color harmony?
Color harmony is the use of color combinations that look balanced and pleasing together. Most harmonies are built by taking one base color and rotating its hue around the color wheel by fixed angles, which is exactly what this generator does for you.
What are the main color harmonies (complementary, analogous, triadic, tetradic)?
Complementary uses two colors opposite each other on the wheel. Analogous uses neighbors about 30 degrees apart. Triadic uses three colors evenly spaced 120 degrees apart. Tetradic and square schemes use four colors, and split-complementary softens a complementary pairing. This tool builds all six from your base color.
How do I build a color scheme from one color?
Enter a hex, RGB, or HSL value, spin the color wheel, or use the picker, then choose a scheme. The Harmony tab shows the resulting colors with their values, and you can copy any swatch or export the whole scheme to your format of choice.
What is the difference between tints and shades?
A tint mixes your color toward white to make it lighter, while a shade mixes it toward black to make it darker. The Tints & Shades tab generates an even range of both around your base color.
How do I generate a Tailwind color scale from a hex?
Open the UI Scale tab to get a full 50 to 950 ramp spaced in OKLCH for perceptually even steps. Then pick the Tailwind v3 or Tailwind v4 export to copy a ready-to-paste color config or @theme block.
Is it free, and does my color stay private?
Yes. The generator is free with no account, and all the color math runs locally in your browser, so nothing you enter is uploaded anywhere.