What are the different color palette types?

Complementary: two colors opposite on the color wheel. Analogous: three adjacent colors. Triadic: three evenly spaced colors (120° apart). Tetradic: four colors in two complementary pairs. Monochromatic: multiple shades of the same hue.

What is a complementary color palette?

A complementary palette uses two colors directly opposite each other on the color wheel (180° apart). This creates high contrast and is useful for call-to-action elements and making content stand out.

Is my data sent to a server?

All color calculations run locally in your browser. No data is sent to our servers.

Color palette generator

Generate a harmonious color palette from any base color. Pick your starting color, choose a palette type, and instantly see 4–5 coordinated swatches with their hex, RGB, and HSL values. Copy individual colors or all at once as CSS custom properties. All calculations run locally in your browser.

Base color

#3b82f6

#f6af3c

PALETTE TYPE

How it works

All color calculations use the HSL (hue, saturation, lightness) color space. The base color is converted from hex to HSL, and the hue is rotated by a fixed amount depending on the palette type (complementary: 180deg, triadic: 120deg/240deg, etc.). The adjusted hue values are converted back to RGB and then to hex for display. All arithmetic runs in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

For lightening or darkening a single colour, try tints and shades. To convert any chosen swatch between HEX, RGB, and HSL, use the colour converter. For testing readable text colours on your palette, see the contrast checker.

Frequently asked questions

What are the different color palette types?: Complementary: two colors opposite on the color wheel. Analogous: three adjacent colors. Triadic: three evenly spaced colors (120° apart). Tetradic: four colors in two complementary pairs. Monochromatic: multiple shades of the same hue.
How are the palette colors calculated?: All calculations use HSL (hue, saturation, lightness) color space. The hue is rotated by a fixed amount depending on the palette type, while saturation and lightness are adjusted for visual balance.
What is a complementary color palette?: A complementary palette uses two colors directly opposite each other on the color wheel (180° apart). This creates high contrast and is useful for call-to-action elements and making content stand out.
Is my data sent to a server?: All color calculations run locally in your browser. No data is sent to our servers.

Color palette generator

How it works

Processing runs in your browser

Related operations

Frequently asked questions

Related tools