¿Necesitas un color para un mockup, un gráfico o un lienzo en blanco, y prefieres no elegir uno por costumbre? Este generador gratuito de colores aleatorios extrae colores de todo el rango de 24 bits que una pantalla puede mostrar y coloca cada uno en una muestra junto a su código. Elige cuántos quieres en Cantidad — cualquier valor de 1 a 50 —, marca los formatos que necesites y pulsa Generar. La página se abre con un solo color en HEX, así que el primer resultado está a un clic de distancia. La casilla Código HEX está marcada desde el principio, Código RGB y Código HSL están junto a ella, y puedes activar cualquier combinación de los tres a la vez. El botón con forma de engranaje junto al botón Generar abre la sección Opciones avanzadas, donde puedes limitar los colores a un tipo o rango, descartar repeticiones y cambiar cómo se escribe HEX.
Cada color se genera en tu navegador mediante la Web Crypto API (crypto.getRandomValues), que suministra bytes aleatorios criptográficamente fuertes a partir de la propia fuente de aleatoriedad de tu sistema, en lugar de una función pseudoaleatoria como Math.random(). Un color en pantalla se compone de tres canales — rojo, verde y azul —, cada uno un número entero de 0 a 255, y un byte aleatorio admite exactamente 256 valores. Así que cada canal es simplemente un byte, sin pasos intermedios: no se toma ningún resto, y ningún paso de conversión favorece a ningún tono. Eso hace que los 16.777.216 colores que puede producir la página sean exactamente igual de probables, cada vez que pulsas Generar. Un rango más estrecho en la sección Opciones avanzadas mantiene esa promesa dentro del rango: los colores se siguen extrayendo de todo el espacio, y los que quedan fuera se descartan, de modo que cada color que permite el rango tiene la misma probabilidad. No se envía nada a un servidor, no se registra nada, y una vez cargada la página sigue funcionando aunque te quedes sin conexión.
Los tres formatos describen el mismo color de tres maneras. Código HEX es la forma de seis dígitos que se usa en CSS y en la mayoría de las herramientas de diseño, como #0778ff; se escribe en minúsculas con un # al principio, y las opciones Mayúsculas y Sin # de la sección Opciones avanzadas cambian eso para las herramientas que lo esperan de otra forma. Código RGB desglosa los tres canales, como en rgb(7, 120, 255), lo que conviene al código que trabaja con cada canal por separado. Código HSL describe el color mediante tono, saturación y luminosidad, como en hsl(213, 100%, 51%), la forma más fácil de ajustar a mano después. Los tres se pegan directamente en una hoja de estilos. Sin embargo, no son igual de precisos. HEX y RGB son exactos; HSL está redondeado. La página escribe el tono, la saturación y la luminosidad como números enteros, y en cerca del 89% de los colores ese valor redondeado no vuelve a dar exactamente el mismo color: #646503 se muestra como hsl(61, 94%, 20%), que al convertirse de nuevo da #616303. La diferencia nunca es mayor de 5 pasos en un canal y suele ser de 1 o 2 — invisible en pantalla, pero real si guardas el valor HSL y esperas recuperar el HEX original. Guarda HEX o RGB como valor de referencia.
Un solo color aparece como una única ficha en medio del resultado; varios aparecen como una lista numerada, un color por fila, con los formatos elegidos uno junto a otro y una pequeña insignia de contraste al final. Una lista de más de tres colores se desplaza dentro del recuadro, y la flecha de su esquina la despliega a toda su altura; la página recuerda cómo la dejaste la última vez. Haz clic en cualquier código para copiar solo ese código. El botón de copiar al final de una fila copia todos los códigos de ese color en una sola línea, separados por espacios. Haz clic en la propia muestra y se abre el propio selector de color de tu navegador: elige allí otro color, y todos los códigos de esa fila se actualizan en consecuencia, en cada formato que tengas activado, junto con su insignia. El botón Copiar todo copia el lote completo, un color por línea, y Guardar como archivo escribe el mismo texto en un archivo .txt sencillo; ambos respetan cualquier color que hayas cambiado en el selector. Historial guarda tus últimos 10 lotes en este navegador, tal como se generaron, y Borrar vacía el resultado. Tus ajustes, incluidos los de la sección Opciones avanzadas, se recuerdan para la próxima visita.
Los colores igualmente probables no parecen distribuidos de forma uniforme, y saber qué esperar evita pulsar Generar por la razón equivocada. Medido en todo el rango, cerca del 35% de los colores son vivos y saturados, con una saturación HSL de al menos el 70% y una luminosidad de entre el 35% y el 65%. Los colores casi grises, con saturación por debajo del 20%, son solo cerca del 4%, y los colores muy oscuros (luminosidad por debajo del 20%) y muy claros (por encima del 80%) son cerca del 3% cada uno. Así que un lote de diez con el tipo Todos los colores normalmente contendrá varios colores intensos y rara vez un pastel o un gris antracita. Cuando necesites un tipo concreto, elígelo en Tipo de color: Vivo corresponde exactamente a ese grupo, y Pastel, Oscuro, Apagado y Escala de grises, cada uno al suyo. Personalizado te permite establecer tus propios rangos de Tono, Saturación y Luminosidad, y un rango de tono puede cruzar el 0, así que de 330 a 30 da rojos. El rango se comprueba contra el código HSL que muestra la página, así que ningún código queda fuera de él, y si contiene muy pocos colores para el valor de Cantidad, la página te pide que lo amplíes en lugar de repetir colores. Por lo demás, las repeticiones son posibles pero raras: marca Sin duplicados para descartarlas, y sin esa opción la probabilidad de que dos de 50 colores de todo el rango salgan idénticos es de cerca de 1 entre 13.700.
A menudo se busca un color aleatorio para usarlo como fondo, lo que plantea la única pregunta que una muestra no puede responder a simple vista: ¿se podrá leer el texto sobre ella? La guía de accesibilidad web, WCAG, exige una relación de contraste de al menos 4,5:1 para texto normal. Medido en todos los colores que puede producir esta página, el texto negro lo alcanza en cerca del 65% de ellos y el texto blanco en cerca del 36%, y no hay ningún color en el que ambos fallen: el mejor de los dos siempre alcanza al menos 4,58:1. Así que para cualquier fondo aleatorio, el texto negro o el blanco cumplirá, y la página te muestra cuál. Cada color muestra una pequeña insignia con Aa escrito en el más legible de los dos, seguido de la relación de contraste. La relación se redondea hacia abajo, así que nunca exagera el resultado, y se actualiza cuando cambias el color en el selector. La insignia solo compara texto negro y blanco; para un color de marca o cualquier otro color de texto, usa un verificador de contraste.
Lo aleatorio no es lo mismo que lo armonioso. Cada color de un lote se extrae de forma independiente, sin conocimiento de los demás, así que el generador nunca construye una paleta en el sentido del diseñador — sin pares complementarios, sin series análogas, sin luminosidad compartida. Un rango más estrecho cambia el carácter de un lote, no esa regla: los pasteles o una serie de azules siguen llegando uno a uno, sin nada que los una. Precisamente de eso se trata: te da el color que tú no habrías elegido, y eso es lo que rompe una costumbre o un bloqueo creativo. Para convertir un hallazgo aleatorio en algo útil, conserva el color que te guste y construye a partir de él, en lugar de pulsar Generar hasta que todo un conjunto coincida por casualidad. Mantén su tono y ve ajustando la luminosidad para obtener variantes más claras y más oscuras, o gira el tono 180 grados para obtener un color de contraste. Código HSL es el formato que convierte esos movimientos en aritmética en lugar de conjeturas.
¿Por qué elegir este generador de colores aleatorios?
- Cada color se genera en tu navegador con la Web Crypto API, nada se sube a ningún servidor
- Los 16.777.216 colores son exactamente igual de probables, un byte aleatorio por canal
- Códigos HEX, RGB y HSL para el mismo color, en cualquier combinación
- Hasta 50 colores a la vez, cada uno en una muestra con una insignia de contraste de texto
- Vivo, Pastel, Oscuro, Apagado y Escala de grises, o tu propio rango de tono, saturación y luminosidad
- Sin duplicados cuando lo necesites, y HEX en mayúsculas o sin #
- Haz clic en un código para copiarlo, o cambia cualquier color en el selector de color de tu navegador
- Copiar todo, Guardar como archivo y un Historial de tus últimos 10 lotes, guardado en tu navegador
- Gratis e ilimitado: sin registro, sin cuota, nada se guarda en nuestros servidores
Los colores aleatorios resultan útiles en cualquier situación en la que se necesita un color antes de que alguien haya decidido cuál. Los diseñadores los usan para romper un bloqueo creativo y encontrar un punto de partida al que su paleta habitual nunca habría llegado. Los desarrolladores rellenan mockups, marcadores de posición y avatares, dan a cada serie de un gráfico su propio color mientras el tema real sigue sin decidirse, y prueban cómo una interfaz se comporta con fondos para los que no fue diseñada — un lote de 50 con el tipo Todos los colores casi siempre incluye al menos un color muy oscuro o muy claro, y Oscuro o Pastel orienta la prueba hacia un extremo. Los artistas generativos y quienes prototipan juegos introducen los valores directamente en el código, donde la forma RGB encaja en la mayoría de las bibliotecas gráficas. Los profesores ponen los tres formatos uno junto a otro para mostrar que un color puede escribirse como un código, como tres canales o como una posición en un círculo cromático, y por qué la versión HSL está redondeada. Y cualquiera que etiquete, marque o codifique por colores una lista obtiene colores distintos sin darle vueltas a cuál elegir.
Vale la pena conocer algunas limitaciones honestas. Esto es un generador, no una herramienta de paletas: no construye armonías de color ni mantiene un color fijo mientras los demás cambian, y un rango más estrecho da colores de un solo tipo, no colores elegidos para combinar entre sí. La insignia de contraste solo compara texto negro y blanco. La página trabaja con los colores sRGB que muestra una pantalla — HEX, RGB y HSL —, sin transparencia y sin CMYK, Pantone, OKLCH ni colores CSS con nombre; para impresión, ajusta el color en tu proceso de impresión en lugar de confiar en un código de pantalla. El mismo código también puede verse ligeramente distinto de una pantalla a otra, porque las pantallas no están calibradas de igual manera. Los valores HSL están redondeados, como se explicó antes, y a menos que esté marcado Sin duplicados, un lote no se comprueba en busca de repeticiones. Lo que la página sí garantiza es más limitado y exacto: cada uno de sus 16.777.216 colores, o cada color dentro del rango que hayas establecido, tiene la misma probabilidad en cada pulsación, extraído de la fuente criptográfica de tu navegador y nunca enviado a ningún sitio.