Random Color Generator

#	HEX	RGB	HSL	Readable text
1	#1aefec	rgb(26, 239, 236)	hsl(179, 87%, 52%)	Black (14.6:1)
2	#e04006	rgb(224, 64, 6)	hsl(16, 95%, 45%)	Black (4.9:1)
3	#e50be1	rgb(229, 11, 225)	hsl(301, 91%, 47%)	Black (5.5:1)
4	#bbf910	rgb(187, 249, 16)	hsl(76, 95%, 52%)	Black (16.7:1)
5	#0126f9	rgb(1, 38, 249)	hsl(231, 99%, 49%)	White (7.9:1)

About the Random Color Generator

This random color generator creates single colors or whole palettes and gives you every value you need to use them: HEX codes, RGB, HSL and a ready-to-paste block of CSS custom properties. Pick a style — pastel, vivid, dark, muted or grayscale — to keep the results in a usable range instead of getting muddy browns and near-blacks at random.

Designers use it to break out of a creative rut, developers use it for placeholder avatars, chart series and test data, and artists and crafters use it for colour prompts and challenges. Choose a harmony scheme (analogous, complementary, triadic or monochrome) to get palettes whose hues are related the way a colour wheel suggests, or leave it on fully random.

For each colour the tool also works out whether black or white text is more readable on top of it, using the WCAG contrast ratio. Add a seed if you want to reproduce or share exactly the same palette later.

How to use the random color generator

1Choose how many colors you want in the palette.
2Pick a style such as pastel or vivid to keep colors in a usable range.
3Optionally choose a harmony scheme for related hues.
4Copy the HEX list, individual RGB/HSL values or the CSS variables block.
5Generate again until you like the palette, or add a seed to keep it reproducible.

Formula and method

C = (1 − |2L − 1|) × S, X = C × (1 − |(H/60) mod 2 − 1|), m = L − C/2, RGB = round((R′+m, G′+m, B′+m) × 255)

Each color is generated in HSL space: a hue H from 0–359°, and saturation S and lightness L drawn uniformly from the range for the chosen style (for example pastel uses 60–90% saturation and 78–88% lightness). Harmony schemes pick one random base hue and offset the others by 30°, 180° or 120°. HSL is then converted to RGB with the standard formula above and written as a two-digit hexadecimal code per channel.

Text readability uses the WCAG 2 contrast ratio (L1 + 0.05) ÷ (L2 + 0.05), where L is the relative luminance of each color after sRGB gamma correction. The tool picks whichever of black or white gives the higher ratio.

H: Hue in degrees (0–359)
S: Saturation (0–100%)
L: Lightness (0–100%)
C: Chroma — the color intensity

Worked examples

One vivid color with a seed

The seed picks hue 173°, saturation 90% and lightness 45% — a bright turquoise. Converting HSL to RGB gives (11, 218, 194), which is #0BDAC2 in hex. It is a light color, so black text reads best on it, at about 11.8:1 contrast.

Five-color pastel palette

Pastel colors are light and gently saturated, so every swatch pairs best with black text. The first color here is a pale mint-lime (hsl 91°, 88%, 87%), and the other four — lilac, butter, blush and pink — follow in the palette list and CSS variables.

Complementary dark palette

A complementary scheme alternates a base hue with its opposite 180° away. With the dark style (15–30% lightness) every swatch needs white text, the first color is a deep indigo at 247° and the second an olive green at the opposite hue, 67°.

Frequently asked questions

What is a HEX color code?+

A HEX code like #1E90FF writes the red, green and blue channels as two hexadecimal digits each (00–FF, or 0–255). It is the most common way to specify colors in CSS, design tools and brand guidelines.

What is the difference between RGB and HSL?+

RGB mixes red, green and blue light from 0 to 255 each. HSL describes the same color as hue (angle on the color wheel), saturation and lightness, which makes it easier to create lighter, darker or related shades.

How do I make a random color palette that looks good?+

Constrain saturation and lightness (for example the pastel or vivid styles) and use a harmony rule such as analogous or complementary. Completely random colors often clash because their lightness and intensity vary wildly.

How many colors can a hex code represent?+

Six hexadecimal digits give 256 × 256 × 256 = 16,777,216 possible colors. This generator picks whole-number hue, saturation and lightness values, so it samples evenly across the color wheel rather than from every one of those 16.7 million codes.

What contrast ratio do I need for readable text?+

WCAG 2 asks for at least 4.5:1 for normal body text and 3:1 for large text at level AA, and 7:1 for body text at level AAA.

Sources

Your palette