Random Color Generator

How to use the random color generator

1. Set the Number of colors (1 to 20).
2. Choose a Mode: - Random in a range draws each color independently. Narrow the Hue (°), Saturation (%) and Lightness (%) ranges with the “from” and “to” fields to stay within a family of colors, for example only pastels or only blues. - Harmonious palette (OKLCH) draws one random base color and builds the others from a color harmony. Pick a Harmony (Complementary, Analogous, Triadic, Split complementary, Tetradic, Square, Monochromatic) or leave Surprise me to get a different harmony each time.
3. Click Generate colors. Each card shows the color with its HEX, RGB and HSL codes; the small HEX, RGB and HSL buttons copy the matching code.
4. Click Lock on the colors you want to keep, then Generate colors again: only the unlocked colors change. Click the button again to unlock a color.
5. Choose a format in Export as (HEX list, CSS variables, SCSS variables, JSON array or Tailwind colors) and use Copy or Download to take the whole set with you.

How the colors are chosen

In Random in a range mode, the hue, saturation and lightness are each drawn uniformly inside the ranges you set, then converted from HSL to RGB with the same formula browsers use for hsl(). The hue range can wrap around red: from 330 to 30 gives pinks, reds and oranges, going through 0°. A few useful settings:

• Pastels: saturation 40–80 %, lightness 75–90 %.
• Dark, muted tones: saturation 10–40 %, lightness 15–35 %.
• Blues only: hue 190–250.
• Warm colors: hue 330 to 60.

In Harmonious palette (OKLCH) mode the tool works in OKLCH, a perceptual color model in which equal steps of lightness look equal to the eye. The first locked color is used as the base; if nothing is locked, a random mid-light, fairly saturated base is drawn. The other colors take the harmony’s hue angles (for example +120° and +240° for triadic), with a small random variation in hue, lightness and chroma so every click gives a new result. When you ask for more colors than the harmony has hues, the extra colors reuse the angles with lighter and darker variants. Monochromatic keeps one hue and spreads the lightness from dark to light.

Colors that fall outside what an sRGB screen can display are brought back by lowering their chroma, so every HEX code you copy is a real, displayable color.

Where random colors help

Random colors are handy for placeholder avatars and charts, test data, generative art, design exploration when you are stuck on a blank page, or picking a color for a project, a game team or a label. Locking lets you use it like a slot machine: keep what works, spin the rest. The randomness comes from your browser’s cryptographic generator, and nothing is sent anywhere.