Generador de colores aleatorios

Cómo usar el generador de colores aleatorios

1. Indica el Número de colores (de 1 a 20).
2. Elige un Modo: - Aleatorio dentro de un rango sortea cada color de forma independiente. Acota los rangos de Tono (°), Saturación (%) y Luminosidad (%) con los campos «desde» y «hasta» para quedarte dentro de una familia de colores, por ejemplo solo tonos pastel o solo azules. - Paleta armoniosa (OKLCH) sortea un color base y construye los demás a partir de una armonía de color. Elige una Armonía (Complementaria, Análoga, Triádica, Complementaria dividida, Tetrádica, Cuadrada, Monocromática) o deja Sorpréndeme para obtener una armonía distinta cada vez.
3. Haz clic en Generar colores. Cada tarjeta muestra el color con sus códigos HEX, RGB y HSL; los botoncitos HEX, RGB y HSL copian el código correspondiente.
4. Haz clic en Bloquear en los colores que quieras conservar y vuelve a pulsar Generar colores: solo cambian los que no están bloqueados. Pulsa de nuevo el botón para desbloquear un color.
5. Elige un formato en Exportar como (Lista HEX, Variables CSS, Variables SCSS, Array JSON o Colores de Tailwind) y usa Copiar o Descargar para llevarte la paleta completa.

Cómo se eligen los colores

En el modo Aleatorio dentro de un rango, el tono, la saturación y la luminosidad se sortean de manera uniforme dentro de los rangos que fijes y después se convierten de HSL a RGB con la misma fórmula que usan los navegadores para hsl(). El rango de tono puede dar la vuelta por el rojo: de 330 a 30 da rosas, rojos y naranjas pasando por 0°. Algunos ajustes útiles:

• Tonos pastel: saturación 40–80 %, luminosidad 75–90 %.
• Tonos oscuros y apagados: saturación 10–40 %, luminosidad 15–35 %.
• Solo azules: tono 190–250.
• Colores cálidos: tono de 330 a 60.

En el modo Paleta armoniosa (OKLCH), la herramienta trabaja en OKLCH, un modelo de color perceptual en el que los pasos iguales de luminosidad se ven iguales a simple vista. El primer color bloqueado sirve de base; si no hay ninguno bloqueado, se sortea una base de luminosidad media y bastante saturada. Los demás colores toman los ángulos de tono de la armonía (por ejemplo +120° y +240° en la triádica), con una pequeña variación aleatoria de tono, luminosidad y croma para que cada clic dé un resultado nuevo. Si pides más colores que tonos tiene la armonía, los colores extra reutilizan los ángulos con variantes más claras y más oscuras. La monocromática mantiene un único tono y reparte la luminosidad de oscuro a claro.

Los colores que quedan fuera de lo que puede mostrar una pantalla sRGB se reajustan bajando su croma, así que cada código HEX que copies es un color real que se puede mostrar.

Para qué sirven los colores aleatorios

Los colores al azar vienen bien para avatares y gráficos provisionales, datos de prueba, arte generativo, explorar ideas de diseño cuando te bloquea la página en blanco o elegir un color para un proyecto, un equipo de juego o una etiqueta. El bloqueo te permite usarlo como una tragaperras: te quedas con lo que funciona y vuelves a tirar el resto. El azar procede del generador criptográfico de tu navegador y no se envía nada a ningún sitio.