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
- Requests
- · from Resource Timing
- Script
- · KB of a 100 KB budget
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
Is this better than Coolors?
No, and it is not trying to be. Coolors is the best in the category, it has a deeper feature set, and if you already use it you should keep using it. The one thing this does differently is check contrast while generating instead of leaving it to you afterwards. Generate here, or generate there and paste the result into the contrast grid.
Why five colors?
Because five is roughly the number a real interface palette needs before it starts needing tints and shades instead of new hues: a dark, a light, a primary, an accent and a muted. Generators that offer ten tend to produce five useful colors and five that never get used.
What do the schemes do?
They set how far apart the hues are. Analogous keeps them close, which reads as calm and coherent. Triadic spreads them evenly for maximum distinction. Complementary uses two opposites. Monochrome keeps one hue and varies lightness and saturation, which is the safest starting point for an interface and the least interesting for a brand.
Can I use this with a keyboard?
Yes. Tab to Shuffle or any lock button and press Enter or Space. The page does not claim the bare Space key, so normal keyboard scrolling continues to work.
Does it check color blindness?
Not while generating, no. Contrast and hue distinguishability are separate problems and the second one needs its own view. Send the palette to the color blindness simulator, which will tell you which pairs 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.