# Color palette generators: how to get palettes that actually work

[Canonical HTML page](https://gradiently.design/guide/color-palette-generator)

Generators are brilliant at producing five pretty swatches and bad at telling you what to do with them. The useful part happens after you press the button.

## The short version

- A color palette generator produces a set of colours from a rule, a random seed, a photo or a text prompt, but it does not decide which colour does which job.
- Most generated palettes give every colour equal weight and similar saturation, which looks fine as swatches and loud in a real design.
- A usable palette needs a light or dark ground, an ink colour for text, one or two main colours and a small accent.
- Check that the palette spans a wide range of lightness, because colours of similar lightness blur together and fail contrast checks.
- Always test a generated palette on a real layout with real words before you commit to it.

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.

| Type | How it works | Good for | Watch out for |
| --- | --- | --- | --- |
| Harmony wheel | Picks colours at set angles from one base hue: complementary, analogous, triadic | Learning, and building around a colour you already have | Five colours at the same saturation, which looks synthetic |
| Random with locks | Shuffles colours; you lock the ones you like and shuffle again | Discovery, and breaking a habit | Pleasant combinations with no structure behind them |
| From an image | Samples the dominant colours of a photo | Matching a product, a place or a campaign photo | Muddy midtones, and colours you cannot use for text |
| From a prompt | An AI model suggests colours for words like calm bakery | Fast ideas for a mood or brand brief | Popular clichés, and codes nobody has checked for contrast |

Adobe Color is a well known harmony wheel; Coolors is a well known random generator with locks. Most tools mix several approaches.

If you want to understand the rules behind harmony wheels, read [colour harmony](https://gradiently.design/guide/color-harmony). For the photo approach, [colour palette from an image](https://gradiently.design/guide/color-palette-from-image) explains how to pick better samples, and [AI colour palette generators](https://gradiently.design/guide/ai-color-palette-generator) 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.

- Red: #e63946
- Yellow: #f1c40f
- Green: #2ecc71
- Blue: #3498db
- Purple: #9b59b6

As generated: five saturated hues of similar strength. Nothing to read text on, nothing calm, and nothing in charge.

- Ground #f7f3ec: #f7f3ec
- Ink #1c2321: #1c2321
- Main teal #2a6f68: #2a6f68
- Support sage #a8c5b8: #a8c5b8
- Accent coral #e07a5f: #e07a5f

After editing: a warm off white ground, a near black ink (14.5:1 on the ground), a teal that carries the ground colour as text at 5.3:1, a quiet support and one accent.

## Five edits that turn any generated palette into a usable one

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. **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. **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. **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. **Assign proportions** A good starting split is the [60 30 10 rule](https://gradiently.design/guide/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](https://gradiently.design/guide/hsl-colors) is easy to read; [OKLCH](https://gradiently.design/guide/oklch-explained) 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](https://gradiently.design/guide/color-contrast-accessibility).

An Instagram portrait post announcing a new menu, set in a calm colour family with clear, readable type

A palette earns its place in a real format with real words. If the headline struggles here, change the palette, not the headline.

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](https://gradiently.design/guide/muddy-gradients).

The edited palette as a gradient: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Ground to sage to teal to ink, with no grey patch on the way. The coral stays out, saved for small accents.

## 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.

```css
: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);
}
```

Role names survive a rebrand. A variable called --teal does not.

## 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.

## FAQ

### What is the best color palette generator?

It depends on how you work: harmony wheels suit building around one colour, random generators with locks suit discovery, and image samplers suit matching a photo. All of them need editing afterwards.

### How many colours should a palette have?

Most brands work well with a ground, an ink, one or two main colours and one accent, so four or five in total. More than that is hard to keep consistent.

### Why does my generated palette look bad in my design?

Usually the colours have similar lightness and saturation and no clear roles. Add a neutral ground and a text colour, spread the lightness and keep only one vivid accent.

### How do I check a palette for accessibility?

Test every text and background pairing with a contrast checker, aiming for at least 4.5:1 for body text, and view the palette in greyscale to make sure colours are distinct.