What are complementary, analogous and triadic colours?

Complementary colours sit opposite each other on the colour wheel (180 degrees apart) for high contrast. Analogous colours are neighbours (about 30 degrees apart) for a calm, cohesive look. Triadic colours are evenly spaced three-way (120 degrees apart) for a balanced yet vivid scheme.

How are the palettes calculated?

The tool converts your base colour to HSL, then rotates its hue by the angle each harmony requires while keeping saturation and lightness steady. The monochromatic scheme instead varies lightness at a fixed hue. Each result is converted back to HEX and RGB.

Are these palettes accessible?

Colour harmony is about aesthetics, not contrast. Before using a pair for text on a background, check it against WCAG contrast ratios with a dedicated contrast checker — a harmonious pairing is not automatically an accessible one.

What is the Color Palette Generator?

Free colour palette generator. Pick a base colour and generate complementary, analogous, triadic, tetradic or monochromatic palettes using colour-wheel harmony, with HEX and RGB values and click-to-copy swatches. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Color Palette Generator

Name: Color Palette Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Good colour schemes are not guesswork — they follow the geometry of the colour wheel. The colour palette generator takes one base colour and builds a harmonious set using classic rules: complementary, analogous, triadic, tetradic and monochromatic. Every swatch shows its HEX and RGB value and copies to the clipboard on click.

The harmonies explained

Complementary: two hues 180 degrees apart — maximum contrast, great for accents.
Analogous: neighbouring hues about 30 degrees apart — cohesive and easy on the eye.
Triadic: three hues evenly spaced 120 degrees apart — balanced but lively.
Tetradic: four hues in two complementary pairs — rich, needs a dominant colour to anchor it.
Monochromatic: one hue at several lightness levels — clean and unmistakably unified.

How it works

The base colour is converted to HSL (hue, saturation, lightness), and the harmony is produced by rotating the hue by the required angle while holding saturation and lightness constant. The monochromatic scheme instead steps lightness up and down at a fixed hue. Each generated colour is converted back to HEX and RGB for use in CSS, design tools or code.

Harmony is not accessibility

A palette that looks balanced is not guaranteed to be legible. Before you set text in one of these colours over another, verify the pair against WCAG contrast ratios with a contrast checker — harmony governs how colours feel together, while contrast governs whether text can actually be read.