Generador de paletas de colores a partir de un color base

Qué significan de verdad los nombres de las armonías

Cada una de estas opciones es una regla aplicada a un círculo. El tono recorre 0–360 grados, tu color base se ubica en algún punto de él, y la armonía decide dónde caen las demás muestras.

• Complementaria — el tono que está a 180 grados. Separación máxima, que es la razón por la que funciona para un botón de llamada a la acción sobre un fondo de marca, y también por la que una página entera construida con ella resulta estridente.
• Análoga — vecinos dentro de 60 grados. Tranquila y coherente, con un problema de origen: nada destaca. Si necesitas un acento, róbalo de otra regla.
• Complementaria dividida — en lugar del opuesto exacto, los dos tonos que lo rodean. Conservas casi todo el contraste y pierdes esa vibración que tienen los complementarios puros a plena saturación.
• Triádica y cuadrada — tres o cuatro tonos repartidos por igual alrededor del círculo. Las dos te dan mucho color, y las dos necesitan que uno de los tonos domine o el resultado parece un juguete.
• Monocromática — un solo tono, cinco luminosidades. La opción más segura, y la que más a menudo necesita un color de acento prestado para no verse plana.

Algo que sorprende a mucha gente: este es el círculo RGB, no el círculo cromático que te enseñaron en la clase de arte. En el círculo RGB el opuesto del azul es el amarillo. En el círculo rojo-amarillo-azul que usan los pintores, el opuesto del azul es el naranja. Ninguno está mal, son modelos distintos, pero si un resultado complementario te resulta raro, normalmente es por eso.

Cinco hexadecimales todavía no son una paleta

Una paleta de interfaz que funcione necesita tres cosas que esta herramienta no produce.

Proporción. La guía clásica es más o menos 60% de la superficie en un color dominante, 30% en uno secundario, 10% en el de acento. Cinco muestras del mismo tamaño ocultan eso por completo, así que una paleta que aquí se ve equilibrada puede resultar abrumadora una vez que está en una página real.

Neutros. Casi cada píxel de un producto real es gris, blanco o casi negro: texto, bordes, fondos, estados deshabilitados. Ninguna regla de armonía genera eso. Constrúyelos aparte, y mézclales un poco de tu tono base — los grises con unos pocos puntos de saturación tomados del tono de marca se ven intencionales, mientras que un #808080 puro parece un marcador de posición.

Estados. Hover, activo, foco, deshabilitado y seleccionado necesitan cada uno sus propios valores, que normalmente se obtienen subiendo o bajando la luminosidad entre 6–10 puntos respecto de la base. Planifica cuatro o cinco pasos por cada color importante, no uno.

Dónde se queda corto este generador

Trabaja en HSL, lo que significa que los números de luminosidad son matemáticos, no perceptuales. El amarillo al 50% de luminosidad se ve mucho más brillante que el azul al 50% de luminosidad, porque tu ojo es mucho más sensible al verde que al azul. En una paleta triádica o cuadrada, la muestra amarillenta casi siempre va a parecer que brilla junto a las demás. Ajústala a mano; lo hacen todos los diseñadores.

Una base casi gris lo inutiliza por completo. Si tu base tiene muy poca saturación, rotar el tono no cambia casi nada, y vas a obtener cinco muestras que se ven idénticas. La herramienta las muestra de todos modos, y los códigos hexadecimales sí son distintos. Solo que no son lo bastante distintos como para usarlos. Parte de un color saturado y desatúralo después.

La armonía tampoco dice nada sobre la legibilidad ni sobre el daltonismo. Dos muestras pueden estar a 120 grados de distancia y aun así ser indistinguibles para alguien con deuteranomalía, la forma más común de deficiencia de visión del color rojo-verde. Y un color que combina de maravilla con tu base puede ser ilegible como texto sobre él. Comprueba cada par de texto sobre fondo por separado antes de publicar.

Cómo nombrar las variables que exportas

La exportación usa nombres posicionales, de --palette-1 a --palette-5, porque la herramienta no tiene idea de para qué son los colores. Renómbralos por su función antes de hacer commit: --surface, --accent, --accent-hover, --danger.

Resiste la tentación de nombrarlos por el tono. Una variable llamada --blue-500 es una pequeña bomba de tiempo: el día que la marca cambie a verde, o el nombre miente o tocas todos los archivos que lo usan. Los nombres por función sobreviven a un cambio de marca; los nombres por tono, no.

Preguntas frecuentes

¿Cuántos colores debería tener una paleta?

Para una interfaz, un color dominante, un acento y una familia de cuatro a seis neutros cubren casi todo. Cinco tonos ya son más de lo que la mayoría de los productos usa bien. Agregar colores después es más fácil que quitarlos.

¿Qué armonía elijo si no lo tengo claro?

Análoga para algo tranquilo, complementaria si necesitas que un elemento reclame atención. Con cualquiera de las dos es difícil equivocarse. La triádica y la cuadrada son las que piden mano firme, porque tres o cuatro tonos fuertes van a pelear entre sí a menos que uno lidere con claridad.

¿Por qué las cinco muestras se ven casi iguales?

Tu color base está cerca del gris. La rotación de tono solo tiene efecto cuando hay saturación que rotar, así que una base desaturada produce cinco colores casi idénticos. Parte de una versión viva del color y reduce la saturación después.

¿Puedo extraer una paleta de una imagen aquí?

En esta herramienta no. Funciona a partir de un único color base que tú indicas. Si tienes una imagen, saca de ella el color dominante con cualquier selector de color, pega ese hexadecimal y úsalo como base.

¿Estos colores son accesibles?

No de forma automática. Una regla de armonía ordena tonos y no sabe nada de contraste. Comprueba cada par de texto y fondo contra los umbrales de la WCAG antes de usarlo, y nunca confíes solo en el tono para transmitir significado.

Última actualización 19 de septiembre de 2026