Random Color Generator
Generate cryptographically random colors with HEX, RGB, and HSL values. Generate up to 20 colors at once — copy any format individually or grab all hex codes in one click.
Color Formats Explained
Each color is displayed in three CSS-compatible formats:
- HEX — six hexadecimal digits prefixed with
#, e.g.#a3c2f0. The most common format in web design and CSS. - RGB — red, green, and blue channels each from 0 to 255, e.g.
rgb(163, 194, 240). - HSL — hue (0–360°), saturation (0–100%), and lightness (0–100%), e.g.
hsl(213, 72%, 79%). More intuitive for making a color lighter, darker, or more vivid.
Use Cases
- Design exploration: Quickly find an unexpected color to start a palette or theme from
- Placeholder colors: Fill UI mockups, charts, or avatar backgrounds with distinct random colors
- Testing: Seed visual regression tests or UI components with varied colors
- Art and generative design: Source colors for generative art, data visualizations, or procedural graphics
- Learning: Build intuition for how HEX, RGB, and HSL represent the same color
How Colors Are Generated
Each color is built from three independent random byte values — one each for the red, green, and blue channel. These bytes are generated with crypto.getRandomValues(), the browser's Web Crypto API, which is seeded by the OS entropy pool. HSL values are then derived mathematically from the RGB values.
Frequently Asked Questions
What color formats does this tool output?
Each generated color is shown in three formats: HEX (e.g. #a3c2f0), RGB (e.g. rgb(163, 194, 240)), and HSL (e.g. hsl(213, 72%, 79%)). You can copy any format individually with the copy button next to each value.
Are the colors truly random?
Yes. Each color channel (red, green, blue) is generated independently using the Web Crypto API (crypto.getRandomValues()), which is seeded by the operating system's entropy pool. This is the same source used for cryptographic operations, making the colors genuinely unpredictable.
How many colors can I generate at once?
You can generate between 1 and 20 colors per click. Adjust the Count field and click Generate.
Can I copy all the hex values at once?
Yes. Click 'Copy all HEX' to copy every generated hex code, one per line, to your clipboard.
What is the difference between HEX, RGB, and HSL?
HEX is a six-digit base-16 representation commonly used in CSS and web design (e.g. #ff6600). RGB defines a color by its red, green, and blue channel values from 0 to 255. HSL defines a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which is often more intuitive for adjusting colors.
Can I use these colors in my CSS or design tool?
Yes. All three formats (HEX, RGB, HSL) are valid CSS color values. Paste them directly into your stylesheet, Figma, Sketch, Canva, or any other design tool.