Random Color Generator

You need a placeholder color for a UI mockup, or just want to break out of the same five hex codes you keep typing by reflex. Click once, get a random color in hex, RGB, and HSL — pick the format your tool expects.

The generator uses uniform distribution across the entire RGB space, which means most outputs are mid-range and visually muted. Pure neon colors are rarer than you'd expect from a 'random' picker. If you want vibrant, set the saturation/lightness ranges in HSL mode.

Click again for another. Save the ones you like to the local list, copy them out when you're done. There's a difference between random and useful — the seed for a palette is usually random, the curation isn't.

The simplest random color generator picks three random integers between 0 and 255 for the red, green, and blue channels. So a call might return (87, 142, 53), which is the dark olive-green '#578E35'. The math is uniform across the cube — every RGB triple is equally likely. The visual problem with that approach is that the human eye perceives lightness logarithmically, not linearly, and the RGB cube weights perceptual saturation poorly. Most uniformly-random RGB picks fall in the 'muddy mid-tone' zone because that's where most of the cube's volume is.

For more visually useful output, the generator can switch to HSL space: pick a random hue (0–360°), then specify ranges for saturation (often 60–100%) and lightness (often 30–70%). The constraints filter out pure black, pure white, and washed-out tones. Picking from `hsl(220, 80%, 55%)` style ranges produces colors that look 'designed' rather than 'random.' This is how generators that produce 'nice' palettes actually work — they don't sample more colors, they sample from a smaller, more curated subspace.

A worked example: you click the generator and get '#3F88C5' — a clear blue. The display shows hex (#3F88C5), RGB (63, 136, 197), and HSL (208°, 53%, 51%). All three describe the same color, just in different coordinate systems. Hex is what CSS expects; RGB is useful when you're working with image processing libraries; HSL is useful when you want to derive a related color (a slightly darker version, a complementary hue). The choice depends on what tool consumes the value next.

For palette generation specifically, random alone rarely produces something coherent. You typically want at least two of the colors related — analogous (close on the hue wheel), complementary (opposite), triadic (120° apart), or shades of the same base. The generator here produces single colors; for related palettes, generate one color and derive the others by HSL adjustments. A common starting point: pick one base color, generate four more at hue offsets of 30°, 90°, 180°, and 210°, all sharing similar saturation and lightness. The result is a coordinated five-color palette that almost always looks intentional.