How it works

Palette generator

The default: our studio modes

Out of the box, the generator does not simply throw random colours on the screen. Each time you generate, it picks one of our internal studio modes — a recipe worked out in advance that decides the whole shape of the palette at once: how the colours relate to each other, how many of them are quiet and how many carry the accent, how much light and depth the set gets, and how much space neutrals take up.

This is the part that does the heavy lifting. A palette looks considered rather than accidental because those proportions were decided as a whole, not colour by colour. The recipes are weighted, so the calm and versatile ones come up more often than the dramatic ones — and a different recipe is drawn on the next generation, which is why consecutive results feel related but not repetitive.

You do not have to choose or even see these modes. That is the point of the default: press generate until something clicks, and only then start adjusting.

Pro: taking the wheel

Two cards have an Auto / Pro switch. In Auto, the site decides for you. In Pro, you decide and the site stops overriding you.

• Color harmony → Pro. Unlocks the list of harmonies, and every palette from then on is built on the one you picked. The studio recipe no longer chooses the structure — you do.
• Palette color → Pro. Unlocks the base colour field. You type or pick a HEX, and the palette is built from it instead of from a fresh random starting colour.

Inside the Palette color card there are two further options. Main treats your colour as a direction — the palette grows around it, and the exact shade may shift a little to fit. Exact forces that precise HEX into the palette untouched, which is what you want when you are matching an existing brand colour.

Colour harmonies

A harmony is simply the rule for how far apart the colours sit on the colour wheel. It controls variety and tension, not lightness or mood.

• Analogous. Neighbouring hues on the wheel. Smooth and calm — nothing argues with anything. The safest starting point.
• Complementary. A colour plus the one directly opposite it. Maximum contrast, one obvious accent. Strong, and easy to overdo.
• Split. Your colour plus the two hues sitting on either side of its opposite. The punch of complementary, but less aggressive.
• Compound. A close family around your colour, plus a compact group near the opposite side. A quiet main direction with a deliberate counterweight.
• Square. Four hues spread evenly around the wheel. Rich and busy — it works when one of them clearly dominates and the rest support it.
• Triad. Three hues evenly spaced. Balanced and lively; a classic for illustration and branding.
• Mono. A single hue with only a few degrees of movement. All the difference comes from lightness and saturation instead. Very tidy.
• Shades. One hue built out as a light-to-dark scale. Useful for interface states, charts and depth ramps rather than for a brand set.
• Scattered. A deliberately wide spread across the wheel, but with the distances still controlled. Unexpected combinations that hold together — good when everything else feels too polite.

Mood

If harmony decides which colours meet, mood decides how they behave. It shifts the balance of saturation and depth, and how often neutrals, near-whites and very dark tones join in.

One thing worth understanding: a mood is a character, not a fixed set of colours. The same mood can produce a warm palette one time and a cool one the next, light in one result and deeper in another. What stays constant is the feeling, not the swatches.

• Studio. The balanced default — a wide range, kept disciplined.
• Muted. Colour pulled back, more grey in everything. Quiet and grown-up.
• Earthy. Natural and slightly dusty: clay, sand, moss, stone.
• Pastel. Soft and light, saturation kept low. Airy and gentle.
• Dark. Depth over brightness, with room for near-black.
• Bright. Clear, energetic, well-lit colour without going neon.
• Vivid. Saturation pushed to the top, neutrals almost absent. Loud on purpose.
• Nordic. Cool restraint — lots of near-neutrals and white, very little colour.
• Tapestry. Woven and layered: many softened tones with real depth in the middle.
• Luxe. Rich saturated colour anchored by ink-dark tones. Reads as expensive.
• Textile. Fabric-like and slightly washed, as if the colour has been dyed rather than printed.
• None. No character applied at all — the widest, rawest range the generator can produce. Good for exploring, less good for finishing.

Adjust palette

Three sliders that act on the finished palette as a whole, so the relationships between the colours survive:

• Hue (−180° to +180°) rotates every colour around the wheel by the same amount. A green set becomes a blue set, keeping its structure.
• Saturation (−60% to +60%) makes everything more colourful or closer to grey.
• Lightness (−50% to +50%) lifts or darkens the whole set.

Reset returns all three to zero without regenerating the palette.

Sort palette

Reordering only — no colour is changed. Original is the generated order, Lightness runs light to dark, Color family groups by hue, Saturation puts the most colourful first, and Accent leads with the colours that stand out most. Handy right before exporting, when you want the swatches in a sensible sequence.

Tonal check

This is the most useful control on the page and the one most people skip. It strips the colour away and shows you only the values — how light or dark each colour really is.

Why it matters: two colours can look completely different and still be the same brightness. When that happens, they stop separating in black-and-white print, on a low-quality screen, for a colourblind viewer, or as small text on a background. Turning the colour off is the fastest way to catch it.

• Value. Converts each colour to grey the way the eye actually perceives brightness — green counts most, blue counts least. This is the honest answer to “how light is this colour really?”.
• Desaturate. A plainer conversion, the same one you get by pulling saturation to zero in a graphics editor. Compare it with Value: where the two disagree, the colour is optically trickier than it looks.
• 3 Values. Collapses everything into just three greys — dark, mid, light. It answers one question: does this palette have a clear light–mid–dark structure, or is it all sitting in the middle? Posters, logos and illustrations live or die on this.
• 5 Values. The same idea at finer resolution. Five steps show whether you have enough distinct levels for interface states, charts or shading, without going all the way back to full colour.
• Off. Back to colour.

A quick rule of thumb: if two swatches merge into one block in 3 Values, never put them directly on top of each other as text and background.

Palette from a photo

Upload an image and the tool reads the pixels and works out which colours the photo is actually made of. Your file never leaves your device — everything happens in your browser.

Clean or Studio

The most important switch on the page, and the two modes answer different questions.

• Clean gives you the honest average of the photograph. Greys, browns and muddy in-between pixels are included, because they are genuinely there. Use it when you want to reproduce the real feel of the image — a photo report, a mood reference, a colour study.
• Studio looks for the colours a designer would have picked by hand. It sets aside pixels that are nearly black, washed out, or too dull to be useful, then goes through the colour families one by one and keeps the strongest example from each. That is why a small bright detail — a red jacket in a grey street — survives instead of being averaged into the pavement.

Same photo, same number of colours, completely different result. If Clean comes out lifeless, the answer is usually Studio rather than a different photo.

Detail

This slider controls how densely the photo is sampled — how many points across the image are actually looked at.

• Lower values take a coarse look. Only large areas make it into the palette; small details are skipped. Fast, and good for broad atmosphere.
• Higher values examine the image much more finely, so small accents and thin details get a chance to be represented. Takes slightly longer.

If a colour you can clearly see in the photo is missing from the palette, raise Detail first — usually it is simply too small an area to have been sampled.

Colors, coverage and Remix

Colors sets how many base colours to extract, from 4 to 16. The percentage shown next to each swatch is its real share of the image, measured across the whole photo in both modes — so it stays honest even in Studio.

Remix keeps every setting and rebuilds the palette from different starting points. Colour extraction has more than one valid answer; Remix shows you the alternatives.

Working with the result

Click a colour to open the editor and adjust it by hand. Every code — HEX, RGB, CMYK — is copied by clicking it. Switch the whole palette between RGB and CMYK if the work is heading for print.

Moodboard

Pick a folder of images and they are laid out for you immediately. Nothing is uploaded — the board exists only on your screen.

The layout is automatic and proportional

Images are never cropped or squashed. Each keeps its own proportions, and the board groups them into rows that fill the full width exactly, adjusting the height of each row so that everything lines up. Wide and tall images are deliberately mixed so that rows stay varied, lonely single-image rows are avoided, and the whole board is scaled to fit one screen rather than making you scroll.

Rearranging

Drag any image and drop it on another to swap their places. The board immediately recalculates and re-fits everything around the change — you are moving images around, not resizing boxes. Click an image to view it large.

Resizing the window is a tool, not an accident

Every time the window changes size, the whole board is rebuilt from scratch: the number of rows, how many images sit in each, and their heights are all recalculated for the new shape.

This is worth using on purpose. With a given set of images there is usually one window shape where the composition simply falls into place — the rows balance and nothing looks stranded. Narrow or widen the window slowly and watch the board reflow until it looks right. Different numbers of images have different sweet spots, so it is worth a few seconds every time you open a new folder.

Still stuck?

If something here does not match what you are seeing, or a control still does not make sense, tell us — write to [email protected] or use the Contact page. Questions that arrive twice usually end up explained on this page.