Color Palette Generator — Complementary, Analogous, Triadic, Tetradic, Monochromatic

More Color Tools Tools

CC

Color Converter

Bidirectional color converter — HEX, RGB, HSL, HSV, CMYK, plus a native color picker, all updating live as you type.

CC

Contrast Checker

Check the WCAG 2.1 contrast ratio between foreground and background colours — pass/fail for AA and AAA at a glance.

CM

Color Mixer

Mix two colours with a ratio slider — see the result in HEX, RGB, and HSL, and preview both original colours alongside the blended output.

T&

Tint & Shade Generator

Generate 10 tints and 10 shades from any base colour — 21 swatches with hex codes, one click to copy.

RC

Random Color Generator

Generate truly random colours with channel locking and a 5-colour history — copy the hex code with one click.

CN

Color Name Finder

Find the closest CSS named colour for any hex code — top 5 matches ranked by RGB distance.

CT

CMYK to Pantone

Find the closest Pantone colour for any CMYK mix — top 3 matches with official-looking names and swatches.

MC

Material Color Generator

Generate a full Material Design colour palette — 50 through 900 shades plus A100-A700 accent colours from any primary hex.

GG

Gradient Generator

Build live CSS gradients — Linear, Radial, and Conic — with multiple colour stops, angle control, and copyable CSS output.

IC

Image Color Picker

Pick any pixel colour from an uploaded image — zoom lens, live HEX/RGB/HSL, lock colour on click.

How to Use Palette Generator

Pick a base colour with the native colour picker or type a hex code, then choose one of five harmony types: Complementary (base + opposite), Analogous (base + two neighbours), Triadic (three evenly spaced), Tetradic Square (four at 90-minute intervals), or Monochromatic (five variations of the same hue). Each palette is generated instantly using hue-angle rotation in the HSL colour space, and every swatch shows its hex code — click to copy. The base colour always appears first.

About Palette Generator

Colour harmony is the foundation of every visually pleasing design, branding project, or UI system. The five classic harmony types implemented by this tool are drawn directly from the colour wheel theory taught in art and design schools and embedded in every major design application: complementary (two colours directly opposite on the wheel, such as blue and orange — maximum contrast), analogous (three adjacent colours, such as blue, blue-green, and green — smooth, serene, often found in nature), triadic (three colours equally spaced at 120-degree intervals, such as red, blue, and yellow — vibrant and balanced), tetradic or square (four colours spaced every 90 degrees, essentially two complementary pairs — rich and complex, ideal when you have multiple UI surfaces to distinguish), and monochromatic (variations of a single hue differing only in saturation and lightness — the safest, most cohesive palette for dashboards and data visualisation). The tool implements harmony using HSL hue rotation because colour-wheel logic is inherently angular: complementary is simply base hue + 180 degrees; analogous is base ± 30 degrees; triadic adds +120 and +240; and tetradic (square) adds +60, +180, and +240. All hue values are wrapped modulo 360 to stay on the wheel. The base colour's saturation and lightness are preserved for the derived colours, so the palette maintains the same "intensity character" of the original pick — a pastel base produces a pastel palette, a vivid base produces vivid companions. For the monochromatic palette, five swatches are generated from the same hue at different lightness levels: the base sits in the middle, flanked by two lighter variants and two darker variants. The saturation is held constant to preserve the colour's identity. Each generated colour is displayed as a clickable swatch with its 6-digit hex code. Clicking copies the hex to the clipboard with a brief "Copied!" confirmation. The base colour is always the first swatch, visually distinct with a slightly larger size or a border highlight, so you always know which colour was your starting point.

Details & Tips

How the HSL hue rotation works in detail: 1. The input hex code is parsed into its RGB components (0-255 each). 2. RGB is converted to HSL using the standard geometric formulas: - Normalise R, G, B to 0-1 by dividing by 255. - Lightness L = (max + min) / 2. - Saturation S = (max - min) / (1 - |2L - 1|), or 0 if max = min. - Hue H = computed as an angle 0-360: if max is R, H = ((G - B) / (max - min)) mod 6; if max is G, H = (B - R) / (max - min) + 2; if max is B, H = (R - G) / (max - min) + 4. Multiply the fraction by 60 to get degrees. 3. For each harmony type, new hue values are computed by adding the offset angles and wrapping modulo 360. 4. Each new (H, S, L) triple is converted back to RGB using the standard HSL-to-RGB formulas, then to a hex string `#rrggbb`. **Harmony offsets by type:** - Complementary: [+180] — 2 colours (base + 1) - Analogous: [+30, -30] — 3 colours (base + 2) - Triadic: [+120, +240] — 3 colours (base + 2) - Tetradic (Square): [+60, +180, +240] — 4 colours (base + 3) - Monochromatic: five lightness variants of the same hue **Monochromatic generation:** The base lightness (L) is the anchor. Two lighter variants are generated: L + 15 and L + 30 (clamped to max 95 so they never become pure white and lose all hue identity). Two darker variants: L - 15 and L - 30 (clamped to min 5). Saturation is held constant. All five share the same hue. **Edge cases:** - If the base colour is grey (saturation = 0), hue rotation has no visible effect — the palette will consist of identical or near-identical colours. The UI does not show a warning because this is expected behaviour (hue of grey is undefined). - Negative hue values and values > 360 are wrapped using `((h % 360) + 360) % 360`. - Invalid hex codes show an inline error message. **Performance:** The entire computation — parsing hex, converting to HSL, looping over N derived colours, converting back to hex — is well under 1 millisecond, so the palette updates instantly on every keystroke in the hex field or any click on a harmony-type button.

Frequently Asked Questions

How does the palette generator work?

You pick a base colour (hex input or colour picker), choose a harmony type, and the tool rotates the hue in HSL space to generate the palette colours. Each swatch is clickable to copy its hex code.

What are the five harmony types?

Complementary (base + opposite), Analogous (base + two neighbours at ±30°), Triadic (three colours 120° apart), Tetradic or Square (four colours 90° apart), and Monochromatic (five lightness variants of the same hue).

Why does the base colour always appear first?

So you always know which colour was your starting point. The base swatch is visually distinct with a border or slightly larger size.

What is a complementary palette?

Two colours directly opposite each other on the colour wheel (180° apart). They create maximum contrast — e.g. blue and orange, red and green, purple and yellow.

What is an analogous palette?

Three adjacent colours on the colour wheel — the base colour plus one neighbour on each side (30° apart). They create a smooth, serene harmony often found in nature.

What is a triadic palette?

Three colours equally spaced at 120° intervals. Triadic palettes are vibrant and balanced, even when the colours are highly saturated — e.g. red, blue, and yellow.

What is a tetradic (square) palette?

Four colours spaced at 90° intervals — effectively two complementary pairs. Tetradic palettes are rich and complex, ideal for designs with multiple UI surfaces.

What is a monochromatic palette?

Five variations of a single hue at different lightness levels — lighter tints and darker shades of the same base colour. Monochromatic palettes are safe, cohesive, and ideal for data visualisations.

Why use HSL hue rotation instead of RGB?

Because colour-wheel relationships are angular. Complementary is simply hue + 180° in HSL. Trying to compute harmony in RGB would require complex 3D transformations — HSL maps directly to the designer's mental model of the colour wheel.

What happens if my base colour is grey or white?

If saturation is 0 (grey/white/black), hue is undefined and rotating it produces no visible change. The palette will consist of identical colours. This is expected behaviour — pick a colour with non-zero saturation for meaningful harmonies.

How do I copy a colour from the palette?

Click any swatch and its 6-digit hex code is copied to your clipboard. A "Copied!" confirmation appears briefly.

Is my data sent to a server?

No — all palette generation happens locally in your browser using JavaScript. Nothing you type is transmitted anywhere.

Part of These Collections

Design & Media Studio

Also Available As

color palette generator, complementary color, analogous color, triadic color, tetradic color, monochromatic palette, color harmony, color wheel, palette creator