Random Hex Color

You're prototyping a layout, you need a placeholder color that isn't "#cccccc" for the eighth div in a row, and you want something arbitrary you didn't pick. The right answer is just a random hex value, but the entropy of human-chosen colors is famously low — people gravitate toward the same blues and grays unless something nudges them out.

Click. You get a hex code, the corresponding RGB and HSL values, and a swatch preview. Some implementations also let you constrain the random space (only pastels, only dark tones, only saturated colors) which is the sweet spot if you want randomness with usable results. Pure pseudo-random across the full RGB cube produces a lot of muddy mid-tones nobody wants in a UI; constraining to a defined hue or saturation range keeps things actually usable.

The generation: under the hood, three random integers between 0 and 255 (inclusive), converted to two-digit hex and concatenated with a leading hash. Math.random() in JavaScript produces a uniform float between 0 and 1 — multiply by 256 and floor it for a uniform integer 0-255. The browser's RNG isn't cryptographically secure, but for picking placeholder colors that doesn't matter. Constrained variants (pastels, dark tones, etc.) sample from a restricted region of HSL space — pastels keep saturation modest and lightness high, dark tones keep lightness low, and the result is converted back to RGB then hex.

A worked example: you click and get #4f7a8b. RGB: (79, 122, 139) — a muted teal. HSL: hue 199°, saturation 28%, lightness 43%. The swatch shows a desaturated blue-gray that would work as a placeholder background. Click again: #d2a8c4. A pinkish lavender, hue 322°, saturation 36%, lightness 74%. The contrast between the two demonstrates why pure random across RGB produces such variety — every click samples the cube differently. Constrained generation reduces the variance: pastel-only outputs would all be high-lightness, low-to-medium saturation, more aesthetically consistent.

Where this stops being useful: any time you need a coordinated palette. Random colors don't harmonize — three random hex values together usually look terrible because they have no relationship to each other. For palettes, use a generator that picks colors from related hue regions (analogous, complementary, triadic) or pull from a designed palette source. Random is also a poor choice when accessibility matters; a randomly-picked text color won't reliably hit the contrast ratio you need against any background. Use random hex for placeholder fills during prototyping, never for production color decisions. The 147 named CSS colors are also a reasonable default if you want something arbitrary but not random — "papayawhip" and "darkslategray" both exist and look better than the average random output.