Random color generator

What random colors are good for

Generating a random color sounds like a gimmick but has real use cases: breaking creative block (sometimes the color that pops up sparks an idea), assigning unique colors to users or tags in an app, creating quick mocks without deciding every palette manually, and stress-testing a UI against unexpected color choices.

The problem with pure randomness

Three random numbers between 0 and 255 produce statistically valid but visually disappointing results: most are grayish, brown, or very dark. RGB space isn't distributed the way the human eye perceives color. That's why we offer modes:

• Light: high lightness (75-95% in HSL), moderate saturation. Ideal as backgrounds.
• Dark: low lightness (10-25%), variable saturation. For text or headings on light backgrounds.
• Vibrant: high saturation (70-95%), medium lightness (45-60%). Accents, CTAs.
• Pastel: medium-low saturation (30-50%), high lightness (75-85%). Soft style, illustrations.

How to assign colors to users without clashes

If you need colors to identify users or tags (Slack, Linear, Notion-style), don't use pure random: derive the color from the name. Simple technique: hash the string into a number, map it to a hue from 0–360, and fix saturation and lightness. That guarantees the same name always returns the same color and that two similar names give different colors.

function nameToColor(name) {
  let h = 0;
  for (const c of name) h = (h * 31 + c.charCodeAt(0)) | 0;
  return `hsl(${Math.abs(h) % 360}, 65%, 55%)`;
}

Crypto-secure random vs Math.random

Math.random() is a PRNG, not cryptographically secure, but for picking colors it's fine. You only need crypto.getRandomValues if you're generating tokens, passwords or unique IDs. For design, Math.random is enough and cheaper.

Three practical uses

1. Visual brainstorming: generate 20 colors fast, lock the 3 that catch your eye.
2. User avatars: background derived from the name, white initials on top.
3. Tags and categories: first color of the project = random, the rest derived (same hue, different lightness).