Armonía de colores: 6 esquemas para combinar colores
La armonía de colores es la forma de elegir colores que funcionan juntos según su posición en el círculo cromático. Hay seis esquemas clásicos: complementario (dos colores opuestos, a 180°), análogo (vecinos, a unos 30° entre sí), tríada (tres colores a 120°), tetrádico (rectángulo o cuadrado, cuatro colores), complementario dividido (el color base más los dos vecinos de su opuesto, a 150° y 210°) y monocromático (un solo tono en varias luminosidades).
Estos esquemas no garantizan por sí solos una paleta de colores bonita, pero te dan un punto de partida coherente. Lo que convierte la geometría en un buen resultado son las proporciones (como la regla 60-30-10), los ajustes de saturación y luminosidad y la comprobación del contraste. En esta guía verás cada esquema con ejemplos en HEX, cuándo usarlo y cómo evitar los errores más habituales.
Cómo el círculo cromático define las armonías
Todas las armonías son relaciones de ángulo. En el modelo HSL, el tono (hue) se mide en grados de 0° a 360°: 0° es rojo, 120° es verde y 240° es azul. Si sumas o restas grados al tono de un color, obtienes sus compañeros de armonía. Si tu color base tiene un tono de 205°, su complementario queda en 205 + 180 = 385, es decir, 25° (siempre restas 360 cuando das la vuelta completa).
Para que los ejemplos de esta guía sean comparables, todos parten del mismo color base: #2280C3, que equivale a hsl(205 70% 45%), un azul medio. Los demás colores de cada esquema mantienen la misma saturación (70%) y luminosidad (45%) y solo cambian el tono.
Círculo RGB/HSL frente a círculo RYB
Hay un detalle que confunde a mucha gente: no existe un único círculo cromático. Las herramientas digitales usan el círculo RGB/HSL, basado en los colores primarios de la luz (rojo, verde y azul). El círculo RYB (rojo, amarillo y azul) es el tradicional de las bellas artes y de las clases de pintura. Como reparten los tonos de manera distinta, los complementarios también cambian:
- En el círculo RYB, el azul es complementario del naranja, el rojo del verde y el amarillo del morado.
- En el círculo RGB/HSL, el azul es complementario del amarillo, el rojo del cian y el verde del magenta.
Ninguno está “mal”: son modelos pensados para fines distintos. Los ángulos de esta guía usan el círculo HSL, porque es el que manejas en CSS, en Figma y en el generador de paletas. Por eso el complementario de nuestro azul resulta un naranja tostado (25°) y no el naranja “de pintor” que quizá esperabas. Si quieres profundizar en la diferencia entre ambos modelos, consulta la guía de teoría del color y círculo cromático.
Los 6 esquemas lado a lado
La tabla resume la geometría de cada armonía, cuántos colores genera, el nivel de contraste de tono que produce y dónde suele funcionar mejor.
| Esquema | Ángulos desde el color base | Colores | Contraste de tono | Mejor uso |
|---|---|---|---|---|
| Complementario | 0° y 180° | 2 | Máximo | Llamadas a la acción, deportes, señalización |
| Análogo | 0°, −30° y +30° | 3 | Bajo | Fondos, ilustración, marcas serenas, fotografía |
| Tríada | 0°, 120° y 240° | 3 | Alto | Marcas lúdicas, contenido infantil, infografías |
| Complementario dividido | 0°, 150° y 210° | 3 | Alto, más suave que el complementario | Interfaces que necesitan destacar sin resultar agresivas |
| Tetrádico (rectángulo/cuadrado) | 0°, 60°, 180° y 240° / 0°, 90°, 180° y 270° | 4 | Muy alto | Sistemas con varias categorías, dashboards, videojuegos |
| Monocromático | 0° (solo cambian la luminosidad y la saturación) | 3 a 6 | Ninguno (solo de luminosidad) | Interfaces sobrias, marcas minimalistas, estados de UI |
Complementario y complementario dividido
Complementario (180°)
Dos colores diametralmente opuestos en el círculo. Con nuestro color base, la pareja es #2280C3 (205°) y #C36522 (25°). Colocados uno junto al otro, los colores complementarios se intensifican mutuamente, un efecto que el químico Michel-Eugène Chevreul describió en el siglo XIX como contraste simultáneo. Por eso este esquema llama tanto la atención.
Usa el complementario como acento, no como un reparto a partes iguales. Una página mitad azul y mitad naranja cansa la vista y pierde jerarquía. Funciona mucho mejor un diseño mayoritariamente azul (y neutro) con botones o etiquetas en naranja.
Cuidado: una diferencia de tono no es una diferencia de luminosidad. En el ejemplo, #2280C3 y #C36522 tienen exactamente la misma luminosidad HSL, y la relación de contraste WCAG entre ellos es de apenas 1,05:1. Un texto naranja sobre ese fondo azul es prácticamente ilegible para personas con baja visión o daltonismo.
Complementario dividido (150° y 210°)
En lugar del opuesto exacto, usas los dos colores que lo rodean. Con la base en 205°, los compañeros quedan en 355° y 55°: #2280C3, #C32230 (un rojo) y #C3B622 (un amarillo mostaza). Conservas el contraste vibrante del complementario, pero con más matices y menos tensión. Es una muy buena opción si estás empezando, porque tolera bien las proporciones desiguales.
Análogo y monocromático
Análogo (±30°)
Colores vecinos en el círculo, normalmente a 30° entre sí. A partir de la base: #22C3B6 (175°, un verde agua), #2280C3 (205°) y #2230C3 (235°, un azul añil). La paleta análoga es la más “natural” de todas, porque recuerda lo que vemos en los paisajes: el mar que pasa del verde al azul o un atardecer que va del amarillo al rojo.
El riesgo es la falta de foco. Como los tonos se parecen, nada destaca. Elige uno de los tres como dominante, usa otro como apoyo y reserva el tercero, o un neutro muy oscuro, para textos y acentos. Los colores análogos también generan degradados excelentes, porque la transición entre tonos cercanos no pasa por grises apagados; pruébalo en el generador de degradados.
Monocromático
Un solo tono en distintas luminosidades (y, si quieres, saturaciones). Si mantienes el tono en 205° y la saturación en 70% y varías la luminosidad del 20% al 90%, obtienes: #0F3957, #175582, #2280C3, #52A5E0, #93C7EC y #D4E8F7.
Es el esquema más seguro para interfaces: es casi imposible equivocarse con la combinación, y la jerarquía surge de la diferencia de luminosidad, que es justo lo que importa para la legibilidad. Por ejemplo, #0F3957 sobre #D4E8F7 tiene una relación de contraste de aproximadamente 9,6:1. La desventaja es la monotonía; muchas marcas la resuelven con un único color de acento fuera del tono principal.
Tríada, rectángulo y cuadrado
Tríada (120°)
Tres colores distribuidos a la misma distancia en el círculo. Con la base en 205°: #2280C3, #C32280 (325°, un magenta) y #80C322 (85°, un verde lima). La tríada es vibrante y equilibrada a la vez. Con saturación alta recuerda a juguetes y dibujos animados; con los colores secundarios desaturados o más claros, resulta mucho más elegante.
Tetrádico rectangular (0°, 60°, 180° y 240°)
Dos parejas complementarias que forman un rectángulo en el círculo: #2280C3 (205°), #6522C3 (265°), #C36522 (25°) y #80C322 (85°). Ofrece mucha variedad, algo útil cuando necesitas distinguir categorías, como cuatro tipos de datos en un dashboard.
Cuadrado (0°, 90°, 180° y 270°)
Cuatro colores equidistantes: #2280C3 (205°), #B622C3 (295°), #C36522 (25°) y #30C322 (115°). Es el esquema con mayor contraste de tono y también el más difícil de equilibrar.
En los esquemas de cuatro colores, la regla de oro es: un color manda y los demás acompañan. Elige un dominante, reduce la saturación o cambia la luminosidad de los otros y úsalos en áreas pequeñas. Cuatro colores saturados en proporciones iguales casi siempre acaban en ruido visual.
Proporciones: la regla 60-30-10
Elegir los colores es solo la mitad del trabajo; la otra mitad es decidir cuánto aparece cada uno. La regla 60-30-10, heredada del interiorismo, es un atajo práctico:
- 60% para el color dominante, normalmente un neutro o una versión muy clara u oscura del color principal (fondos, grandes superficies).
- 30% para el color secundario (cabeceras, tarjetas, bloques de sección, ilustraciones).
- 10% para el color de acento (botones, enlaces, iconos de alerta, precios).
Aplicado al esquema complementario del ejemplo en una web: 60% de #D4E8F7 y blanco en los fondos, 30% de #175582 en la cabecera, el pie de página y los títulos, y 10% de #C36522 en los botones de compra. El naranja destaca precisamente porque escasea en la página. Las cifras no son sagradas (70-20-10 o 60-35-5 también funcionan); lo importante es que dos colores no compitan por el protagonismo. La guía sobre cómo elegir la paleta de colores de una web explica cómo convertir esto en tokens de CSS.
Ajustes finos, contraste y accesibilidad
Varía la saturación y la luminosidad
Los ejemplos anteriores usan la misma saturación y luminosidad en todos los colores para que la geometría se vea clara, pero las paletas reales casi nunca son así. Algunas técnicas que hacen que una armonía “matemática” parezca profesional:
- Crea una escala para cada color: una versión oscura para texto, una media para elementos gráficos y una muy clara para fondos.
- Desatura los colores de apoyo y deja la saturación máxima solo para el acento.
- Compensa la luminosidad percibida: con el mismo valor de L en HSL, los amarillos y verdes parecen mucho más claros que los azules y morados. Ajusta a ojo o usa espacios de color perceptuales, como OKLCH.
- Incluye neutros. Los grises ligeramente teñidos con el tono principal unifican la paleta sin competir con ella.
Comprueba el contraste
La armonía no garantiza la legibilidad. WCAG 2.2 exige una relación de contraste mínima de 4,5:1 para texto normal y de 3:1 para texto grande (nivel AA). El blanco sobre #2280C3 da unos 4,25:1, así que solo aprueba para texto grande; si oscureces el azul a #175582, sube a unos 7,9:1 y aprueba incluso el nivel AAA. Revisa cada pareja de texto y fondo con el comprobador de contraste y lee la guía de contraste y accesibilidad para entender los criterios.
Ten en cuenta el daltonismo
Alrededor del 8% de los hombres y del 0,5% de las mujeres de ascendencia europea tienen algún tipo de daltonismo, casi siempre con dificultad para distinguir el rojo del verde. Esquemas como la tríada o el cuadrado pueden poner esos tonos uno al lado del otro. Nunca uses el color como único medio para transmitir información: acompáñalo de etiquetas, iconos o patrones y prueba tu paleta en el simulador de daltonismo.
Resumen y próximos pasos
- Complementario para el máximo contraste, usando el color opuesto con moderación.
- Complementario dividido para contraste con menos tensión.
- Análogo para composiciones serenas y degradados suaves.
- Monocromático para interfaces sobrias y fáciles de mantener.
- Tríada y tetrádico para variedad, siempre con un color dominante.
- Reparte los colores en proporciones desiguales (60-30-10), ajusta saturación y luminosidad y comprueba el contraste.
Para ponerlo en práctica, genera estos esquemas automáticamente en el generador de paletas, captura el color base de una foto o un logotipo con el cuentagotas para imágenes y crea transiciones entre los colores elegidos en el generador de degradados. Si la paleta es para una marca, también vale la pena leer sobre psicología del color. Y si buscas inspiración en colores concretos, explora páginas como azul marino, terracota, verde azulado o todo el catálogo de colores.