ffee All tools
EN 中文 FR DE

Color Harmony Generator

Build matching palettes from a base colour and export them as JSON or CSS variables.

Build a harmony palette

Base: #3b82f6 · Harmony: Complementary · Steps: 0
Hues are rotated on the colour wheel, so every swatch keeps the saturation and lightness of your base colour.

How to use the Color Harmony Generator

  1. Pick the base colour for the palette.
  2. Choose a harmony rule such as complementary, triadic or analogous.
  3. Copy the palette as CSS variables or as a JSON list.

Features

Advertisement

More tools

Color Converter Color Picker Color Palette Generator Random Color Generator Color Shades Generator Color Blindness Simulator Color Mixer Color Name Finder Image Color Picker Color Temperature Converter CSS Color Converter Image Compressor

Frequently Asked Questions

Common questions about the free online color harmony generator.

It rotates your base colour around the colour wheel by fixed angles and shows the matching palette as swatches with hex and HSL values.
Complementary, split complementary, analogous, triadic, tetradic, square and monochromatic, which covers the classic colour wheel schemes.
The complementary colour sits directly opposite your base on the colour wheel, 180 degrees away, which gives the strongest contrast.
Two hues are added 120 and 240 degrees from the base, so the three colours are evenly spread around the wheel and stay balanced.
Analogous colours sit next to each other on the wheel, 30 degrees either side of the base, giving a calm and closely related set.
Press Copy CSS for a block of custom properties, or press Copy JSON for a list holding the hex value, the HSL value and the role of each swatch.
Yes. Only the hue is rotated, so every swatch keeps the saturation and lightness of the base colour you picked.
Yes. Colour combinations are not protected, so any palette generated here is free for personal and commercial projects.
No. The whole calculation runs in your browser, so no colour and no palette ever leaves your device.

Last updated: October 10, 2026