Random Color Generator

How the random color generator works

This random color generator picks colors in HSL (hue, saturation, lightness) rather than by rolling three random RGB bytes. Random RGB values pile up in muddy browns and grays because most of the 16.7 million combinations are low-saturation; random HSL lets the tool choose a hue anywhere on the color wheel and then keep saturation and lightness in a range that actually looks like a color. Each result is shown as a swatch with its HEX code (for CSS and design tools), RGB values (for code and image editors) and HSL values, each with a copy button. "Copy all HEX" gives you a comma-separated list and "Copy as CSS variables" gives you ready-to-paste custom properties.

What the color modes mean

• Any: the whole HSL space, including near-black, near-white and gray. Expect a few duds.
• Pastel: lightness 75–90% and medium saturation, the soft colors used for backgrounds and tags.
• Dark: lightness 8–28%, for dark-mode backgrounds and text on light surfaces.
• Vivid: saturation above 85% and lightness around 50%, the strongest version of each hue.
• Warm (reds, oranges, yellows: hues 330°–70°) and Cool (greens, blues, purples: hues 150°–280°).
• Grayscale: saturation 0, so only lightness varies.

How the palette mode builds five colors

Palette mode starts from one random base hue and derives the others with the standard color-wheel relationships. Analogous uses the base hue plus the hues 30° and 60° on either side, which gives a calm, related set like teal, green and yellow-green. Complementary takes the base and the hue directly opposite (180° away), then adds a lighter tint and a darker shade of the base so you have five usable values rather than two clashing ones. Triadic uses three hues 120° apart plus a tint and a shade of the base. In every case lightness stays between 5% and 95%, so nothing comes out pure black or white.

Converting between HEX, RGB and HSL

HEX is just RGB written in base 16: #4080BF means red 0x40 = 64, green 0x80 = 128, blue 0xBF = 191. HSL describes the same color as hue 210° (blue-ish), saturation 50% and lightness 50%. The tool converts with the CSS Color Level 3 formulas, so the HSL you copy will produce exactly the HEX shown when you use it in a stylesheet. Note that HSL lightness is not the same as perceived brightness: a 50% yellow looks far lighter than a 50% blue, which is why the text on each swatch switches between black and white based on WCAG contrast rather than on the lightness value.