Roll a random color

How random colors work, and why "true random" is mostly useless

A 24-bit color space has 16,777,216 possible colors. A uniformly-random pick across that space gives you a brown or muddy gray about 60% of the time, and a usable color about 40% of the time. Most people want the 40% — the warm pastels, the vivid primaries, the soft greens and dusky purples. The "constraints" panel above lets you skip the muddy 60%.

Hex vs RGB vs HSL

All three describe the same color, in different coordinate systems:

• Hex (#RRGGBB): each pair is a base-16 byte from 00 to FF. Compact, works everywhere, and the most common format in CSS, design tools, and code.
• RGB (rgb(R, G, B)): three integers from 0 to 255. Easier to read in code, slightly easier to reason about channel-by-channel (e.g. "lots of red, no green, lots of blue" → magenta).
• HSL (hsl(H, S%, L%)): hue in degrees (0–360), saturation as a percentage, lightness as a percentage. Most useful for design because lightness and saturation are intuitive to reason about: "I want this color but lighter" means bumping L from 30% to 60%; doing the same in RGB requires mental gymnastics.

HSL is more useful for palettes

If you need 5 related colors, pick a hue, pick a saturation range, pick 5 different lightness values. The "Generate a related palette" section above does exactly this: same hue as the rolled color, lightness at 15%, 30%, 50%, 70%, 85%. All 5 colors are visibly related but distinct enough to be a usable palette.

The same trick doesn't work in RGB or HSL-constrained-by-channel. RGB channel-by-channel variation tends to wash out the hue (e.g. add 20 to every channel → washed-out pastel; subtract 20 → muddier color). HSL stays on the same hue ring by construction.

WCAG contrast basics

WCAG defines a contrast ratio between two colors as (L1 + 0.05) / (L2 + 0.05) where L is the relative luminance. Lighter colors have higher L. For normal text, you want at least 4.5:1 (WCAG AA). For large text (18pt or 14pt bold), 3:1 is enough. For the strictest accessibility, 7:1 (WCAG AAA).

The contrast panel above shows the ratio between the rolled color and white, black, and the cyan brand color. Use the sliders / constraints to find a color that gives 4.5:1 against your text color. A cyan (#22d3ee) against white passes 4.5:1 barely; cyan against black passes it strongly. That's why sitetrace uses dark backgrounds with cyan accents.

The privacy story

Every "random color generator" I could find online either (a) sends your color to a server (some tracker), (b) uses a server-side generation script that requires a round trip, or (c) loads megabytes of ad-tracking JavaScript before letting you click. This one runs entirely on the client. The HTML, CSS, and JavaScript are open source at the sitetrace GitHub repo, and the page sends exactly one HTTP request when you load it (the static HTML); no per-color, no per-roll, no per-keystroke. Press F12 and watch the network tab.

Why does this matter for a color picker? Honestly, it doesn't. But it's the right pattern, and once you start building client-side for the right reason, you start building client-side for everything — the color picker is just the easiest place to start. See /about for the full privacy story.

Related SiteTrace tools: Password Generator, Word Counter, Security Headers Checker.