Color palette generators: how to get palettes that actually work

A color palette generator is a tool that suggests a set of colours that look good together, using colour theory rules, randomness, a photo or a written prompt. Use one to get unstuck, then edit the result: add a neutral ground and a text colour, give each colour a job, and test it on a real design. The generator's five swatches are a starting point. The palette that works is the one you shape from them.

The main types of palette generator

Every generator does one of four things under the hood. Knowing which kind you are using tells you what it is good at and what you will have to fix.

If you want to understand the rules behind harmony wheels, read colour harmony. For the photo approach, colour palette from an image explains how to pick better samples, and AI colour palette generators covers prompting.

Why generated palettes often fail in real designs

A generator shows colours as five equal stripes. Real designs are nothing like that: one colour covers most of the space, one carries the words and the rest appear in small amounts. Here is a typical random result next to the same idea after editing.

Five edits that turn any generated palette into a usable one

1. 1

   Keep the one colour you actually like

   Lock it and treat it as the main colour. Everything else exists to support it. If nothing stands out, generate again rather than settling.

2. 2

   Add a ground and an ink

   Generators rarely include them. Pick a light ground (a warm or cool off white) or a dark one, and an ink colour for text that contrasts strongly with it. Tint both slightly towards your main colour so they belong.

3. 3

   Spread the lightness

   Turn the swatches to greyscale in your head or on screen. You want light, middle and dark values, not five middles. Adjust lightness until each colour is clearly separate.

4. 4

   Lower the saturation of all but one

   Let the accent stay vivid and calm the others down. A support colour that is softer than the main colour makes the main colour look richer.

5. 5

   Assign proportions

   A good starting split is the 60 30 10 rule: ground about 60%, main colour about 30%, accent about 10%. Adjust by eye once you see it in a layout.

To make these edits precisely, work in a colour format that separates lightness from hue. HSL is easy to read; OKLCH is better at keeping lightness honest across different hues.

Test the palette on a real layout

Swatches hide problems that appear the moment words arrive. Put your palette on something you would really make, such as a post, a menu or a hero section, and look at it at the size people will see it. Then check every text pairing with a contrast checker.

A gradient is a quick extra test. Blend the ground, main and support colours together: if the blend turns grey in the middle, two of the colours are fighting, which is explained in muddy gradients.

Save it as tokens, not a screenshot

Once the palette works, name colours by their job rather than their hue, so you can change the teal later without renaming everything. In code that means CSS variables; in design tools it means named styles; in Gradiently it means the brand kit, where palettes, fonts and voice live together and the Designer applies them to what it makes.

:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}

Searching by colour instead of generating

Sometimes what you really want is not five codes but a finished background in a colour family. Gradiently's Market lets you search Marks by colour words such as "deep teal" or "warm peach" and filter by look. Each Mark is a living gradient and material background with its own palette and type voice, checked against every other so no two look alike, and you can design with any unclaimed one for free. It is a different route to the same goal: colours that belong together, already doing their jobs.