# Colores triádicos y paletas complementarias divididas, explicados [Canonical HTML page](https://gradiently.design/es/guide/triadic-colors) Tres colores repartidos por igual pueden hacer que una paleta se sienta atrevida y equilibrada a la vez, o como una caja de juguetes. La diferencia está casi por completo en qué color manda. ## The short version - Los colores triádicos son tres tonos repartidos por igual en la rueda de color, separados por un tercio del círculo, como el rojo, el amarillo y el azul en la rueda del pintor. - Una paleta triádica funciona cuando un color domina, un segundo acompaña y el tercero se usa como un pequeño acento. - Apagar dos de los tres colores es la forma más rápida de que una paleta triádica parezca adulta. - Una paleta complementaria dividida usa un tono más los dos tonos que flanquean a su opuesto, lo que da un contraste fuerte con menos tensión. - Los colores triádicos suelen funcionar mejor como zonas separadas que mezclados en un único degradado. Los **colores triádicos** son tres tonos repartidos por igual en la rueda de color, cada uno a un tercio del círculo de los otros. En la rueda del pintor, el rojo, el amarillo y el azul forman una tríada, igual que el naranja, el verde y el violeta. Como los tres están igual de lejos entre sí, ninguno se impone a los demás solo por su posición, y por eso las paletas triádicas se sienten vivas y equilibradas. También por eso es fácil pasarse con ellas. Esta guía trata las tríadas, la regla que evita que parezcan una caja de juguetes y el esquema complementario dividido, un pariente cercano más fácil de controlar. La guía de la [rueda de color](https://gradiently.design/es/guide/color-wheel) explica los dos tipos de rueda que se mencionan más abajo. ## Esquemas de color triádicos en la rueda | Tríada | Rueda | Carácter | | --- | --- | --- | | Rojo, amarillo, azul | Del pintor (primarios) | Atrevido, gráfico, familiar | | Naranja, verde, violeta | Del pintor (secundarios) | Terroso, inusual, rico | | Rojo anaranjado, verde amarillento, azul violáceo | Del pintor (terciarios) | Moderno, menos esperado | | Rojo, verde, azul | De pantalla (RGB) | Técnico, estridente a plena intensidad | | Cian, magenta, amarillo | De pantalla (RGB) | De imprenta, juguetón | Tríadas habituales. Gira el triángulo a cualquier punto de la rueda para obtener más. - Marino (azul): #1e3a8a - Mostaza (amarillo): #d4a017 - Ladrillo (rojo): #b91c1c - Oliva (verde): #4d7c0f - Ciruela (violeta): #6b21a8 - Naranja tostado: #c2410c La tríada primaria y la secundaria, cada una oscurecida desde la saturación máxima para que convivan con más facilidad. ## La regla del dominio: un color manda Tres colores vivos en cantidades iguales compiten por la atención y resultan infantiles. La solución es jerarquizarlos. Un color cubre la mayor parte del diseño, un segundo acompaña y el tercero aparece solo donde quieres que se pose la mirada. Un reparto de 60, 30 y 10 es un buen punto de partida, como en la [regla 60-30-10](https://gradiently.design/es/guide/60-30-10-rule). - Tercios iguales: compiten: `linear-gradient(90deg, #b91c1c 0% 33.3%, #d4a017 33.3% 66.6%, #1e3a8a 66.6% 100%)` - 60, 30, 10: manda el marino: `linear-gradient(90deg, #1e3a8a 0% 60%, #d4a017 60% 90%, #b91c1c 90% 100%)` - 60, 30, 10: manda el oliva: `linear-gradient(90deg, #4d7c0f 0% 60%, #6b21a8 60% 90%, #c2410c 90% 100%)` El mismo tipo de tríada en proporciones distintas. Jerarquizar los colores convierte el ruido en una paleta. ¿Qué color debe mandar? Normalmente el más oscuro o el menos saturado, porque las superficies grandes de un color vivo cansan. Guarda el más vivo para el acento. Si el color de tu marca forma parte de la tríada, suele ser el líder evidente. ## Cómo apagar una tríada La segunda herramienta es la saturación. Mantén un color intenso y lleva los otros dos hacia el gris, más oscuros o más claros. La estructura de la tríada se conserva, así que la paleta sigue sintiéndose equilibrada, pero pierde el brillo de colegio. Muchas paletas editoriales y clásicas son tríadas disfrazadas: marino, ocre y ladrillo, u oliva, ciruela y óxido. - Marino tinta: #1f2a44 - Avena: #e9dcc3 - Ocre: #b98b2e - Ladrillo: #9b3d33 Una tríada primaria apagada con un neutro cálido. Se lee como editorial más que como juguetona. ## Dónde funcionan las paletas triádicas Las tríadas encajan con marcas y proyectos que quieren sentirse enérgicos, inclusivos o juguetones sin parecer aleatorios: educación infantil, videojuegos, festivales, comida y proyectos comunitarios. También son útiles en sistemas que necesitan tres categorías claramente separadas, como tres líneas de producto, tres niveles de curso o tres tipos de evento, porque cada color está lo más lejos posible de los otros dos. - **Tres categorías:** da a cada una su propio color de la tríada y mantén idénticas las composiciones, para que el color haga la clasificación. - **Una marca, un líder:** usa el color principal en todas partes y trae los otros dos para ilustraciones, gráficos y destacados. - **Pósteres y packaging:** una tríada apagada sobre un neutro cálido da un aire impreso de mediados de siglo. Planifica los colores para tinta; mira [imprimir degradados](https://gradiently.design/es/guide/print-gradients). - **Interfaces:** reserva la tríada para estados e ilustraciones y deja que los neutros sostengan las pantallas, o cada página se sentirá estridente. ## Colores complementarios divididos Un esquema complementario dividido parte de un tono y, en lugar de su opuesto directo, usa los dos tonos que flanquean a ese opuesto. Conservas casi todo el contraste de un [par complementario](https://gradiently.design/es/guide/complementary-colors) pero pierdes el choque frontal, y ganas un tercer color con el que trabajar. Es uno de los esquemas más indulgentes para quien empieza. - Base: violeta: #5b21b6 - División: lima: #a3e635 - División: ámbar: #f59e0b - Neutro: blanco lila: #f5f3ff El opuesto del violeta en la rueda del pintor es el amarillo. La división usa los colores que lo flanquean, lima y ámbar. - **Color base:** el líder, usado en la mayor parte del diseño. - **Primer color dividido:** de apoyo, en zonas más pequeñas o en una versión más tranquila. - **Segundo color dividido:** el acento, usado con moderación. - **Neutro:** un casi blanco o casi negro para mantenerlo todo unido. ## Colores triádicos en degradados Mezclar los tres colores de una tríada en un solo degradado obliga a la transición a pasar por todos los tonos intermedios, y al menos un tramo suele volverse apagado. Las tríadas funcionan mejor como zonas separadas, o como un degradado de dos colores con el tercero reservado como acento. - Los tres mezclados: segunda mitad turbia: `linear-gradient(90deg, #b91c1c 0%, #d4a017 50%, #1e3a8a 100%)` - Marino a ladrillo, pasando por ciruela: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 55%, #b91c1c 100%)` - Mostaza como acento de borde nítido: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 50%, #b91c1c 86%, #d4a017 86%, #d4a017 100%)` Dos colores de la tríada se mezclan; el tercero queda aparte. La mitad del primer ejemplo que va del amarillo al azul muestra por qué. ## Errores con paletas triádicas ### Evita - Tres colores saturados en cantidades iguales - Texto en el color de acento - Los tres mezclados en un solo degradado - Ningún neutro donde descanse la vista ### Haz - Un líder, un apoyo, un acento - Texto en un neutro con contraste fuerte - Zonas separadas, o dos mezclados más un acento - Un casi blanco o casi negro al lado Si una tríada sigue pareciendo demasiado estridente, baja a una [paleta análoga](https://gradiently.design/es/guide/analogous-colors), donde los colores son vecinos en lugar de opuestos. ## FAQ ### ¿Qué son los colores triádicos? Los colores triádicos son tres tonos repartidos por igual en la rueda de color, cada uno separado por un tercio del círculo, como el rojo, el amarillo y el azul en la rueda del pintor. ### ¿Cómo se usa un esquema de color triádico? Deja que un color domine, que un segundo acompañe y que el tercero actúe como un pequeño acento. Apagar dos de los tres hace que la paleta sea más fácil de llevar. ### ¿Qué es un esquema de color complementario dividido? Un tono base más los dos tonos que flanquean a su complementario. Mantiene un contraste fuerte con menos tensión que un par complementario directo. ### ¿En qué se diferencian los colores triádicos y los complementarios? Los complementarios usan dos tonos opuestos; los triádicos usan tres tonos repartidos por igual en la rueda. Las tríadas son más variadas y suelen tener algo menos de tensión.