What harmony modes are available?

Six modes: Complementary (opposite hue), Analogous (adjacent hues), Triadic (three evenly spaced), Tetradic (four evenly spaced), Split-Complementary, and Monochromatic (five shades of the base hue).

What export formats does the tool support?

You can copy the palette as CSS custom properties (--color-1: #…), a JSON array of HEX strings, or a Tailwind config colors object ready to paste into tailwind.config.js.

What does the Randomize button do?

It picks a random pleasant base color (with reasonable saturation and lightness) and regenerates the palette in the current harmony mode.

Are HEX, RGB, and HSL all shown?

Yes — each swatch card shows all three representations so you can copy whichever format your project needs.

design Free No signup

Color Scheme Generator

Generate harmonious color palettes from a base color using complementary, analogous, triadic, and other harmony rules.

Loading tool…

About this tool

Pick any base color and instantly generate a full palette using six harmony modes: Complementary, Analogous, Triadic, Tetradic, Split-Complementary, and Monochromatic. Each swatch displays HEX, RGB, and HSL values. Export your palette as CSS custom properties, a JSON array, or a Tailwind config snippet — or hit Randomize to discover a new palette.

How to use

1 Use the color picker or type a HEX value to set your base color.
2 Select a harmony mode from the buttons (Complementary, Analogous, Triadic, etc.).
3 Click any swatch to copy its HEX code, or use the Export dropdown to copy the full palette as CSS, JSON, or Tailwind config.
4 Hit Randomize to explore a new color combination, then fine-tune the base hue with the picker.

Frequently Asked Questions

Related tools

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.

Image Metadata Viewer

Extract and display file info, image dimensions, and EXIF data from any image.