Practical color tool

Color Harmony Generator

Generate complementary, analogous, triadic, split-complementary, tetradic and monochromatic color harmonies.

Open in the main toolBack to tool
EnglishItalianoEspañolFrançaisDeutsch

What this page gives you

  • Choose a harmony based on visual tension and interface role.
  • Use complementary colors for accents, analogous colors for calm layouts.
  • Check contrast before using harmony colors as text or buttons.

Good for

  • Color theory
  • UI palettes
  • Brand accents

How to use it

Palette generatorGenerate accessible color palettes, export CSS, Tailwind, SCSS, JSON, SVG and PNG palette assets, check WCAG contrast and extract colors from images locally.WCAG checkerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.Image extractorExtract a dominant color palette from PNG, JPG or WebP images. Processed locally in your browser — nothing uploaded.
Can I use this with the main generator?

Yes. Start from this page, then open the main Chromoforge tool with the same base color and export the palette.

Which harmony rule fits a product interface?

Analogous and monochromatic schemes stay calm and are easy to keep accessible, because the hues sit close together and you vary lightness instead. Complementary gives you one strong accent against a neutral base. Triadic and tetradic sets are better suited to illustration and data visualisation than to dense UI.

Does a harmonious palette automatically pass accessibility checks?

No. Harmony describes relationships between hues; contrast depends on lightness. Two perfectly complementary colors at the same lightness are nearly unreadable on top of each other. Always check every text and background pair against 4.5:1 for body text.