Palette Generator

Build a harmony from a single colour, with the swatches, the numbers and the CSS ready to copy.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

Palette Generator converts your base colour to HSL and rotates its hue by fixed angles to build the scheme you choose. Complementary returns two colours 180° apart, triadic three spaced at 120°, tetradic four spaced at 90°, and split complementary places two colours either side of the complement at a spacing you set. Saturation and lightness are carried across from the base untouched, which is what makes the set read as one scheme rather than a handful of unrelated colours.

Three of the harmonies move something other than hue. Analogous walks the neighbouring hues in steps of the spacing you pick, putting your own colour in the middle of the run at an odd count and one place before the middle at an even one. Monochromatic holds hue and saturation still and lays out between two and twelve rungs of lightness. Tints and shades keeps both hue and saturation and slides lightness from one end of its range to the other, landing your colour in the centre when the count is odd. Whichever you run, the output is the same three things: a grid of swatches labelled with hue, saturation and lightness; a table of hex, RGB, HSL and each colour's WCAG contrast against white and against black; and a :root block of CSS custom properties.

Three limits decide whether what comes out is usable as it stands. The harmony is worked out in HSL, which is arithmetic rather than perceptual — rotating the hue holds the numbers still but not the apparent brightness, so a yellow and a blue built from the same base will not carry equal weight on a page, and the result still wants an eye on it before it ships. Monochromatic then ignores your base lightness completely and spreads its rungs from 88 per cent down to 12 per cent, so your own colour never appears among those swatches, only its hue and saturation. Tints and shades spends its first and last swatch on pure white and pure black every time, which at a count of three leaves exactly one real colour between them. None of this leaves the page: the colour is read, rotated and printed inside this browser tab, and the swatches keep coming with the network off.

How to use it

  1. Set the base colour. The picker in the settings is the quick route. For an exact value, type one into the input box instead: 3, 4, 6 or 8 hex digits, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(srgb …) and the CSS colour names all parse, and whatever sits on the first line beats the picker.
  2. Choose the harmony. Seven are offered. Complementary, split complementary, triadic and tetradic always come back at two, three, three and four colours; analogous, monochromatic and tints and shades are the three whose length you set yourself.
  3. Set the count and the spacing where they apply. Both controls hide themselves when the chosen harmony has no use for them. Colours, 2 to 12, shows for analogous, monochromatic and tints and shades. Hue spacing, 5° to 90°, shows for analogous and split complementary — complementary, triadic and tetradic are pinned to 180°, 120° and 90°, and the two lightness harmonies never rotate hue at all.
  4. Name the custom properties. The prefix decides the variable names, so the default gives --palette-1 upwards with each swatch label beside it as a comment. Letters, digits, hyphens and underscores are left alone, every other character becomes a hyphen, hyphens at either end are trimmed, and a box left empty returns to palette.
  5. Read the swatches, then copy the CSS. The grid shows each colour with its HSL breakdown, the table carries the codes and the contrast figures, and the code block below is the deliverable to paste into a stylesheet.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Choosing an accent for a brand colour

Complementary gives the one hue furthest from what you already have, which is the usual starting point for a button that has to separate itself from everything around it.

Building a set of chart series colours

Triadic and tetradic space the hues evenly around the wheel, so neighbouring series stay tellable apart instead of blurring into a single band.

Filling out a scheme that reads as flat

Analogous at a small spacing gives neighbouring hues that hold one mood, which suits backgrounds, borders and hover states that should not announce themselves.

Handing a scheme straight to a stylesheet

The :root block names every swatch in order, so a palette moves from the picker into a theme file without hex codes being retyped by hand.

Checking a swatch can hold text

The last two columns report each colour's contrast against white and against black, so you can see immediately which swatches will take a label and which are decoration only.

Questions

Is my colour sent anywhere?
No. The hue rotation, the swatch grid and the CSS block are built by JavaScript already loaded on this page, and no request carries the value off your machine. Disconnect the network and the generator carries on.
Why do all my swatches come back identical?
Almost certainly because the base is a grey. Every angle-based harmony rotates hue, and a colour with zero saturation has no hue to show — the complement of a grey is the same grey. Use monochromatic or tints and shades, which vary lightness instead.
Why can I not set the number of colours?
Because the field hides for the harmonies that have no use for it. Complementary, triadic and tetradic are two, three and four colours by definition, so the Colours control appears on analogous, monochromatic and tints and shades only. Hue spacing does the same, appearing on analogous and split complementary alone.
Are the contrast figures a pass or a fail?
Neither. They are the raw WCAG 2.x ratios against pure white and pure black, printed without a verdict. To test a real pair of colours against the AA and AAA thresholds, take them to WCAG Contrast Checker.
What happens to a semi-transparent base?
The alpha is carried into every swatch, so the RGB column comes back as rgba() and the hex gains a fourth pair of digits. The HSL column and the two contrast figures leave it out — the ratios are worked out as if the colour were opaque, so a translucent swatch scores better in the table than it will look over a real background.
How is this different from Color Shades?
This varies hue to produce a scheme of distinct colours. Color Shades holds hue and saturation still to produce the numbered 50 to 950 ramp of one colour, with your value anchored at its own step. Extract Palette does the reverse job, reading a colour scheme out of a photo.
Can it shuffle a palette or lock a swatch?
No. The output is decided entirely by the base colour and the settings, so the same inputs always return the same swatches. There is no randomiser, no locking of individual colours, and no image input.

Related tools