Generador de colores aleatorios

Cómo funciona

Escriba en el panel izquierdo cuántos colores necesita. Con 6 aparecen seis líneas a la derecha, cada una con el mismo color en tres escrituras, por ejemplo #D4F4BE · rgb(212, 244, 190) · hsl(95, 70%, 85%). Debajo del resultado cada color tiene su muestra, y la etiqueta de la muestra es exactamente el código HEX de su línea, así encuentra de un vistazo el código del color que le gusta. El ajuste Tono decide dónde caen los colores: Pastel da tonos claros y suaves, Vivo tonos brillantes y saturados, Oscuro tonos profundos; Todos da la misma probabilidad a cada uno de los 16,7 millones de colores de pantalla. Con un tono elegido, los colores sucesivos avanzan en el círculo cromático según el ángulo áureo (137,5 grados), por eso los colores de una misma paleta no se parecen. Cada cambio de ajuste genera colores nuevos; borrar y volver a escribir el número también. Para saber si un texto se lee bien sobre un color, pegue su HEX en el comprobador de contraste de colores.

Esta herramienta también se busca como generador de colores aleatorios, color aleatorio, color hex aleatorio, colores pastel aleatorios, paleta de colores aleatoria.

¿Qué es HSL?

HSL describe un color con tres números. H (tono) es el ángulo en el círculo cromático: 0 es rojo, 120 verde y 240 azul. S (saturación) indica en porcentaje cuán vivo o gris es el color. L (luminosidad) va de 0 %, negro, a 100 %, blanco. Se acerca más a la forma en que las personas piensan en los colores que RGB, por eso ajustes como «más claro» o «más apagado» se hacen cambiando un solo número.

¿Qué es Código de color HEX?

Un código de color HEX escribe uno al lado del otro los canales rojo, verde y azul de un color de pantalla como números hexadecimales de dos dígitos: en #D4F4BE, D4 es el rojo (212), F4 el verde (244) y BE el azul (190). Cada canal va de 0 a 255, así que se pueden escribir 256 × 256 × 256 = 16.777.216 colores. Es la escritura de color más común en CSS, en los programas de diseño y en los manuales de marca.

¿Qué diferencia hay entre RGB y HSL?

Los dos describen los mismos colores de pantalla con ejes distintos. RGB indica cuánto se encienden los tres canales de luz de la pantalla, rojo, verde y azul; es lo que hace de verdad el dispositivo, pero «un poco más claro» obliga a cambiar los tres números. HSL escribe el mismo color como tono, saturación y luminosidad; para una versión más clara basta con subir L. Esta herramienta aplica sus límites de tono en HSL y calcula los equivalentes RGB y HEX para la pantalla.

¿Por qué los colores aleatorios suelen verse apagados?

Elegir al azar el rojo, el verde y el azul por separado es el método más justo, pero no da colores agradables a la vista: la mayoría de los resultados tienen saturación media, en tonos grisáceos y parduscos. La opción Todos funciona así a propósito; sirve para datos de prueba, marcadores de posición o cuando de verdad cada color debe tener la misma probabilidad.

Para colores con los que va a diseñar, los límites en el espacio HSL funcionan mejor. HSL separa un color en tono (H, de 0 a 360 grados), saturación (S) y luminosidad (L). Si mantiene la luminosidad entre 75 y 90 % y la saturación entre 40 y 70 %, todos los colores salen en pastel. Las tres opciones de tono aplican exactamente ese tipo de límites, que aparecen en la línea de resultado.

¿Qué escritura usar y dónde?

HEX (#D4F4BE) es la escritura más corta; CSS, los programas de diseño y la mayoría de los selectores de color la aceptan directamente. rgb() da cada canal como número decimal y se convierte en rgba() cuando necesita transparencia. hsl() es la más fácil de ajustar a mano: para una versión más clara del mismo tono, solo sube el último número.

Si la paleta va a una interfaz, piense también en el color del texto: el texto blanco no se lee sobre colores pastel y claros, ni el negro sobre colores oscuros. Pegue un HEX de esta herramienta en el comprobador de contraste de colores para medir la relación de contraste WCAG.

Preguntas frecuentes

¿Cómo genero un código de color aleatorio?

Escriba en el panel izquierdo cuántos colores quiere y elija un tono; los colores aparecen a la derecha con sus códigos HEX, RGB y HSL, y sus muestras debajo. Para colores nuevos, cambie el ajuste o vuelva a escribir el número.

¿Cómo obtengo colores pastel aleatorios?

Ponga el tono en Pastel. La herramienta solo genera colores con luminosidad entre 75 y 90 % y saturación entre 40 y 70 %, la zona clara y suave que se percibe como pastel. Cada línea muestra el valor HSL, así que puede comprobar los límites usted mismo.

¿Puede salir el mismo color dos veces?

Con Todos hay 16.777.216 colores, todos con la misma probabilidad, así que una repetición es muy poco probable. Las opciones de tono tienen menos colores, pero los colores sucesivos se reparten por el círculo, por lo que en una paleta rara vez salen dos parecidos. Guarde la paleta que le guste como .txt con Descargar.

¿Cómo se eligen los colores?

La herramienta usa la fuente aleatoria segura del navegador (crypto.getRandomValues) y lleva los números al intervalo sin sesgo de módulo, de modo que ningún color ni tono sale más que los demás.