🎨 Utilities

Color Palette Generator

Generate harmonious color palettes from a base color. Schemes: monochromatic, analogous, complementary, triadic, tetradic and split-complementary.

Base color

Scheme

About the schemes

• Monochromatic: brightness variations of the same hue
• Analogous: neighboring colors on the color wheel (soft harmony)
• Complementary: opposite color on the wheel (high contrast)
• Split-complementary: base + the two colors adjacent to the complement
• Triadic: three equidistant colors (vibrant and balanced)
• Tetradic: four colors in a square on the wheel (rich and complex)

Harmonious colour palettes

Choosing colours that go together goes beyond personal taste. Colour theory brings rules that produce pleasing combinations out of the relationships on the colour wheel. The generator starts from a base colour and builds harmonious palettes following those classic schemes.

You pick the type of harmony, among monochromatic, analogous, complementary, triad, tetrad and split-complementary, and get the matching colours next, each with its code ready to copy. It's a quick way to create the visual identity of a project, a site or a presentation without guessing in the dark.

The palette is born in the browser, from the colour you set. Good company for designers, developers and anyone who needs a set of colours that works together.

Frequently asked questions

Why does the palette always come back with five colours, even for the triad?

Because every scheme fills five slots. A strict triad uses three hues 120 degrees apart; here the strip steps 60 degrees at a time, so the actual triad sits in the first, third and fifth swatch, and the other two are in-between hues. For the tetrad, the 90-degree square occupies the first four swatches and the fifth is a hue 45 degrees along, with slightly lower saturation.

I typed a hex code in the text box and the palette stayed the same. Why?

The text box counts only when it holds the full value: a hash sign plus six hexadecimal digits, like #3b82f6. Three-digit shorthand, a code with no hash, or a half-typed value get ignored, and the palette keeps coming from the colour swatch beside it, which still holds the last valid value. Paste the whole code in one go, or click the swatch and pick the tone there.

Why do the five colours look nearly identical when I start from white, black or grey?

Every scheme works by rotating the hue, and a tone with no saturation has no hue to rotate: on grey, black or white, turning 120 or 180 degrees hands back the same grey. Monochromatic also runs into lightness ceilings — the two light swatches stop at 92% and 85%, the dark ones at 12% and 6% — so a very light base yields two near-identical bands at the top. Start from a colour with some saturation to get any spread.

Related Tools

🎨

Color Shades Generator

Generate shades and tints of any color. Click to copy the HEX, RGB or HSL code. Perfect for design systems and UI development.

🎨

Color Mixer

Mix two colors and get the resulting color. Control the percentage weight of each color. Result in HEX, RGB and HSL.

🖼️

Image Color Picker

Load an image and discover the color of any pixel in real time. Hover to see HEX, RGB and HSL with a magnifier. Automatically extracts the dominant color palette.

🔃

Invert Image Colors

Invert all colors in an image (negative effect). Each pixel is replaced by its RGB complement. Processed in the browser.

🎨

Color Picker

Pick a color and get its HEX, RGB and HSL values with one click to copy.

👁️

WCAG Contrast Checker

Check the contrast between text and background colors per WCAG 2.1 guidelines. Shows the ratio and AA/AAA levels for normal and large text.