tool4.dev

Generators / LOCAL TOOL

Color Harmony Generator

Pick a base color and generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes locally.

Runs locally — input is never uploaded
Pick or enter a CSS color
Hue217°
Opacity100%

Pick a color or enter a CSS color value

HarmonyLive palette
Harmony type

Choose a harmony to see its relationship on the wheel.

Triadic palette3 colors

Your palette will appear here.

Open in Color Converter →

WHAT IT DOES

Find the colors that belong with the one you chose.

Choose one base color and explore deterministic complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes. The relationships are generated in OKLCH, mapped into sRGB for reliable display, and updated live in your browser without uploading the color or the palette.

Why use it?

Use it to explore related colors from a base swatch when building a palette, while leaving accessibility and semantic color choices to a separate review.

How to use this tool

  1. Choose the base color and a relationship such as complementary, analogous, or monochromatic.
  2. Review the resulting swatches and any gamut-mapping note, then copy a HEX value, the palette, or CSS variables.
  3. Test actual foreground/background pairs in Color Contrast. A harmonious palette does not automatically provide readable text or distinguishable states.

Details and limitations

  • Hue-based palettes preserve the base lightness and chroma where possible, then rotate the OKLCH hue by the mode's documented geometry. The tetradic rectangle uses 0°, 60°, 180°, and 240° rather than repeating the square.
  • Monochromatic palettes keep one hue and vary lightness and chroma in a stable lighter-to-darker sequence, with the original base called out in the middle.
  • Colors outside sRGB are mapped by reducing OKLCH chroma until the visible color is displayable. A small status note identifies palettes that needed mapping.
  • Click any swatch to copy its HEX value, Copy palette for a labeled HEX list, or Copy CSS for deterministic custom properties. Transparent colors retain their alpha over a checkerboard.

COMMON QUESTIONS

Color Harmony questions

Which harmony modes are included?
The generator includes complementary, analogous, triadic, split-complementary, tetradic rectangle, square, and monochromatic modes. Each mode has fixed offsets or a documented lightness sequence.
Why does a generated color say mapped to sRGB?
OKLCH can describe colors outside the range ordinary screens and HEX can represent. The generator reduces chroma while keeping lightness and hue as close as possible, so the swatch remains a valid displayable sRGB color.
Can I inspect a palette color in the converter?
Yes. Use Open in Color Converter below the palette to continue with the site's full color-space conversion view. The palette itself stays focused on relationships rather than repeating every conversion.