Generador de Paleta de Colores

Cada color se genera como un valor hexadecimal aleatorio de 6 dígitos usando Math.random(). El resultado abarca todo el espacio de color RGB — el tono, la saturación y el brillo varían de forma independiente. Esto significa que puedes obtener colores muy oscuros, muy claros o muy saturados en la misma paleta. Si el resultado no se adapta a tus preferencias, simplemente regenera o bloquea los colores que te gusten y regenera el resto.

La generación completamente aleatoria no aplica reglas de teoría del color como relaciones complementarias, análogas o triádicas. Los colores son independientemente aleatorios, por lo que pueden chocar o carecer de contraste. Para obtener paletas más armoniosas, bloquea uno o dos colores que te gusten y sigue regenerando hasta que los espacios desbloqueados produzcan una combinación que funcione. Para paletas precisas basadas en teoría del color, usa una herramienta dedicada como Coolors o Adobe Color.

Sí. Cada color es un código hexadecimal estándar de 6 dígitos en minúsculas, directamente utilizable en CSS, configuración de Tailwind, tokens de diseño o cualquier campo de color. Copia valores HEX individuales para muestras específicas, o copia la paleta completa como una lista separada por comas para pegarla en una hoja de cálculo, archivo de tokens o sistema de diseño.

Hacer clic en el icono de candado en un color lo marca como fijo — no cambiará cuando hagas clic en Generar de nuevo. Solo se regeneran los colores desbloqueados. Esto te permite construir una paleta de forma iterativa: encuentra un color que te encante, bloquéalo y sigue generando hasta que los espacios restantes lo complementen. Haz clic en el icono de candado de nuevo para desbloquear un color.

Los iconos de candado y copia dentro de cada muestra cambian automáticamente entre oscuro y claro para mantenerse legibles sobre el color de la muestra — esto se determina por la luminancia percibida de la muestra. Sin embargo, elegir pares de colores accesibles para texto sobre fondo requiere verificar las relaciones de contraste WCAG. Copia tus colores elegidos y pásalos por un verificador de contraste para confirmar que cumplen los requisitos de accesibilidad.

No directamente en esta herramienta — genera paletas completamente aleatorias sin un color semilla de entrada. Si quieres construir una paleta alrededor de un color específico, bloquea ese color en uno de los cinco espacios y deja que el generador rellene los otros cuatro aleatoriamente hasta encontrar una combinación que te guste. Para la generación de paletas basada en reglas de armonía de color a partir de un color semilla específico, usa el Conversor de Código de Color para analizar tu color semilla y luego explora los tonos complementarios manualmente.