Generador de paletas de colores
Elige un color base y genera al instante su escala de sombras y las armonias complementarias, analogas y triadas listas para exportar.
Armonias calculadas
Complementaria, analoga y triada se derivan del matiz del color base con la conversion HSL real, no con eyeballing.
Escala de sombras lista
Seis niveles de luminosidad con el mismo matiz y saturacion, que es lo que necesita una interfaz para hover, borders y fondos.
Calculo local
Todo se resuelve con JavaScript en el navegador. Ni los colores ni la marca se envian a ningun servidor.
Como se construye una paleta de marca que aguanta una interfaz
Una paleta que funciona en una web no es una lista de seis colores parecidos: es un color base con su escala de luminosidad y un pequeno numero de armonias para contextos distintos. El error tipico es elegir cinco hexadecimales a ojo y descubrir a mitad del proyecto que ninguno tiene contraste suficiente contra el texto blanco.
El papel del matiz, la saturacion y la luminosidad
HSL separa las tres dimensiones del color, y por eso permite construir la familia de forma ordenada. El matiz define el color; la saturacion define cuanto se aleja del gris; la luminosidad define cuanto se acerca al blanco o al negro. Cuando generas las sombras manteniendo constantes los dos primeros valores y moviendo solo el tercero, el resultado se percibe como el mismo color con distinto peso visual, que es exactamente lo que necesita un sistema de diseno.
Cual es la combinacion que mas aguanta
Un color base saturado para las acciones principales, su complementario para los contrastes y una version muy clara para fondos, mas el negro o el blanco puros para el texto, cubren la practica totalidad de una interfaz. Las armonias analoga y triada funcionan mejor en elementos decorativos o como acento, no como base de la interfaz, porque introducen demasiados tonos y，难以 mantener la jerarquia visual.
De la paleta al sistema de diseno
Cuando la paleta este cerrada, el siguiente paso es convertirla en variables CSS. Con los valores HEX que genera esta herramienta puedes construir un archivo de tokens donde cada color tiene un nombre semantico (no "azul 500", sino "color-primario"), y a partir de ahi mantener la coherencia deja de depender de que nadie recuerde el codigo hexadecimal correcto.