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.
Cambiar el modo no vuelve a sortear la fila
El desplegable registra una preferencia para la siguiente generación y nada más. Las muestras que hay en pantalla se construyeron bajo la regla que estuviera activa cuando se generaron, y se quedan exactamente como están hasta que regeneres. Es un detalle pequeño que pilla desprevenida a la gente, y existe para que alternar entre modos para leer sus descripciones no pueda borrar una fila que estabas cuidando.
Un candado guarda el color, no la armonía
Este es el comportamiento que conviene entender antes de confiar en él. Cada regeneración produce una paleta completamente nueva a partir de un tono base aleatorio completamente nuevo, y después tus muestras bloqueadas se vuelven a dejar caer en sus posiciones sin cambios. El candado es una garantía sobre un color, no una restricción sobre el generador.
En la práctica eso significa que un turquesa bloqueado dentro de una fila triádica normalmente no pertenecerá a la tríada de la que se acaban de sortear las otras cuatro muestras. Si quieres una paleta que irradie genuinamente de un color ancla, el flujo honesto es sortear hasta que la fila entera te guste, en lugar de bloquear una muestra y machacar el botón.
Saturación de 55 a 75, luminosidad de 40 a 70
El tono es lo único que controlan las reglas de armonía. La saturación y la luminosidad se sortean de forma independiente para cada muestra, dentro de una ventana fija: del 55 al 75 por ciento de saturación, del 40 al 70 por ciento de luminosidad. Esos límites son los que impiden que una paleta triádica sean tres bloques de aspecto idéntico, y mantienen cada muestra en un rango medio en lugar de en los extremos.
El coste es real, así que planifica en consecuencia: aquí no puedes sortear un casi negro, un casi blanco ni un pastel. Un sistema de diseño suele querer también esos, y el Conversor de Colores es la vía más rápida a una variante más clara u oscura una vez tienes una base que te gusta.
Tres exportaciones, y la franja de 800 por 200
La exportación hexadecimal es un código por línea, texto plano, listo para pegar en cualquier parte. La exportación CSS es un bloque :root con los colores nombrados de --color-1 a --color-5, que entra directamente en una hoja de estilos. El PNG es una franja de 800 por 200 píxeles, cinco columnas iguales de 160 píxeles sin separaciones ni etiquetas, que es lo que quieres para un panel de inspiración o un correo a un cliente.
No se guarda nada. En este widget no hay cuenta, ni llamada a servidor, ni almacenamiento local en absoluto, así que la fila vive únicamente en la pestaña abierta.
Dos cosas que conviene hacer antes de que una paleta salga a producción. Pasa cualquier pareja que vaya a llevar texto por el Comprobador de Contraste WCAG, porque una paleta armoniosa no dice nada sobre legibilidad. Después pasa el conjunto entero por el Simulador de Daltonismo, ya que un rojo y un verde triádicos pueden ser una delicia a la vista y completamente indistinguibles para una parte considerable de tus lectores. A partir de ahí el Generador de Gradientes CSS recoge el testigo de la construcción propiamente dicha.
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.
