Cómo usar el generador de paletas de colores
- Se genera una paleta aleatoria de 5 colores en cuanto se carga la página.
- Pulsa Espacio (o haz clic en Regenerar) para probar una paleta nueva, inténtalo unas cuantas veces para ver el rango de colores que produce cada modo de armonía.
- ¿Te gusta un color? Haz clic en su icono de candado para bloquearlo, las muestras bloqueadas nunca cambian en la siguiente regeneración.
- Cambia el desplegable de Modo de armonía entre Aleatorio, Complementaria, Análoga y Triádica para cambiar cómo se relacionan entre sí los colores nuevos.
- Cuando estés satisfecho con el resultado, haz clic en Copiar lista HEX, Copiar variables CSS, o Descargar PNG para llevártelo contigo.
Todo ocurre localmente en tu navegador, sin subidas, sin cuenta, sin viaje de ida y vuelta a un servidor.
Por qué importan los modos de armonía
Elegir colores que “funcionen juntos” es una de las partes más difíciles de cualquier diseño, logo, sitio web, presentación o interfaz de app. La teoría del color da algunos atajos fiables para esto, y esta herramienta construye cada paleta directamente a partir de uno de ellos:
- Aleatorio elige cinco tonos completamente independientes, útil para inspiración pura o cuando quieres máxima variedad sin ninguna restricción.
- Complementaria alterna entre un tono y su opuesto exacto en la rueda de color (180° de distancia), lo cual crea combinaciones fuertes y de alto contraste, piensa en un acento cálido contra un fondo frío.
- Análoga agrupa tonos cercanos entre sí (pasos de 30°), lo cual se lee como calmado y cohesionado ya que cada color comparte una temperatura similar, común en fotografía de naturaleza y paletas de marca tranquilas.
- Triádica distribuye tres tonos de forma uniforme por la rueda (120° de distancia), dando un look vibrante y equilibrado que sigue siendo armonioso en lugar de chocante, una elección clásica para marcas juguetonas y enérgicas.
Cada color generado también tiene su saturación y luminosidad aleatorizadas dentro de un rango agradable y apto para pantalla/impresión, así que incluso una paleta basada en armonía tiene variedad tonal real en lugar de cinco tonos que parecen idénticos.
Bloquear colores mientras experimentas
Construir la paleta perfecta rara vez ocurre en el primer intento. En lugar de empezar de cero cada vez que un color está cerca pero el resto no encaja del todo, bloquea las muestras que ya te gustan y sigue regenerando, solo los colores desbloqueados se vuelven a tirar, así que puedes avanzar hacia una paleta completa un color a la vez.
Exportar tu paleta
Una vez que tienes una paleta que te satisface, tres opciones de exportación cubren los siguientes pasos más comunes: una lista HEX plana (un código por línea, lista para pegar en cualquier sitio), un bloque de propiedades personalizadas CSS que puedes colocar directamente en una hoja de estilos, y una imagen PNG de muestras para maquetas de diseño, tableros de inspiración, o compartir con un cliente que no quiere mirar códigos hexadecimales.
Usos habituales
- Esquemas de color de sitios web y apps (primario/secundario/acento/fondo/texto).
- Exploración de colores de marca y logotipo.
- Presentaciones y temas de diapositivas.
- Conjuntos de colores para visualización de datos.
- Inspiración rápida al empezar cualquier diseño nuevo desde una página en blanco.
- Elegir un conjunto de colores pequeño y centrado antes de dibujar pixel art, para que la paleta de tu sprite se mantenga coherente.
- Elegir un tema de color coordinado antes de generar una nube de palabras para un informe o presentación a juego.
