Color palette generator
Use Shuffle to generate a five color palette, lock any colors you want to keep, and shuffle again. Contrast is checked while generating rather than afterwards, so every palette contains at least one pair that passes 4.5:1 and each color is labeled with what it can safely be used for.
Palette
- Network requests
- ·
- Our own script
- ·
Was this tool useful?
Why most generated palettes are unusable
Generators sample colors that look good together, which usually means colors of similar lightness, because that is what harmony looks like. The result is five handsome mid-tones and a palette with nothing dark enough to write with and nothing light enough to write on.
You find that out later, in the browser, when the body copy sits at 2.9:1 and the whole scheme has to be rebuilt around one color you never chose. The palette was never wrong exactly, it just was not a palette for an interface.
So this generates along a deliberate lightness ladder rather than sampling lightness at random, and then checks the result. If the darkest and lightest colors do not reach 4.5:1, it pushes them apart before showing you anything. Every palette here can hold a sentence.
What the labels mean
Each swatch says what it can be used for, based on the best contrast it achieves against any other color in the palette:
- Body text reaches 7:1 somewhere, so it is comfortable for long reading.
- Text reaches 4.5:1, which is the AA floor for normal text.
- Large text and graphics reaches 3:1, so headings, icons, borders and focus rings are fine but body copy is not.
- Decoration only does not reach 3:1 against anything here. Use it for shapes that carry no meaning. This is where most brand accents land, and it is not a defect in the color.
That last case is worth dwelling on because it is the most common palette mistake there is, and we made it ourselves. A saturated accent chosen for how it looks as a logo will very often fail as text, because saturation does not raise luminance contrast much. The usual fix is two colors rather than one: keep the bright version for marks and add a deeper version for anything that carries text.
Locking
Click a color to lock it and it survives the next shuffle. That is how you actually use one of these: keep the one color you were given by a brand or a client, and let the rest move around it.
If you lock both the darkest and lightest colors and they do not contrast, the tool leaves them alone. Your explicit choice beats its guarantee, and it says so in the status line rather than quietly overriding you.
Questions
How does it make an accessible color palette?
Press Shuffle for five colors spread from dark to light. If the darkest and lightest don't reach 4.5:1, the generator pushes them apart before you see anything. Each swatch is labeled by its best contrast against the others: Body text at 7:1, Text at 4.5:1, Large text and graphics at 3:1, or Decoration only. Lock a color to keep it.
Can I start from my own hex code?
Not directly. There's no box to type a hex code. Lock keeps whatever color is in that slot, but the other colors don't take their hue from it. They get a new random base hue on every shuffle. To build around a brand color, choose your shades yourself and check them in the contrast grid.
Can it make a palette from a photo?
No. It has no image upload and doesn't sample colors from pictures. Each palette comes from a random base hue, the scheme you pick and a ladder of lightness levels from dark to light.
What do the schemes do?
They set how far apart the five hues sit. Analogous places them 24 and 48 degrees either side of the base hue. Triadic uses the base plus 120 and 240 degrees. Complementary alternates the base and its opposite, 180 degrees away. Monochrome uses the base hue for all five, with saturation between 30 and 60 percent. Each new hue also gets up to 8 degrees of random jitter. Change the scheme and the unlocked colors reshuffle right away.
Can it generate tints and shades of one color?
Not of a color you choose. Monochrome comes closest: five colors near one random hue, at lightness levels around 12, 30, 50, 72 and 93 percent. Saturation varies from swatch to swatch, so it isn't a strict tint and shade scale.
Does it check color blindness?
No. It checks contrast only, and contrast can't tell you whether two hues look the same to someone with red-green color blindness. Press Copy as hex, then paste the result into the color blindness simulator. It lists the pairs that collapse.
Related tools
Once you have a palette you like: check every pair in the contrast grid, run it through the color blindness simulator, then export it to CSS variables and JSON tokens. Shares between all four carry the palette in the link, so nothing needs re-entering.