Generador de Armonía de Colores

Siete paletas a partir de un color base: gire la rueda y pruébelas en una pantalla

El generador de armonías de color parte de un color que ya tenga elegido y selecciona otros situados a ciertos grados de distancia en la rueda cromática. Muestra siete armonías una junto a otra (complementario, análogo, triádico, complementario dividido, cuadrado, rectángulo y monocromático), de modo que se pueden comparar de un vistazo sin abrir cada una para ver cuál se acerca más a lo que busca.

Una vez elegidos los colores, queda decidir cómo repartirlos en la práctica. Por eso la herramienta también muestra una pantalla de ejemplo pintada con un 60 % de fondo, un 30 % de tarjeta y un 10 % de botón, y para cada color indica con su razón de contraste si se lee mejor con texto blanco o con texto negro.

Cuándo usarlo

• Cuando ya hay un color fijo: si el color de un logotipo o de una escuela o un club no se puede cambiar, lo difícil es elegir el resto. Una regla de armonía reduce las opciones a unos pocos candidatos según el ángulo en la rueda, y así se obtiene un punto de partida sin perderse entre todos los colores posibles.
• Cuando solo un punto debe destacar: en la frase clave de una presentación o en el botón de inscripción de un cartel, el complementario (justo enfrente del color base) o el complementario dividido (los dos colores contiguos a este) funcionan bien como acento.
• Cuando se necesitan varios colores fáciles de distinguir: las series de un gráfico o las categorías de un calendario, por ejemplo 3 o 4, se confunden menos en una paleta triádica o cuadrada, donde los tonos están separados por 120° o 90°. Si solo se usa el color, a quienes perciben los colores de otra manera les cuesta distinguirlos, así que conviene añadir texto o patrones.
• Cuando hay que explicar por qué dos colores combinan: se puede decir a un cliente o a un equipo: «estos dos colores están enfrentados en la rueda, por eso el contraste es fuerte». Basta con introducir el color que ya se tiene como base y ver en qué ángulos caen los demás.

Cómo se usa

1. Introduzca un color base. Seleccione el cuadro de selección de color o escriba en el campo de texto HEX (#E07A5F), rgb(224 122 95) o hsl(13 68% 63%). Arrastrar el punto de la rueda cromática también cambia el tono del color base.
2. En Las 7 armonías de un vistazo, compare las franjas y seleccione la paleta que prefiera. Las muestras de arriba y los puntos de la rueda cambian a esa paleta.
3. Defina el ambiente general con las barras de saturación y luminosidad. Ambas se aplican a todos los colores de la paleta, de modo que puede aclararla como un pastel o hacerla oscura y sobria sin alterar los ángulos entre los colores.
4. En Probar como 60·30·10, pulse «Cambiar color principal» para decidir qué color ocupa el fondo amplio. La lista de la derecha indica el color de texto que conviene sobre cada color y su contraste.
5. Llévese el resultado. Al seleccionar una muestra se copia el HEX de ese color, y los botones de abajo exportan una lista HEX, variables CSS, una imagen PNG o un enlace. Los 12 colores base más recientes se guardan solo en este navegador.

Las siete armonías y sus ángulos

Esta herramienta toma el valor HSL del color base y gira únicamente el tono (H) según la regla, sin tocar la saturación (S) ni la luminosidad (L). Solo la paleta monocromática hace lo contrario: conserva el tono y cambia la luminosidad de 20 en 20. La tabla siguiente muestra los resultados reales para el color base #E07A5F (hsl 13° 68% 63%).

Cuando la luminosidad base supera el 75 %, la paleta monocromática no tiene margen para aclarar más, por lo que crea dos pasos solo hacia el lado oscuro (−40 y −20). Por debajo del 25 %, crea dos pasos solo hacia el lado claro (+20 y +40). Es una convención para que no aparezca dos veces el mismo color cerca del blanco o del negro, como ocurría en la versión anterior.

Por qué el complementario cambia de un sitio a otro: no existe una sola rueda cromática

Con el mismo rojo, una herramienta responde con un color cercano al cian y un libro de texto dice verde. Ninguno se equivoca: usan ruedas cromáticas distintas. El material educativo de la National Gallery of Art presenta el rojo, el amarillo y el azul como primarios de la pintura, y el rojo, el verde y el azul como primarios de la luz que usan los televisores y las pantallas de ordenador. Para la rueda de la pintura da como ejemplos de complementarios el rojo y el verde, el amarillo y el violeta, y el azul y el naranja.

Esta herramienta usa la rueda de pantalla porque el resultado se lleva en HEX y CSS para usarlo en una pantalla. W3C CSS Color 4 define el ángulo de tono de hsl() de forma que 0° es rojo, 120° es verde y 240° es azul, y los ángulos de aquí siguen exactamente esa definición. El sistema Munsell coloca a intervalos regulares, formando un anillo, cinco tonos principales, rojo (R), amarillo (Y), verde (G), azul (B) y púrpura (P), y los cinco intermedios entre ellos (YR, GY, BG, PB y RP), de modo que al dibujar el círculo en ese orden BG queda enfrente de R. Si va a elegir colores para llevarlos a pintura o a impresión, tenga en cuenta que el complementario de la rueda del artista puede diferir del resultado de aquí.

El mismo número de luminosidad puede verse distinto

Que la luminosidad HSL (L) sea igual no significa que el ojo la perciba igual. Si se coloca texto blanco sobre el amarillo #FFFF00 y sobre el azul #0000FF, ambos con un 50 % de luminosidad, el contraste WCAG resulta muy distinto.

Por eso una paleta creada solo girando el tono suele dar una luminosidad desigual, y el contraste entre sus colores suele ser bajo. En el ejemplo predeterminado de complementario dividido (#E07A5F, #5FE0BB y #5F85E0), el contraste entre los colores es de 1,8:1, 1,2:1 y 2,1:1, todos por debajo de 3:1. Con texto negro sobre esos tres colores se obtienen 7,1:1, 12,8:1 y 5,9:1, más que suficiente para leer. En lugar de superponer colores de la paleta como texto y fondo, es más seguro pintar el fondo con un color de la paleta y dejar el texto en blanco o en negro.

Probar como 60·30·10

Aunque los colores estén elegidos, repartirlos en áreas iguales suele dar una imagen recargada. La regla 60-30-10, muy usada en interiorismo, recomienda un 60 % de color principal en la superficie más amplia, un 30 % de color secundario a continuación y un 10 % de color de acento en los detalles pequeños. La pantalla de ejemplo de esta herramienta está dibujada para que el fondo (color principal), la tarjeta (color secundario) y la franja del botón inferior (color de acento) ocupen exactamente un 60, un 30 y un 10 por ciento.

• Las paletas de 2 colores no tienen franja de acento, por lo que el reparto es 70 % de fondo y 30 % de tarjeta.
• Las paletas de 4 colores pintan una franja pequeña bajo la tarjeta con el cuarto color, con un reparto de 60, 25, 10 y 5.
• Los repartos de 2 y 4 colores son convenciones fijadas por esta herramienta, y la propia regla 60-30-10 es un punto de partida, no una cifra de obligado cumplimiento.

«Cambiar color principal» desplaza los papeles un puesto sin cambiar los colores. Los mismos tres colores pueden dar una impresión muy distinta según cuál ocupe el fondo, así que conviene pulsar varias veces y comparar antes de decidir.

Cómo poner texto sobre una paleta

La lista de la derecha elige, para cada color, el texto blanco o negro con mayor contraste y lo evalúa según WCAG 2.2. Las razones de contraste se muestran truncadas a un decimal, de modo que 4,48:1 nunca se redondea a 4,5:1 para aprobar.

• Válido para texto normal: 4,5:1 o más (1.4.3 Contraste mínimo).
• Solo texto grande: 3:1 o más pero menos de 4,5:1. Sirve para títulos grandes, pero no basta para el texto de cuerpo.
• Insuficiente: menos de 3:1.
• Botón sobre fondo: un elemento interactivo como un botón necesita al menos 3:1 respecto al color contiguo para que su forma se distinga (1.4.11 Contraste de elementos no textuales). Si no llega, añada un borde o un subrayado.

Aunque el contraste sea suficiente, el significado no debe depender solo del color. La pauta WCAG 1.4.1 indica que el color no debe ser el único medio de transmitir información, así que, si distingue el rojo para errores y el verde para lo correcto, añada también texto o un icono.

Errores frecuentes

• Introducir blanco, negro o gris como base: un color neutro no tiene tono, de modo que cualquier regla da el mismo color. Si es gris, suba la barra de saturación; si es blanco o negro, mueva también la barra de luminosidad lejos del 100% o del 0%. La paleta monocromática, que solo cambia la luminosidad, también sirve.
• Pintar cuatro colores en áreas iguales: las paletas de cuadrado y rectángulo tienen muchos colores y, si no se elige uno como principal y se usan los demás en pequeñas dosis, la mirada no encuentra dónde detenerse.
• Usar colores complementarios como texto y fondo: el contraste de tono es fuerte, pero si la luminosidad es parecida el texto se ve borroso y la razón de contraste es baja. Deje el texto en blanco o en negro.
• Tomar por error que el complementario difiera del de otro sitio: la rueda de pantalla y la del artista enfrentan colores distintos. Compruebe primero qué rueda se está usando.
• Enviar a la imprenta el HEX de pantalla tal cual: la impresión crea el color con tintas CMYK, por lo que los colores vivos de la pantalla pueden no salir igual. Use el conversor RGB a CMYK para ver antes el color previsto en impresión.

Límites y precauciones

• Una regla de armonía solo fija la relación entre ángulos de tono. No garantiza que los colores combinen bien, así que tome la decisión final en la pantalla donde se vayan a usar.
• La saturación y la luminosidad se mantienen iguales a las del color base, por lo que el brillo percibido varía de un color a otro y el contraste entre colores puede ser bajo.
• La paleta monocromática solo cambia la luminosidad HSL y conserva la saturación. En los pasos muy claros o muy oscuros, el color puede verse más apagado o más intenso que el original.
• El mismo HEX se ve distinto según los ajustes del monitor, el brillo de la pantalla, el modo oscuro y la iluminación del entorno.
• La evaluación del contraste solo considera la razón de WCAG 2.2. No tiene en cuenta el tamaño ni el grosor reales del texto, ni las diferencias en la percepción del color. Para ver cómo se ve una paleta con otra percepción del color, pruebe también la simulación del Test de daltonismo.

Fecha de referencia La especificación CSS, WCAG y el material de educación artística se comprobaron el 20 de octubre de 2026. Los HEX y las razones de contraste de las tablas se calcularon directamente con las reglas de esta herramienta.

Fuentes

• 01W3C: CSS Color Module Level 4 — HSLÁngulo de tono de hsl(): 0deg rojo, 120deg verde, 240deg azul
• 02W3C: WCAG 2.21.4.1 Uso del color, 1.4.3 contraste 4,5:1 (3:1 para texto grande), 1.4.11 contraste no textual 3:1
• 03National Gallery of Art: The Elements of Art – ColorPrimarios de la pintura: rojo, amarillo, azul; primarios de la luz en pantallas: rojo, verde, azul; ejemplos de complementarios: rojo–verde, amarillo–violeta, azul–naranja
• 04Adobe Express: The color wheel explainedLa rueda RYB es para artistas y pintura, la rueda RGB para pantallas (28 de mayo de 2026)
• 05ScanHue: Complementary vs Analogous vs Triadic: Color Harmony BasicsLas armonías como ángulos de la rueda HSL: complementario 180°, análogo ±30°, triádico 120°, complementario dividido 150° y 210°, y en qué se diferencia la rueda RYB del pintor (15 de julio de 2026)
• 06NIST: Hue (H) — Munsell color systemTonos principales R, Y, G, B, P y tonos intermedios YR, GY, BG, PB, RP (ASTM E1732)
• 07BEHR: The 60-30-10 RulePauta de interiorismo muy usada: 60 % color principal, 30 % secundario, 10 % de acento (20 de mayo de 2025)
• 08ScanHue: The 60-30-10 Rule: Balance Any Color PaletteCómo llevar el 60-30-10 a la pantalla (fondo, tarjetas, botones); el acento del 10 % también debe cumplir el contraste WCAG (29 de julio de 2026)

Preguntas frecuentes

Herramientas complementarias