Generador de color aleatorio

Para qué sirve un color aleatorio

Generar un color al azar parece un truco, pero tiene aplicaciones reales: superar bloqueo creativo (a veces el color que te aparece dispara una idea), asignar colores únicos a usuarios o etiquetas en una app, generar mocks rápidos sin decidir cada paleta, y testear cómo se comporta tu UI con colores que no elegiste.

El problema del azar puro

Tres números aleatorios entre 0 y 255 dan colores estadísticamente válidos pero visualmente decepcionantes: la mayoría son grisáceos, marrones o muy oscuros. El espacio RGB no está distribuido como el ojo humano percibe los colores. Por eso ofrecemos modos:

• Claros: luminosidad alta (75-95% en HSL), saturación moderada. Ideales como fondos.
• Oscuros: luminosidad baja (10-25%), saturación variable. Para texto o headings sobre fondo claro.
• Vibrantes: saturación alta (70-95%), luminosidad media (45-60%). Acentos, CTAs.
• Pastel: saturación media-baja (30-50%), luminosidad alta (75-85%). Estilo soft, ilustraciones.

Cómo asignar colores a usuarios sin que choquen

Si necesitás colores para identificar usuarios o tags (estilo Slack, Linear, Notion), no uses random puro: derivá el color del nombre. Una técnica simple: hashear el string a un número, mapearlo a un hue de 0-360, y fijar saturación y luminosidad constantes. Eso garantiza que el mismo nombre siempre devuelva el mismo color y que dos nombres parecidos den colores distintos.

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%)`;
}

Random "cripto-seguro" vs Math.random

Math.random() usa un PRNG, no es seguro criptográficamente, pero para elegir colores está perfecto. Solo necesitás crypto.getRandomValues si estás generando tokens, contraseñas o IDs únicos. Para diseño, Math.random sobra y consume menos.

Tres usos prácticos del color random

1. Brainstorming visual: generá 20 colores rápido, fijá los 3 que más te llamen.
2. Avatares de usuarios: color de fondo derivado del nombre, iniciales en blanco encima.
3. Tags y categorías: primer color del proyecto = random, los siguientes derivados (mismo hue, distinta luminosidad).