Random Color Generator

How to use the Random Color Generator

Choose how many colors to generate.

Pick the output format: HEX, RGB or HSL.

Each color appears as a swatch with its code; click a swatch to copy it.

Copy the codes you like into your CSS, design tool or code.

Discover colors with the random color generator

Sometimes the best way to find a color is to stop choosing and look at options you would never have picked. This random color generator creates colors by choosing the red, green and blue channels independently from 0 to 255, which covers all 16.7 million colors a standard screen can display. Each result is shown as a swatch next to its code.

Output formats

HEX:  #3E8FB0
RGB:  rgb(62, 143, 176)
HSL:  hsl(197, 48%, 47%)

HEX – six hexadecimal digits for red, green and blue. The most common format in CSS and design tools.
RGB – the same channels as decimal numbers 0–255, convenient for code and image libraries.
HSL – hue (0–360°), saturation and lightness. HSL is the easiest format to adjust by hand: keep the hue and change lightness to get tints and shades of the same color.

Practical uses

Design inspiration – generate a dozen colors and keep the one that sparks an idea.
Placeholder avatars and tags – assign each user or category a color in a prototype.
Chart series – quickly get distinct colors for test charts (for final charts, choose a palette with sufficient contrast).
Testing – check that your UI handles any background color, including very dark and very light ones, and that text stays readable.
Games and art – random colors for generative art, particle effects or game prototypes.

Making random colors usable

Uniformly random RGB colors are often muddy or too saturated to use as is. A few tricks help:

Convert a color you like to HSL, then vary only the lightness to create a harmonious set of tints.
For readable text, check the contrast ratio: WCAG recommends at least 4.5:1 for normal text against its background.
Generate in bulk and pick the few that work together, rather than using the first result.

Options

Generate from 1 to 1,000 colors per run. The swatch grid lets you scan a large batch at a glance, while Copy all and Download give you the codes one per line, ready to paste into a stylesheet, a design token file or an array in your code.

Convert and fine-tune

To move a color between formats, including CMYK for print, use the color converter. For a single conversion, HEX to RGB and RGB to HSL are quick options. Colors are generated with a secure random source in your browser and are not stored.

Frequently asked questions

How many different colors can the generator produce?

Each of the red, green and blue channels ranges from 0 to 255, so there are 256 × 256 × 256 = 16,777,216 possible colors, all equally likely.

Why do many random colors look dull or harsh?

Uniform random RGB values include lots of muddy mid-tones and very saturated hues. Pick the ones you like and adjust them in HSL, or vary only the lightness of a single hue.

Which format should I use in CSS?

All three work in modern browsers. HEX is the most compact, RGB is easy to read, and HSL is the most convenient when you want to tweak lightness or saturation.

Can I generate colors with transparency?

The generator produces opaque colors. To add transparency, convert a color with the HEX to RGBA converter and set the alpha value.

How do I generate a random hex color in JavaScript?

Pick a number from 0 to 16,777,215 and print it in base 16 with padding: "#" + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0"). The padStart call matters, because small numbers would otherwise give codes with fewer than six digits, which CSS reads differently or rejects.

Can I get only light or pastel colors?

This generator picks red, green and blue independently, so it produces the full range. For pastels, generate in HSL instead: keep saturation moderate and lightness high, for example hsl(random hue, 70%, 85%), and vary only the hue. The results stay soft and work well as backgrounds for dark text.