Pure randomness rarely produces a good palette on its own. A colour picked uniformly at random across the full HSL space is just as likely to be a muddy, low saturation grey brown as it is a usable brand colour, which is why this tool lets you narrow the hue, saturation and lightness ranges first and only randomises within those bounds, producing colours that are unpredictable in the specific way you actually want, rather than unpredictable in every way at once.
Every generated colour comes from the Web Crypto API's cryptographically strong random number source running in your browser, so nothing about the sequence you get is sent to, or seeded from, a server.
Why a random color generator needs constraints
Fully unconstrained random colour generation samples red, green and blue independently, which statistically produces mostly desaturated, mid brightness colours, because that is where most of the RGB cube's volume actually sits. Very few uniformly random RGB triples land on a vivid, clearly identifiable colour, which is why naive random colour tools so often feel disappointing.
Constraining generation in HSL space instead, and picking hue, saturation and lightness from ranges you control, fixes this directly. Narrowing saturation to a high range guarantees vivid results, narrowing lightness to a mid range avoids colours too close to white or black to be useful as an accent, and narrowing hue to a specific arc keeps every generated colour within a family that already matches your brand or your existing design.
- Narrow the hue range to stay within a specific colour family, for example blues and teals only.
- Raise the saturation minimum to avoid muddy, desaturated results.
- Keep lightness away from the extremes to avoid colours too close to white or black to read clearly.
- Use the full 0 to 360 hue range with high saturation for maximum, unpredictable variety.
Generating a full random color palette at once
Beyond a single swatch, this tool can generate a random color palette of several colours in one pass, each drawn independently from the same hue, saturation and lightness constraints. This is a fast way to explore options for a chart's data series colours, a set of category tags, or a handful of accent colours for an illustration, without manually adjusting each one by hand before you have even decided on a direction.
Because every colour in the palette respects the same constraints, the whole set tends to feel coherent even though each individual colour is independently randomised, which is the practical benefit of constraining the randomness rather than leaving it fully open.
Locking colours while you keep rolling the rest
The lock and regenerate mode solves a common frustration with random generators: finding one perfect colour in a set of five, then losing it the moment you regenerate to improve the other four. Locking a swatch excludes it from the next regeneration entirely, so you can build a palette incrementally, keeping what works and rerolling only what does not, rather than starting over from nothing each time.
This is particularly useful once you already have one fixed colour, a logo colour or an existing brand accent, and need several complementary random colours around it that still respect your saturation and lightness constraints.
How this random color generator works under the hood
The tool draws random values from crypto.getRandomValues rather than Math.random, which is cryptographically strong and avoids the subtle, well documented statistical weaknesses of Math.random's underlying pseudorandom number generator in some browser engines. Those raw random values are scaled into your chosen hue, saturation and lightness ranges, then converted to RGB and hex using the standard HSL to RGB algorithm.
Locked swatches are simply excluded from the next generation pass and copied forward unchanged, while unlocked positions each draw a fresh random value independently, so no generated colour in a palette depends on any other colour in that same palette.
| Use case | Hue | Saturation | Lightness |
|---|---|---|---|
| UI accent colours | Any 60 degree arc | 60 to 90% | 45 to 65% |
| Pastel backgrounds | Any | 20 to 40% | 85 to 95% |
| Dark theme surfaces | Any | 10 to 30% | 10 to 25% |
| Chart data series | Full 0 to 360 | 55 to 75% | 50 to 60% |
How to use a random color generator
- 1
Set the hue range
Narrow the hue range to a specific colour family, or leave it at the full 0 to 360 degrees for maximum variety.
- 2
Set saturation and lightness ranges
Raise the saturation minimum for vivid results and keep lightness away from the extremes for usable colours.
- 3
Generate a colour or palette
Choose how many swatches to generate at once, from a single colour up to a full palette.
- 4
Lock favourites and regenerate the rest
Click lock on any swatch you want to keep, then regenerate to reroll only the unlocked ones.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the random color generator.
A random hex color generator that samples red, green and blue directly, with no constraints, spends most of its output in the desaturated middle of the RGB cube, which is why unconstrained random colours so often look muddy rather than vivid. Constraining saturation to a high minimum in HSL space, which this tool does, is the direct fix for that problem.
Yes. crypto.getRandomValues draws from a cryptographically secure random source, while Math.random is only required to be reasonably distributed, not unpredictable, and several browser engines have documented, exploitable patterns in its underlying pseudorandom number generator. For colour generation the practical difference is small, but using the cryptographic source costs nothing and avoids the weakness entirely.
Yes. Narrow the hue range to a small arc, for example 200 to 240 degrees for blues, and every colour in the generated random color palette will fall within that arc while saturation and lightness still vary according to their own separate ranges, producing a coherent but still varied set.
A locked colour is excluded from that regeneration pass entirely and carries forward unchanged, while every unlocked colour draws a brand new random value within your current hue, saturation and lightness constraints. You can lock and unlock any swatch at any time before generating again.
A constrained color generator narrows where the randomness is allowed to land without removing the randomness itself, so every result still surprises you while staying inside boundaries you have already decided are usable, for example a specific hue family or a minimum saturation. That combination of genuine unpredictability and guaranteed usability is exactly what a fully open random generator cannot offer on its own.
Click the lock icon on any swatch before generating again. Locking and regenerating colors this way excludes that specific swatch from the next random draw, so it stays exactly as it is while every other swatch in the set rolls a fresh value within your current constraints.
A saturation range of roughly 60 to 90 percent and a lightness range of roughly 45 to 65 percent reliably produces colours vivid enough to read as an intentional accent without being so dark or so pale that they fail contrast against a typical background. Narrow those ranges further once you see which specific values suit your interface.
It is possible but unlikely within a narrow constrained range, since the number of distinct colours available shrinks as the hue, saturation and lightness ranges narrow. Across the full unconstrained range there are over sixteen million distinct hex colours, so an accidental exact repeat is rare even across many generations.