Random color generator

Why uniform RGB randomness gives you mud

The obvious way to build one of these is three random bytes, one per channel. It is a line of code, and it is why so many random colour tools feel useless: you get a point somewhere inside the RGB cube, and the cube is not distributed the way anyone designing something needs.

Sampling half a million uniform draws makes the shape of it concrete. About two thirds land at an HSL lightness between 35% and 65%; roughly one in fifteen has all three channels within 40 levels of each other, which is a colour nobody would call a colour; only about one in sixteen is genuinely dark, and the same again genuinely pale. Mid-lightness is the least useful band there is — too dark for a page background, too light for body text, awkward under both black and white — so a uniform sampler spends most of its output where you were least likely to want it, and offers no way to ask for anything else.

Generating in HSL splits that into three questions you can answer separately: hue picks the family, saturation picks how insistent it is, lightness picks how dark. Drawing each from a band rather than the whole range is all the style presets are, and the hue filter narrows the first of the three when you want a random blue rather than a random anything.

What the harmony modes mean on the wheel

Hue in HSL is an angle, 0 to 360 degrees, so the classic relationships are arithmetic on that angle. Analogous takes neighbours fanned either side of the base, with the step narrowing as you add swatches — 26 degrees apart at three, 15 at five, about 9 at eight — so the whole fan stays inside roughly 60 degrees and the set still reads as one family. Complementary takes the point directly opposite, 180 degrees away, the widest separation the wheel allows. Triadic takes three points 120 degrees apart.

Two things about that wheel are worth knowing. It is the light wheel, not the pigment wheel taught in art classes: the HSL complement of red is cyan, where the paint-mixing complement is green. And equal angles are not equal perceptual steps — green occupies close to a quarter of the HSL wheel while orange occupies about a twelfth, so a 30-degree move through the greens changes far less than the same move through the oranges. That unevenness is what perceptual spaces such as OKLCH exist to fix.

The palette hues here are derived from the hue of the large colour above, so locking that one pins the geometry and lets you explore around a colour you have chosen. A locked palette swatch is kept exactly as it was, so it may not sit on the harmony the others were just rebuilt from.

How to go from a random color to a usable palette

Turning candidates into a palette is mostly subtraction. Pick one colour to carry meaning — the thing people click, or the thing that says which brand this is — and let the rest support it. What an interface needs is rarely more hues; it is more tones of the one you chose. Hold the hue and saturation, walk the lightness up and down, and you have surfaces, borders and hover states that belong together. Greys are the same trick with saturation dropped to 5% or 10% rather than zero, because a neutral carrying a trace of your hue looks deliberate beside it where #808080 looks imported.

Then check contrast, which is why every swatch here prints a ratio rather than a mood. One piece of arithmetic is worth carrying around: whichever of black and white is the stronger partner for a colour is never worse than the square root of 21, about 4.58 to 1 — that is where the two ratios cross, at a relative luminance of 0.179 — so every colour here takes readable text one way or the other. It is almost always only one way, though — for most colours the other option falls under the 4.5 to 1 WCAG asks for body text, and a swatch that looked fine in a grid is where that gets discovered too late.

A generator is for exploring, not for deciding

Randomness is good at showing you options you would not have typed, which is useful an hour into a project when everything you make looks like the last thing you made. It is not a method for choosing a brand colour, because none of the constraints that decide one are visible from inside a random draw: what the competition already owns, what the colour means in the markets you sell to, whether it survives being printed, whether it still works at 5% opacity behind body text.

The honest workflow is to generate until something stops you, lock it, generate around it until the supporting tones look right, then test those values at real sizes on a real screen. To take a colour apart afterwards, HEX to RGB gives you the channels and the full contrast breakdown.