Start from a colour you already have
Most people arrive with one fixed colour, usually a logo or brand colour, and need the rest of a palette to go with it. Here is the quickest route:
- Hover the first column and choose Edit color. Paste your HEX code.
- Click the lock icon on that column.
- Pick a mode, for example Complementary or Shades.
- Press the spacebar (or Generate). Your locked colour stays put and every unlocked column is rebuilt from it.
The generator always builds from the first locked colour, counting from the left. If you lock two or more, the others are kept as they are but do not steer the new colours. With nothing locked, each press starts from a random colour.
What the modes do
| Mode | How the columns are built |
|---|---|
| Random | Unrelated colours, each with mid-range saturation and lightness so you avoid near-black and washed-out whites |
| Analogous | Neighbouring hues spread across up to 72° of the wheel |
| Complementary | Alternates your hue and its opposite, stepping lighter and darker |
| Split | Your hue plus the two hues at 150° and 210° |
| Triadic | Three hues a third of the wheel apart |
| Mono | One hue from light (86% lightness) to dark (30%) |
| Shades | One hue from very light (88%) to deep (24%) |
Shades and Mono spread evenly between fixed light and dark ends; they are not built outward from your colour's own lightness. A locked mid-tone sits among the steps instead of defining them, which is usually what you want for a UI scale of backgrounds, borders and text.
Editing, ordering and limits
- A palette holds 2 to 10 colours. Add drops in a random colour.
- Drag a column sideways to reorder. Locks travel with their colour.
- A locked column cannot be removed until you unlock it, which saves you from deleting the one colour you meant to keep.
- The spacebar is ignored while you are typing in a field, so editing a HEX code never regenerates the palette by accident.
Exporting
HEX list copies the codes separated by commas. CSS vars copies a :root block that numbers each colour, such as --color-1: #E4572E;; rename them to roles like --brand and --link once you settle. The address bar holds the palette too, so bookmarking or sending the link brings back the same colours in the same order.
Questions
How do I check the palette is readable?
Take the colour you plan to use for text and the one behind it and test the pair in the contrast checker. Body text needs at least 4.5:1.
Can I pull a palette out of a photo instead?
Yes, with palette from image. You can then paste its colours here and lock them.
Why did the palette change when I opened the page again?
A fresh visit starts with a random Shades palette. To come back to a palette, keep the full link from the address bar, which includes the colours.