How to Use This Tool
Press the button, or the spacebar, and you get five colours. Click the lock on any you want to keep and press again — the locked ones stay, the rest are replaced. That loop is the whole tool, and it works because you almost never choose a palette in one go; you find one colour you like and build outward.
Why the colours are not actually random
Five genuinely random colours are useless. The reason is not aesthetic, it is structural: five random hues at similar lightness have almost no contrast against one another, so none of them can be a background for any of the others. You end up with something that looks like a palette and cannot be built with.
This generator picks hues according to the harmony mode you select, then spaces the five colours deliberately across the lightness range — roughly 95%, 75%, 55%, 35% and 15%. That gives you a light end for backgrounds, a dark end for text, and three usable steps between them for borders, muted text and accents. The number under each swatch is its contrast ratio against white and against black, so you can see immediately which end each colour belongs to.
The harmony modes
- Analogous keeps all five hues within about 60° of each other. Calm and cohesive, and the safest choice for a whole interface.
- Triadic spaces three hues 120° apart. Lively and higher risk — it needs one hue to dominate and the others to be used sparingly, or it looks like a toy.
- Monochrome holds one hue and varies only saturation and lightness. It is the easiest way to produce something that looks designed rather than assembled, and it is what most software interfaces actually use once you look closely.
- Auto mixes the strategies at random, which is the best mode for finding a starting point you would not have chosen deliberately.
The interface preview
The mock beneath the swatches applies the palette to a small card with a heading, body text, a border and a button. This is worth looking at before committing, because a palette that looks lovely as five rectangles can be unreadable as an interface — and the rectangles never show you that.
On contrast
Contrast ratios are shown per swatch, but a passing ratio is a floor rather than a target. Text at exactly 4.5:1 is legible and tiring; body copy is more comfortable nearer 7:1. If your palette's darkest colour only reaches 4.5:1 against your lightest, consider pushing the ends further apart rather than accepting it.
