Color Palette Generator Online - Free Color Scheme Tool

Features

Complementary colors

Analogous colors

Triadic scheme

Split-complementary

CSS variable export

How to Use

1. Pick a base color and a harmony scheme — the stage fills with a palette.

2. Press Space (or Shuffle) for variations. Hover a column to copy, edit, open its shades ladder, or lock it through shuffles.

3. Switch the stage surface (white / grey / deep / checker) to proof the palette against different surrounds, then export as CSS, Tailwind, JSON, SVG or PNG.

About this tool

Good palettes are rarely random: most follow relationships on the colour wheel. Starting from one base colour, this generator builds six-colour palettes using classic harmonies — analogous (neighbouring hues for calm designs), monochromatic (one hue at different lightness), complementary (opposite hues for strong contrast), split-complementary, triadic and tetradic. Each column shows its value and an approximate colour name; you can copy it, edit it, open a ladder of lighter and darker shades, or lock it so it stays put while you shuffle the rest. Preview the palette on white, grey, dark or transparent surroundings, then export it as CSS variables, a Tailwind colour config, JSON, SVG or a PNG swatch sheet.

Frequently Asked Questions

What is the difference between the harmony schemes?

Analogous uses neighbouring hues, monochromatic keeps one hue and varies lightness, complementary pairs opposite hues, split-complementary uses the two hues beside the complement, triadic spaces three hues 120° apart, and tetradic uses four hues 90° apart.

Which scheme works best for a website?

Analogous or monochromatic palettes are easiest for interfaces because they feel calm. Complementary and triadic schemes give strong accents, so a common approach is one dominant colour, one supporting colour and a small amount of the complement for calls to action.

How do locked colours work?

Locking a column keeps that exact colour when you press Space or Shuffle to generate variations. It is useful when a brand colour is fixed and you want to explore what goes with it.

Are the generated palettes accessible?

Harmony does not guarantee readable contrast. Before using two palette colours for text and background, check the pair with a contrast checker against WCAG AA (4.5:1 for body text).

What formats can I export?

CSS custom properties, a Tailwind theme.extend.colors snippet, a JSON array of HEX values, an SVG file with the swatches, and a 1500 × 900 PNG with the values printed on each column.