← Dev Tools

How to Use

1

Enter a base colour

Type any colour as hex, RGB, HSL, OKLCH, OKLab, or Lab — any format Colour.parse supports.

2

Choose harmony type

Select from Complementary, Analogous, Triadic, Tetradic, or Split Complementary.

3

View harmonies

See your base colour alongside its harmonies as colour swatches with hex codes.

Colour harmony types

Complementary colours sit opposite each other on the colour wheel, creating high contrast. Analogous colours sit side by side for a harmonious, low-contrast feel. Triadic uses three evenly spaced colours for a vibrant palette. Tetradic (double complementary) uses four colours for rich variety. Split Complementary uses a base colour plus two adjacent to its complement.

About Harmony Generator

Understanding how colours relate to each other unlocks better palettes, and the relationships are precisely defined by colour theory. ILikePdf Harmony Generator computes complementary, analogous, triadic, tetradic, and split-complementary sets from any base colour, with hue and saturation controls for fine-tuning. Use the generated sets for illustrations, dashboards, and data visualization. The math runs instantly in your browser, making experimentation fast and free.

How to generate colour harmonies Harmony Generator

Step 1: Pick a base colour from the wheel or enter a HEX value.
Step 2: Select a harmony type: complementary, analogous, triadic, tetradic, or split-complementary.
Step 3: The generator computes the matching colours instantly.
Step 4: Tweak hue and saturation with the sliders.
Step 5: Copy the harmony set for your design files.

Common use cases for Harmony Generator

  • Build colour schemes for illustrations and infographics.
  • Pair accent colours that work together in layouts.
  • Teach and explore colour theory relationships.
  • Generate consistent multi-colour data-viz palettes.

Pro tips

  • Complementary pairs create strong focal points.
  • Analogous schemes are the safest for large surfaces.
  • Everything is computed locally in the browser.

Was this tool helpful? Rate it

Tap a star to rate.