Random Color Generator
Generate random colors with hex, RGB, and HSL values shown side-by-side.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this random color generator
- Set the "Number of colors" field to any value from 1 to 20.
- Choose a Color mode: Any, Pastel, Dark, or Vibrant.
- Press Generate to produce the color swatches.
- Read each color's HEX, RGB, and HSL values beneath its swatch.
- Press "Copy hex codes" to copy all generated HEX values to your clipboard.
About this random color generator
A random color generator produces one or more colors on demand and displays each result in three standard formats: HEX, RGB, and HSL. This is useful for designers, developers, and anyone who needs a starting palette without having to choose colors manually.
The tool uses the Web Crypto API (`crypto.getRandomValues`) to generate unpredictable byte values, which are then mapped to color coordinates. In "Any" mode, three independent random bytes become the red, green, and blue channels directly. In constrained modes the tool works in HSL space: the hue is chosen at random across the full 0–360° range, while saturation and lightness are restricted to predefined bands — Pastel uses saturation 60–80% and lightness 75–90%, Dark uses saturation 50–80% and lightness 15–30%, and Vibrant uses saturation 80–100% and lightness 45–55%. The HSL values are then converted to RGB via a standard formula, and the RGB values are converted to HEX by encoding each channel as a two-digit uppercase hexadecimal pair.
For example, requesting 3 Pastel colors might produce #F2B8D4 (rgb(242, 184, 212), hsl(334, 65%, 84%)), #C4E0F5 (rgb(196, 224, 245), hsl(207, 76%, 86%)), and #D2F0C2 (rgb(210, 240, 194), hsl(100, 62%, 85%)) — soft tones with high lightness, ready to use as background tints or illustration fills.
Designers building mood boards, developers prototyping UI themes, and educators teaching color theory will all find this tool practical for generating instant, format-ready color values.
FAQ
- What does a random color generator produce?
- It outputs one or more colors, each expressed as a HEX code (e.g. #F2B8D4), an RGB value (e.g. rgb(242, 184, 212)), and an HSL value (e.g. hsl(334, 65%, 84%)). You choose how many colors to generate (1–20) and which color mode to apply.
- What do the four color modes do?
- "Any" generates a fully unconstrained random color. "Pastel" restricts lightness to 75–90% for soft, washed-out tones. "Dark" restricts lightness to 15–30% for deep, shadow-like colors. "Vibrant" sets saturation to 80–100% and lightness to 45–55% for bold, saturated hues.
- How random are the colors?
- Each color is seeded by the browser's Web Crypto API (crypto.getRandomValues), which produces cryptographically unpredictable bytes. Two Generate clicks will almost never return the same set of colors.
- What happens if I enter a number outside the 1–20 range?
- The tool displays an inline error message and does not generate any colors until you enter a valid integer between 1 and 20.
- Does this tool store or transmit my data?
- No. The random color generator runs entirely in your browser. No inputs or results are sent to any server.
- Is this tool free to use?
- Yes, it is completely free with no account or sign-up required.