Elige un color, elige una armonía, y esta herramienta gira el tono en cantidades fijas para producir un conjunto que combina. Las reglas se heredan de la teoría del color que se enseña en las escuelas de arte, y son un punto de partida genuinamente útil. También son aritmética sobre un espacio de color que no modela cómo ves, y por eso la salida suele necesitar un humano después.
Qué son realmente las armonías
Cada opción es una sola instrucción: gira el tono un número fijo de grados. Complementaria es 180, el lado opuesto de la rueda. Triádica son dos giros de 120, que dan tres colores equidistantes. Split-complementaria toma la complementaria y se retira 30 grados a cada lado, lo que suaviza el enfrentamiento. Monocromática no gira nada; mantiene el tono y mueve en su lugar la luminosidad y la saturación.
No son leyes de la percepción. Son convenciones que vinieron de pintores mezclando pigmento, y sobreviven porque producen de forma fiable conjuntos que no chocan, no porque haya nada físicamente especial en los 120 grados. Saber que son arbitrarias es lo que te permite abandonarlas cuando el resultado se ve mal.
La rueda de tonos no es uniformemente brillante
Esto es lo que la aritmética no puede saber. Gira el tono manteniendo la lightness HSL al 50% y no has mantenido nada constante. El amarillo a esa luminosidad alcanza el 92,8% de la luminancia del blanco. El azul en el mismo ajuste alcanza el 7,2%. El amarillo emite trece veces la luz.
Así que una paleta triádica anclada en azul produce dos compañeros que lo aplanarán visualmente, y una anclada en amarillo produce dos que desaparecen a su lado. Los números dicen que los tres colores son igual de claros. A tus ojos no se les consulta.
Es el mismo defecto que hace que los degradados salgan turbios en el medio y que #808080 no sea la mitad de brillante que el blanco: HSL se construyó en los setenta para ser barato de calcular, y su eje de lightness es un pedazo de aritmética sobre canales RGB en lugar de una medida de luz. Si quieres una paleta cuyos miembros se sientan realmente igual de pesados, genérala aquí por las relaciones de tono y luego arregla la luminosidad a ojo, o trabaja en Oklch, donde mantener la luminosidad constante la mantiene de verdad constante.
Una paleta no es un conjunto de iguales
La forma más común de usar mal una salida como esta es coger cinco colores y usar los cinco en igual volumen. Eso no es una paleta, es una pelea. Todo conjunto de colores que funciona en la práctica tiene una jerarquía: uno dominante, uno de apoyo, y el resto como acentos usados con moderación.
La vieja heurística de los diseñadores es 60-30-10: sesenta por ciento de la superficie en el color dominante, treinta en el secundario, diez en el acento. No es tanto una regla como una observación sobre cómo suele verse el trabajo equilibrado cuando lo mides. Si un diseño se siente ruidoso y no sabes decir por qué, medir las proporciones suele ser donde está la respuesta.
También significa que la armonía importa menos de lo que se cree. Casi dos tonos cualesquiera pueden hacerse funcionar si uno está desaturado y el otro no. La mayoría de las paletas profesionales son un color con una gama de tintes, más un único acento que aparece en cerca de una décima parte del área, lo que está más cerca de lo monocromático que de nada que la rueda generaría.
Nada de esto comprueba el contraste
Una armonía dice que dos colores tienen una relación de tono agradable. No dice nada sobre si el texto en uno es legible sobre el otro, y son preguntas sin relación que la gente confunde habitualmente.
Las parejas complementarias lo ilustran bien. El azul y el amarillo son complementarios y llegan a cerca de 8:1, lo que sirve para texto corrido. El rojo y el cian también son complementarios, y aterrizan mucho más abajo. La rueda no lo sabe ni le importa: mide distancia angular entre tonos, y la legibilidad va de diferencia de luminancia.
Así que genera aquí la paleta y luego pasa cada pareja sobre la que pienses poner texto por un verificador de contraste. Las WCAG piden 4,5:1 para texto normal y 3:1 para texto grande. Esa comprobación dura dos segundos y es lo único que responde a la pregunta que la armonía no puede.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": las armonías son aritmética de tonos hecha en la pestaña de tu navegador. No se transmite nada.
¿Por qué los colores de mi paleta no parecen igual de brillantes?
Porque no lo son, y HSL no puede decírtelo. Valores de lightness iguales en tonos distintos producen cantidades de luz salvajemente distintas: trece veces entre amarillo y azul con el mismo ajuste. La paleta acierta en las relaciones de tono y calla sobre todo lo demás. Ajusta la luminosidad a ojo, o reconstrúyela en Oklch donde el eje significa lo que dice.
¿Qué armonía debo elegir?
Monocromática si dudas, y no es una salida fácil. Es la más difícil de estropear, parece deliberada, y la mayoría de las interfaces profesionales están más cerca de ella que de ninguna otra: un tono, una gama de tintes, un acento. Recurre a la complementaria cuando necesites que algo destaque con nitidez, y a la triádica cuando tengas tres categorías genuinamente distintas que distinguir y la energía sea el objetivo.
¿Cuántos colores necesito?
Menos de los que crees. Un neutro, un color de marca y un acento sostienen una interfaz entera, con tintes de cada uno para los estados. Donde de verdad necesitas más es en la semántica —éxito, aviso, error— y esos se deciden por convención, no por armonía. Nadie te dará las gracias por un rojo que encaja en la paleta si no se lee como un error.
¿Puedo usar estos colores para texto?
Compruébalo antes. Una armonía va de tono y el contraste va de luminancia; una paleta puede ser perfectamente armoniosa y completamente ilegible. Pasa cada pareja por un verificador de contraste y busca 4,5:1 en texto corrido. Si tu acento falla, oscurécelo para el texto y guarda la versión brillante para formas y rellenos: es la salida normal, y por eso los sistemas de diseño suelen tener dos versiones de cada acento.