Random Color Generator

What “random color” actually means

A screen color is three bytes — red, green and blue, each 0–255 — so the space of possible colors holds 256 × 256 × 256 = 16,777,216 codes. “Any color” mode draws uniformly from that space: every one of the 16.7 million codes has exactly the same 1-in-16,777,216 chance on every click. The draw comes from crypto.getRandomValues(), the browser’s cryptographic random source — the same generator used for keys and tokens — and the mapping from raw random bits to a color is exactly unbiased, because 2³² is a whole multiple of 2²⁴: no color is even microscopically more likely than another.

Why truly random colors so often look muddy

Click “Any color” a dozen times and you will meet mustard, slate, murky olive and brownish plum far more often than fire-engine red. That is not a flaw in the generator — it is geometry. The vivid, nameable colors we picture when we hear “random color” live at the corners and edges of the RGB cube: pure red is one corner among 16.7 million points, and even its immediate neighborhood is tiny. The interior of the cube — the overwhelming majority of its volume — consists of mixtures where all three channels are moderately loaded, and mixing all three primaries is precisely the recipe for grayish, brownish, muted colors.

Perceptual color spaces make the imbalance measurable: transformed into OKLCH, most of the cube’s volume sits at low-to-middling chroma, while chroma high enough to read as “vivid” occupies a thin shell near the gamut surface. Uniform sampling by volume therefore lands in the muted interior most of the time. Human expectation is biased the other way — a mental “random color” is sampled from crayon boxes and brand palettes, which are almost entirely surface colors. Uniform randomness is fair; it just is not decorative.

How Pleasant mode stays presentable

Pleasant mode trades uniformity over all colors for uniformity over usable colors. Instead of RGB it samples in OKLCH, a perceptually uniform space where the axes mean what they say: lightness is drawn between 0.55 and 0.8 (light enough to feel friendly, dark enough to keep substance), chroma between 0.08 and 0.2 (clearly colorful, never neon), and the hue is left completely free across the full 0–360° wheel. Because those constraints are perceptual rather than numeric-RGB, every hue arrives with comparable visual weight — a “pleasant” teal and a “pleasant” pink genuinely feel like siblings.

One subtlety: not every OKLCH combination exists on an sRGB screen — some lightness–chroma pairs overflow the gamut for certain hues. When that happens the color is gamut-mapped the way CSS Color 4 specifies: hue and lightness are held fixed while chroma is binary-searched downward just until the color fits. The character of the draw survives; only impossible vividness is trimmed.

Where a random color is genuinely useful

• Placeholders and avatars — assign distinguishable colors to users, tags or chart series without designing a palette first.
• Generative art — roll a seed color and riff on it; Pleasant mode keeps the seeds in usable territory.
• Testing color-handling code — fuzz parsers, converters and contrast pipelines with arbitrary inputs instead of the same three hand-picked hex codes.
• Fair draws — picking team colors or assigning sides where nobody should be able to game the outcome.

A note on fairness and repeats

Math.random(), the JavaScript default, is fine for animations but is not designed to be unpredictable. This page uses the cryptographically secure generator instead, so the sequence cannot be predicted or reproduced — which is what makes a color draw genuinely fair when something, even just bragging rights, depends on it. Repeats, on the other hand, are expected: draws are independent, so the same color can appear twice, and the birthday effect makes a first repeat more likely than intuition suggests — around 4,800 draws for a 50% chance of some collision among 16.7 million colors.

History, so a good roll is never lost

The strip under the generator keeps your last 20 rolls and survives page reloads (it is stored locally on your device). Click any chip to bring that color back, weigh a few candidates against each other, then copy the winner or save it to your colors. It exists because the best random color is always the one you clicked past three rolls ago.

Everything runs 100% in your browser — no server ever sees which colors you rolled. When a promising candidate appears, send it onward: check it as a text or background color in the contrast checker, or line up several rolls next to each other in the compare colors tool.