Colour
Colour palette generator
One starting colour and everything follows: the 50 to 900 scale like a design system's, and the classic combinations — complementary, analogous, triadic, tetradic and monochromatic. Ready to copy as CSS variables, Tailwind config, JSON or an image.
Your images and your colours never leave this page.
Why it matters that this is not uploaded
Two of these four tools work with images, and what gets dragged in here is hardly ever just any photo: it is a client's logo before launch, a screenshot of an internal dashboard, or an unpublished product shot. Sending that to a stranger's server to pull a colour out of it is a bad trade, and an unnecessary one: reading an image's pixels needs no server — the browser does it with the canvas it already ships with. Here there is nowhere to send it.
What people use it for
- Starting a design systemTen coherent steps from the brand colour, already named the way the code expects.
- Filling in a brand's gapsYou have the main colour and are missing the supporting tones for backgrounds and borders.
- Choosing an accent colourSplit complementary gives an accent that contrasts without fighting the main one.
- Getting the palette into TailwindThe config object already written, with the numeric keys it expects.
- Showing it to someoneThe PNG with all ten steps and their values, to drop into a presentation.
- Getting unstuckThe random button offers a starting point when you have no idea where to begin.
The 50 to 900 scale, and why it is used that way
It is how modern design systems organise a colour: instead of having "the blue", you have ten blues numbered from 50 — nearly white — to 900 — nearly black. The 500 is usually the brand colour, and the rest are the ones you need around it: 50 for a soft background, 100 for a notice's background, 700 for the text on that background, 900 for a heading.
The point is that the numbers are a promise: if the soft background is always 50 across the project and the text on it is always 700, changing the brand colour is changing one line rather than reviewing a hundred screens. That is why the export comes ready in the format each place expects.
Here the hue is kept across all ten steps and the lightness runs the whole range; the saturation drops a little at the extremes, which is what stops the light tones going garish and the dark ones going muddy. The step with a border is the one closest to your starting colour.
The combinations, one sentence each
Complementary: the colour opposite on the wheel. Maximum contrast. Good for things that must stand out — a call to action — and bad for large surfaces, because it vibrates.
Analogous: the two neighbours. Calm and coherent; what you use when everything should belong to the same family.
Triadic: three colours spaced evenly. Lively and balanced, but you have to let one lead and the other two accompany.
Tetradic: two complementary pairs. The richest and the hardest to handle: four strong colours take real discipline.
Split complementary: instead of the exact opposite, its two neighbours. Nearly all the contrast of the complementary with far less tension. Usually the safe bet.
Monochromatic: one hue at five lightnesses. Impossible to get wrong, which is also why it is the least memorable.
One warning worth keeping in mind
A pretty palette is not a readable palette. Two colours looking good together does not mean text in one will read on the other: they are different things and they are measured differently. Once you have the palette, run the pairs you will use for text through the contrast checker; there is usually a surprise, especially with yellows and cyans.
What each step is used for
| Step | Where it is normally used |
|---|---|
| 50 | Very soft backgrounds: a table's alternating row, the background of a highlighted section. |
| 100 | The background of a notice or a tag. Still nearly white. |
| 200 | Soft borders, dividers, the disabled state of a control. |
| 300 | Visible borders and decorative elements. Dark text on this is already uncomfortable. |
| 400 | Icons and secondary graphic elements. |
| 500 | The brand colour. Primary button backgrounds, links on white. |
| 600 | The hover state of the 500. And a link's colour when the 500 falls short on contrast. |
| 700 | Coloured text on a 50 or 100 background. Usually the one that passes AA. |
| 800 | Headings and emphasised text in colour. |
| 900 | Dark backgrounds, and text on light where maximum contrast is needed. |
Frequently asked questions
What do the numbers 50 to 900 mean?
They are lightness, not intensity. 50 is the lightest, nearly white; 900 the darkest. The 500 is usually the brand colour.
The convention comes from design systems, and its usefulness is that the numbers become a promise across a project: if the soft background is always 50 and the text on it always 700, changing brand colour is a one-line edit.
Can I use this palette directly on my site?
Yes: the export gives you CSS variables ready to paste into :root, the Tailwind object with its numeric keys, or JSON if your system reads from there.
With one important caveat: a pretty palette is not a readable palette. Run the pairs you will use for text through the contrast checker before signing them off.
Which combination is best?
To start with, split complementary: nearly all the contrast of the complementary with far less tension, and hard to get wrong.
Pure complementary works very well on small things that must stand out and very badly on large surfaces, where it vibrates. Triadic and tetradic are richer but demand discipline: one has to lead.
Why is my colour not exactly the 500?
Because the scale uses fixed lightness values so every palette is comparable with every other, and your colour can land between two steps. The one marked with a border is the closest to yours.
If you need your colour to be exactly one of the steps, nudge its lightness in the picker until it matches.
Is the PNG uploaded anywhere?
No. It is drawn on the browser's own canvas and downloaded straight to your machine. Like everything else in these tools, there is no request carrying anything to any server.
The other colour tools
Picker and converter
Colour wheel with HEX, RGB, HSL, HSV, CMYK and CSS name in sync. With an eyedropper for any photo.
Contrast checker
The contrast ratio, AA and AAA levels, and the closest colour that does pass when yours falls short.
Extract from an image
A photo's dominant colours with the percentage each covers. The image never leaves the browser.