Random Color Generator

Random Color Generator picks a color at random and shows its hex, RGB, and HSL values ready to copy. Hit Generate (or press Space) as many times as you like — each result is added to a scrollable history of recent colors so you can go back to any shade you liked.

Tool interface

• A large color swatch that updates instantly on every generation.
• Hex, RGB, and HSL output fields, each with an individual Copy button.
• A Generate button — the main action. Pressing Space on the page triggers it as a keyboard shortcut.
• Constrain randomness — a collapsible section with range sliders for hue (0°–360°), saturation (0%–100%), and lightness (0%–100%). Narrowing the ranges lets you target a specific part of the color space without losing the randomness within that zone.
• Recent colors — a row of up to 20 swatches from this session. Clicking any swatch loads it back into the output fields.
• Copy all copies all three formats at once as plain text.
• Clear history removes the recent colors row.

Tool description

Random color generation is useful in more situations than it might first appear. Designers use it to break out of habitual color choices and explore unexpected combinations. Developers use it to generate placeholder colors for mockups, seed data, or UI testing. Educators and students use it when learning color theory — having a surprise starting point forces you to think about relationships rather than reaching for familiar values.

The constraint sliders make the tool significantly more practical. Full random often produces muddy mid-range grays or near-invisible near-whites. By setting sensible lightness and saturation bounds you can keep all outputs within a usable range — for example, saturated vibrant colors (saturation 60–100%, lightness 40–65%) or soft pastel tints (saturation 30–60%, lightness 70–90%).

All three output formats are updated on every generation. Hex is the most portable for web use; RGB is needed in some design tools and CSS functions like color-mix(); HSL is the most readable when you want to reason about the color's qualities directly.

How to use

1. Click Generate or press Space to produce a random color.
2. Copy the format you need with its Copy button, or use Copy all for all three at once.
3. To narrow the range, open Constrain randomness and drag the min and max sliders for hue, saturation, and lightness.
4. Click any swatch in the Recent colors row to reload a previous color.
5. Click Clear history to reset the recent colors list.