About the Random Color Generator
This random colour generator produces up to twenty-four swatches at a time, each listed with its hex code, RGB triplet and HSL values so you can paste whichever notation your stylesheet uses. Rather than picking three random bytes, it draws in HSL: hue spreads across the full 360-degree wheel while saturation and lightness stay inside the band set by the style you choose, which is what keeps a set looking like a considered palette rather than visual noise. Vivid, pastel and dark presets cover the usual needs, and the seed makes any palette reproducible later.
How to use the Random Color Generator
- 1
Set How many colours you want, from one to twenty-four.
- 2
Pick a Style: Any colour for the widest spread, or Vivid, Pastel or Dark to constrain saturation and lightness.
- 3
Click Generate to render the swatch strip.
- 4
Copy the Values block, which lists each colour as hex, rgb() and hsl() on a single line.
What people use it for
Breaking out of a colour rut
When every mockup drifts towards the same blue, a run of vivid random hues gives you unfamiliar starting points to react to instead of a blank picker.
Assigning series colours to a chart
Generate one colour per data series in vivid style, then check each one against the chart background before committing it to the legend.
Placeholder backgrounds and avatars
Pastel style produces backgrounds light enough to carry dark text, which suits initial-based avatars and category tiles in a prototype.
Dark theme surfaces
The dark preset holds lightness between 18 and 32 percent, the band where a surface reads as a distinct panel without collapsing into flat black.
Why the generator works in HSL
Picking three independent random bytes for red, green and blue gives a uniform distribution through RGB cube space, but that cube is not organised the way vision is. Much of it is muddy: values cluster into greys, browns and murky mid-tones, and a run of such colours looks accidental rather than chosen. HSL splits the decision into the three questions a designer actually asks — which hue, how colourful, how light — so constraining two while randomising the third produces a coherent family. The style presets do exactly that. Vivid holds saturation at 75 to 95 percent and lightness at 45 to 58 percent, the band where a hue reads at full strength. Pastel raises lightness to 78 to 88 percent and drops saturation to 45 to 70, which is what makes a colour feel soft rather than washed out. Dark pushes lightness down to 18 to 32 percent while keeping enough saturation that the surface still carries a recognisable hue.
Random colours are not an accessible palette
Hue tells you nothing about contrast. Two colours 180 degrees apart on the wheel can have almost identical relative luminance, failing every contrast requirement while looking dramatically different to someone with typical colour vision — and looking nearly identical to someone with deuteranopia. WCAG measures the luminance ratio, and a random pair clears the 4.5:1 needed for body text only occasionally. HSL lightness is itself a poor proxy for perceived brightness: pure yellow at 50 percent lightness has a relative luminance around 0.93, while pure blue at the same 50 percent sits near 0.07, a ratio better than ten to one between two colours HSL calls equally light. Treat generated colours as candidates. Run any pairing you intend to put text on through a contrast checker, and never rely on hue alone to distinguish one thing from another.
Tips
- Note the seed when a palette works — the same seed and style bring it back exactly.
- Generate more swatches than you need and discard the ones that clash, rather than regenerating repeatedly.
- Feed a favourite result into a shades generator to build a full tint and shade ramp around it.