Generador de Paletas Aleatorias con Códigos HEX y RGB
Selecciona la cantidad de colores, genera una paleta nueva y copia los valores HEX o RGB directamente desde las tarjetas.
Aún no hay paleta.
Pulsa el botón o la barra espaciadora para empezar.
Historial (0/50)
Guía rápida
- GenerarBotón o barra espaciadora
- Copiar colorClic en la tarjeta o Enter
- CompartirLos colores van incluidos en la URL
- GuardarHistorial local del navegador
sin rodeos.
- Todo a la vistaLa zona de entrada y los resultados se reconocen rápido.
- Resultado primeroEl número principal va delante; el detalle queda debajo.
- Menos requisitosSin registro ni datos innecesarios antes de usar la herramienta.
Guía de paletas aleatorias
El generador de paletas aleatorias toma la cantidad de colores que elijas y llena cada posición con un valor RGB aleatorio independiente. Cada tarjeta de resultado muestra un código HEX listo para la web junto con su equivalente RGB, y puedes copiar una muestra, compartir la paleta por URL o consultar el historial para recuperar combinaciones anteriores.
No se aplica ninguna corrección de teoría del color. Cada color se crea asignando un valor aleatorio independiente a los canales rojo, verde y azul, y luego se convierte a notación HEX y RGB.
Qué es una paleta de colores y por qué generarla al azar
Una paleta de colores es un conjunto de tonos que se usan juntos en un mismo proyecto. Los sistemas de diseño definen un color principal, uno secundario, un fondo y un acento, y los aplican de forma coherente en todas las pantallas. Trabajar sin paleta produce tonos dispares que luego cuestan más tiempo de unificar.
La generación aleatoria ofrece combinaciones imprevisibles a propósito. Elegir solo dentro de las reglas del círculo cromático tiende a mantener los resultados en un rango conocido, mientras que los valores aleatorios sacan a la superficie colores que normalmente no considerarías. Eso convierte las paletas aleatorias en un recurso útil para la fase inicial de ideas y la exploración de ambientes.
- Una paleta agrupa colores que comparten el tono visual del proyecto
- Las combinaciones aleatorias empujan más allá de las elecciones habituales
- Adecuada para la exploración inicial y el descubrimiento de ambientes
- Se espera un segundo ajuste de brillo y saturación antes de la decisión final
Formato HEX: qué significa #RRGGBB
Un código HEX es un número hexadecimal de seis dígitos precedido por el signo #. Los dos primeros dígitos representan el rojo, los dos centrales el verde y los dos últimos el azul, cada par con un rango de 00 a FF. Por ejemplo, #FF0000 fija el rojo al máximo mientras verde y azul quedan en cero, lo que produce un rojo puro.
Cada dígito hexadecimal tiene 16 valores posibles (0–9 y A–F). Dos dígitos por canal dan 16 × 16 = 256 niveles. Al combinar los tres canales se obtienen unos 16,77 millones de colores distintos. La misma notación se interpreta de forma idéntica en CSS, HTML y cualquier herramienta de diseño.
- Cada par de dígitos en #RRGGBB corresponde a un canal
- 00 significa canal apagado; FF es la intensidad máxima
- 256 niveles por canal, unos 16,77 millones de colores en total
- Se interpreta igual en CSS, HTML, Figma y otros
Formato RGB: Rojo, Verde, Azul 0–255 y su relación con HEX
RGB expresa cada uno de los tres primarios de luz—Rojo (Red), Verde (Green), Azul (Blue)—como un entero decimal de 0 a 255. rgb(255, 0, 0) equivale a #FF0000 y rgb(0, 128, 255) equivale a #0080FF. Donde HEX escribe una cadena continua, RGB separa los tres valores con comas.
La conversión es directa: cada par de dígitos HEX se pasa a decimal. FF es 255, 80 es 128, 00 es 0. Esta herramienta muestra las dos notaciones a la vez, así que no hace falta calcular nada a mano.
- RGB expresa cada canal como un decimal de 0 a 255
- Convertir dos dígitos HEX a decimal da el valor RGB
- FF = 255, 80 = 128, 00 = 0
- Ambas notaciones aparecen en cada tarjeta de resultado
Cómo usar la herramienta paso a paso
Empieza eligiendo la cantidad de colores en el menú desplegable de la parte superior. El valor predeterminado es cinco y el rango va de tres a quince. Pulsa "Generar paleta" junto al desplegable y aparecerá al instante ese número de tarjetas. Los usuarios de teclado pueden pulsar la barra espaciadora para la misma acción.
Cada tarjeta muestra una vista previa del color, su código HEX y su valor RGB. Haz clic en cualquier tarjeta para copiar el código HEX al portapapeles del sistema; un aviso de tipo toast confirma la copia. Si el resultado te gusta, usa el botón Compartir o Copiar URL para enviar la paleta a otra persona.
- Elige la cantidad de colores en el desplegable (3–15, predeterminado 5)
- Pulsa el botón o la barra espaciadora para generar
- Clic en una tarjeta para copiar el HEX al portapapeles
- Compartir o Copiar URL para enviar la paleta
Cantidad de colores: cuándo usar 3 y cuándo 15
Una paleta de tres a cinco colores basta cuando necesitas un primario, un secundario y un acento rápidamente. Tonos de página de destino, conjuntos de iconos y temas de interfaz sencillos encajan en ese rango. Menos colores son más fáciles de comparar de un vistazo y ayudan a decidir antes.
Diez o más colores sirven como punto de partida para paneles, visualizaciones de datos o ilustraciones que requieren muchos tonos distintos. La contrapartida es que más colores elevan la probabilidad de tonos casi duplicados, por lo que un repaso posterior para eliminar repeticiones o ajustar la luminosidad suele ser el paso siguiente.
- 3–5 colores: decisiones de tono rápidas para UI básica
- 6–9 colores: diseños y presentaciones de escala media
- 10–15 colores: visualización de datos e ilustraciones multicolor
- Más colores implican más revisión de duplicados
Copiar y pegar códigos de color
Al hacer clic en cualquier parte de una tarjeta, el código HEX de esa muestra se copia en el portapapeles del sistema. Con el teclado, enfoca la tarjeta y pulsa Enter para el mismo resultado. Un mensaje toast aparece de inmediato para confirmar qué color se copió.
Pega el código directamente en una propiedad CSS color o background, en el campo de color de Figma o en el cuadro de color personalizado de PowerPoint. Si necesitas los valores RGB, léelos en la tarjeta e introdúcelos; no hace falta cálculo de conversión.
- Clic o Enter para copiar el HEX
- El aviso toast confirma la copia
- Pegar directamente en CSS, Figma o PowerPoint
- Los valores RGB se leen en la tarjeta para uso directo
Compartir por URL: cómo se codifican los colores en la dirección
Al generar una paleta, el conjunto de colores se escribe automáticamente en los parámetros de la URL. Copia esa dirección y envíala por mensajería o correo electrónico; quien la abra verá la misma paleta sin necesidad de registro ni de un servidor de almacenamiento. La propia dirección transporta la paleta.
El botón Copiar URL pone la dirección actual en el portapapeles. El botón Compartir abre la hoja de compartir del sistema en navegadores compatibles con la Web Share API. En navegadores de escritorio donde Web Share no está disponible, la acción copia la URL.
- Los códigos de color se almacenan en los parámetros de la URL
- Un solo enlace reproduce la paleta exacta
- Copiar URL: la dirección va al portapapeles
- Botón Compartir: abre la hoja del sistema cuando está disponible
Historial: paletas guardadas en el navegador
Cada paleta generada se guarda automáticamente en el localStorage del navegador. El registro se conserva tras recargar la página y reiniciar el navegador. Se almacenan hasta 50 entradas; cuando se supera el límite, la más antigua se elimina de forma automática.
Haz clic en una tarjeta del historial para volver a mostrar esa paleta en la zona principal. El botón Borrar todo elimina todas las entradas de una vez. Como localStorage está vinculado a un navegador y dispositivo concretos, el historial no se comparte con otros navegadores ni equipos.
- Guardado automático en localStorage, se mantiene tras recargas
- Límite de 50 entradas; la más antigua se elimina al superar el tope
- Clic en una tarjeta del historial para restaurar la paleta
- No se comparte entre navegadores ni dispositivos
Generación aleatoria frente a armonía cromática
Esta herramienta genera cada color asignando valores aleatorios independientes a R, G y B. No calcula relaciones complementarias, análogas ni triádicas del círculo cromático, así que la armonía visual no está garantizada. Si necesitas un esquema coordinado, una herramienta basada en teoría del color es más adecuada.
Al mismo tiempo, la libertad respecto a la teoría del color puede ser ventajosa. Las combinaciones completamente impredecibles revelan a veces direcciones que no explorarías por tu cuenta. Tomar uno o dos favoritos y ajustar su luminosidad o saturación suele producir un abanico de ideas más amplio que mantenerse dentro de las reglas desde el principio. Un enfoque en dos fases—aleatorio para explorar, teoría para afinar—es un flujo de trabajo habitual.
- Cada canal es un valor aleatorio independiente; sin relaciones de rueda
- Para paletas complementarias o análogas, usar una herramienta de teoría del color
- Las combinaciones impredecibles revelan direcciones inesperadas
- Explorar al azar primero, refinar con teoría después
Accesibilidad del color: contraste y daltonismo
WCAG 2.2 recomienda un contraste de luminancia mínimo de 4,5 : 1 para texto normal y de 3 : 1 para texto grande. Los colores seleccionados al azar y aplicados directamente como fondo y texto pueden quedarse por debajo de esos umbrales. Comprueba siempre el contraste con un verificador después de generar la paleta que piensas usar.
Para usuarios con daltonismo, los emparejamientos rojo-verde que para la mayoría parecen distintos pueden volverse indistinguibles. Ejecutar un simulador de daltonismo antes de cerrar la paleta ayuda a planificar diseños que no dependan solo del color. Acompañar los colores con iconos, patrones o etiquetas mejora la accesibilidad en todos los casos.
- WCAG 2.2: mínimo 4,5 : 1 texto normal, 3 : 1 texto grande
- Los colores aleatorios pueden dar un contraste insuficiente
- Simulador de daltonismo recomendado antes de la decisión final
- Combinar color con iconos, patrones o etiquetas
Casos de uso: diseño web, presentaciones, lluvia de ideas
Al inicio de un proyecto web, cuando aún no existen colores de marca, girar paletas aleatorias es una forma rápida de explorar ambientes. Cuando una combinación encaja, se insertan los códigos HEX en propiedades CSS personalizadas, se previsualiza el resultado y se ajusta hasta confirmar la paleta. Esto acorta la fase de decisión cromática del prototipado.
Los gráficos de diapositivas, los separadores de sección y los acentos de infografías necesitan tonos distinguibles; una paleta aleatoria ofrece candidatos en segundos. Diseñadores de videojuegos la usan para probar paletas de personajes y entornos, e ilustradores recopilan muestras para tableros de inspiración. Sea cual sea el soporte, verifica contraste y coherencia antes de entregar.
- Diseño web: insertar códigos HEX en variables CSS
- Presentaciones: elegir colores de gráficos y divisores
- Juegos e ilustración: experimentar con paletas de personajes y fondos
- Siempre verificar contraste y coherencia antes de entregar
Preguntas frecuentes
Q¿Qué rango de cantidad de colores hay?
Puedes elegir de 3 a 15. Tres sirve para definir los colores principales rápidamente; quince se adapta a composiciones multicolor.
Q¿Qué se copia al hacer clic en una tarjeta?
El código HEX de seis dígitos de esa muestra (p. ej. #3A7BFC) se coloca en el portapapeles del sistema, listo para pegar en CSS o en una herramienta de diseño.
Q¿La otra persona verá la misma paleta con la URL compartida?
Sí. Los datos de color están incrustados en los parámetros de la URL, así que al abrir el enlace se reproduce exactamente la misma paleta.
Q¿El historial se sincroniza entre dispositivos?
No. El historial se guarda en el localStorage del navegador, por lo que solo está disponible en el mismo navegador del mismo dispositivo.
QLos colores generados no parecen combinar entre sí.
Esta herramienta asigna valores aleatorios independientes sin aplicar armonía de teoría del color. Para esquemas complementarios o análogos, usa una herramienta basada en el círculo cromático junto con esta.
Q¿Comprueba automáticamente el contraste WCAG?
Por ahora no hay verificación automática de contraste. Tras seleccionar la paleta, comprueba las relaciones de contraste con un verificador de accesibilidad.
Q¿Qué hace la barra espaciadora?
Cuando el foco del teclado está en la página, pulsar la barra espaciadora genera una nueva paleta, lo que resulta útil para recorrer opciones sin tocar el ratón.
Fuentes de referencia
Consultado el 2026-08-19. Las definiciones y la notación de los códigos de color siguen las especificaciones del W3C.