Random Color Generator

How it works

Type how many colors you want into the left pane. Type 6 and six lines appear on the right, each giving the same color in three notations, such as #D4F4BE · rgb(212, 244, 190) · hsl(95, 70%, 85%). Below the output every color gets a live swatch, labelled with exactly the HEX code from its line, so you can find the code of the swatch you like at a glance. The Tone setting decides where the colors land: Pastel gives light, soft colors, Vivid bright saturated ones and Dark deep ones, while All gives each of the 16.7 million screen colors an equal chance. With a tone selected, consecutive colors are spaced around the color wheel by the golden angle (137.5 degrees), so colors in one palette do not look alike. Every change of setting draws new colors; deleting and retyping the number also gives a new palette. To check whether text stays readable on a color, paste its HEX into the Color Contrast Checker.

This tool is also known as random color generator, random hex color, random pastel color generator, random color palette, random rgb color.

What is HSL?

HSL describes a color with three numbers. H (hue) is the angle on the color wheel: 0 is red, 120 green, 240 blue. S (saturation) says in percent how vivid or grey the color is. L (lightness) runs from 0%, black, to 100%, white. It is closer to how people think about color than RGB, so adjustments like "lighter" or "more muted" take a single number.

What is HEX color code?

A HEX color code writes the red, green and blue channels of a screen color as two-digit hexadecimal numbers side by side: in #D4F4BE, D4 is red (212), F4 green (244) and BE blue (190). Each channel runs from 0 to 255, so 256 × 256 × 256 = 16,777,216 colors can be written. It is the most common color notation in CSS, design apps and brand guidelines.

What is the difference between RGB and HSL?

Both describe the same screen colors along different axes. RGB states how strongly the three light channels of the screen — red, green and blue — are lit, which is what the display actually does, but "a bit lighter" means changing all three numbers. HSL writes the same color as hue, saturation and lightness, so a lighter version only needs a higher L. This tool applies its tone limits in HSL and computes the RGB and HEX equivalents for the screen.

Why do random colors so often look muddy?

Picking the red, green and blue channels independently at random is the fairest method, but it does not give colors people find pleasant: most results land at medium saturation, in greyish and brownish shades. The All option works this way on purpose; use it for test data, placeholders or whenever every color really must have the same chance.

For colors you will design with, limits in HSL space work better. HSL splits a color into hue (H, 0-360 degrees), saturation (S) and lightness (L). Keep lightness between 75 and 90% and saturation between 40 and 70% and every color you get is a pastel. The three tone options apply exactly such limits, and the result line prints them.

Which notation to use where

HEX (#D4F4BE) is the shortest notation; CSS, design apps and most color pickers accept it directly. rgb() gives each channel as a decimal number and turns into rgba() when you need transparency. hsl() is the easiest to adjust by hand: for a lighter version of the same hue, raise only the last number.

If the palette goes into an interface, think about text color too: white text is unreadable on pastel and light colors, black text on dark ones. Paste a HEX from this tool into the Color Contrast Checker to measure the WCAG contrast ratio.

Frequently asked questions

How do I generate a random color code?

Type how many colors you want into the left pane and choose a tone; the colors appear on the right with their HEX, RGB and HSL codes and live swatches below. For new colors, change the setting or retype the number.

How do I get random pastel colors?

Set Tone to Pastel. The tool only produces colors with lightness between 75 and 90% and saturation between 40 and 70%, which is the light, soft range that reads as pastel. Each line shows the HSL value, so you can see the limits yourself.

Can the same color come up twice?

With All there are 16,777,216 colors, each equally likely, so a repeat is very unlikely. The tone options have fewer colors, but consecutive colors are spaced around the wheel, so near-duplicates in one palette are rare. Use Download to save a palette you like as a .txt file.

How are the colors picked?

The tool uses the browser's cryptographically secure random source (crypto.getRandomValues) and maps numbers to a range without modulo bias, so no color or hue comes up more often than the others.