# Esquema de color tetrádico: cuatro colores en equilibrio [Canonical HTML page](https://gradiently.design/es/guide/tetradic-colors) Cuatro colores es la armonía clásica más rica y la más fácil de estropear. El secreto no es elegir los cuatro tonos, que es aritmética, sino decidir cuál manda. ## The short version - Un esquema de color tetrádico usa cuatro tonos dispuestos como dos parejas complementarias en el círculo cromático. - La versión en rectángulo une dos tonos a 60 grados con sus dos opuestos; la versión en cuadrado reparte los cuatro tonos a 90 grados entre sí. - Las paletas tetrádicas son ricas y variadas pero difíciles de equilibrar, porque cuatro tonos compiten por la atención. - El esquema funciona cuando un color domina, un segundo apoya y los otros dos se usan como acentos pequeños. - Apagar u oscurecer algunos de los cuatro tonos hace que una paleta tetrádica se sienta sofisticada y no estridente. Un **esquema de color tetrádico** son cuatro tonos que forman dos parejas complementarias en el círculo cromático. Si los unes con líneas, dibujas un rectángulo o un cuadrado, y por eso las dos versiones se llaman esquema en rectángulo y esquema en cuadrado. Como contiene colores cálidos y fríos a ambos lados del círculo, una paleta tetrádica es la más completa de las armonías clásicas. También es la que más probablemente se vea caótica, a menos que dejes que un color lidere y mantengas a los otros tres en su sitio. ## Esquemas tetrádicos en rectángulo y en cuadrado Ambas versiones parten de un tono base y suman su complementario, a 180 grados. Se diferencian en dónde se sitúa la segunda pareja. | Versión | Tonos desde la base | Carácter | | --- | --- | --- | | Rectángulo, o complementario doble | 0, 60, 180 y 240 grados | Dos vecinos cercanos y sus opuestos; más fácil de equilibrar | | Cuadrado | 0, 90, 180 y 270 grados | Espaciado perfectamente uniforme; el más variado y el más atrevido | Los esquemas en rectángulo tienen una pareja natural de aliados a cada lado, por eso los diseñadores suelen empezar por ahí. - Cobalto: #1b3c7e - Amatista: #9d59c0 - Caléndula: #f0b642 - Helecho: #7dba5e Un esquema en rectángulo: cobalto y amatista, a 60 grados, frente a caléndula y helecho. - Violeta intenso: #452277 - Rojo coral: #e25a66 - Hoja de lima: #95c059 - Verde azulado marino: #2e9e95 Un esquema en cuadrado: cuatro tonos a 90 grados, con el violeta oscurecido para que pueda hacer de fondo. ## Cómo construir un esquema de color tetrádico 1. **Elige el tono base** Escoge el color del que depende tu marca o tu diseño. Anota su tono en grados, que te dará cualquier selector de color que muestre HSL. 2. **Añade el complementario** Suma 180 grados. Esa pareja es la columna vertebral del esquema. [Los colores complementarios](https://gradiently.design/es/guide/complementary-colors) explica por qué funcionan los opuestos. 3. **Elige rectángulo o cuadrado** Para un rectángulo, suma 60 grados a la base y al complementario. Para un cuadrado, suma 90 grados a cada uno. 4. **Dale una tarea a cada color** Uno dominante, uno de apoyo, dos acentos. Anótalo para que los papeles se mantengan en todos los diseños. 5. **Ajusta luminosidad y saturación** Oscurece el color dominante, suaviza el de apoyo y deja los acentos más vivos. El tono fija la armonía; la luminosidad fija la jerarquía. ```css :root { --h: 220; /* base hue */ /* Rectangle scheme */ --c1: hsl(var(--h) 65% 30%); --c2: hsl(calc(var(--h) + 60) 45% 55%); --c3: hsl(calc(var(--h) + 180) 85% 60%); --c4: hsl(calc(var(--h) + 240) 40% 55%); /* For a square scheme use +90, +180 and +270 instead */ } ``` La paleta en rectángulo de arriba, generada a partir de un solo número. El tono HSL da la vuelta pasados los 360 por sí solo, así que nunca hace falta restar. ## Por qué cuatro colores son difíciles de equilibrar Con dos colores, el contraste es simple. Con cuatro tonos fuertes, la mirada no sabe adónde ir primero, y cada color parece gritar más que los demás. La mayoría de los diseños tetrádicos que fallan lo hacen porque los cuatro colores reciben más o menos la misma superficie y la misma saturación. La solución es la jerarquía, no menos colores. Publicación vertical de evento para un fin de semana de estudios abiertos con un color de fondo dominante y pequeños acentos Un color lidera el fondo y los otros aparecen en sitios pequeños: contenido movido, diseño calmado. Publicación vertical de lista de la misma serie, liderada por un segundo color del esquema de cuatro colores Una publicación compañera donde un segundo color del conjunto toma el mando, para que la serie se sienta relacionada pero no repetitiva. Esa segunda imagen apunta a la verdadera fortaleza del esquema. Cuatro colores dan variedad suficiente para una serie entera: cada publicación puede estar liderada por un miembro distinto de la paleta y el conjunto sigue perteneciendo claramente a la misma familia. Es ideal para carruseles, cartas y programas de eventos, donde la [coherencia de marca](https://gradiently.design/es/guide/brand-consistency) importa pero la uniformidad aburre. ## Dónde funciona mejor un esquema de color tetrádico Cuatro tonos se ganan su lugar cuando un proyecto necesita separar con claridad varias cosas sin inventar colores nuevos cada vez. Un solo cartel rara vez lo necesita. Un sistema normalmente sí. - **Codificación por categorías:** una carta de cafetería con bebidas, desayuno, comida y pasteles, cada uno con su color. - **Programas de eventos:** cuatro escenarios, itinerarios o días que los visitantes necesitan distinguir de un vistazo. - **Gráficos y paneles:** cuatro series de datos que deben seguir siendo distintas, idealmente [revisadas para el daltonismo](https://gradiently.design/es/guide/color-blindness-design) también. - **Marcas infantiles y de juego:** donde la versión completa y viva de la paleta es justo el objetivo. - **Campañas de temporada:** un tono liderando cada trimestre del año, con los demás de apoyo. Para las proporciones, empieza por la [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule) y reparte el diez por ciento final entre los dos acentos. En una carta, por ejemplo, el color dominante llena la página, el de apoyo marca los títulos y los dos acentos etiquetan los platos vegetarianos y las novedades. ## Cómo hacer que una paleta tetrádica parezca sofisticada Las paletas tetrádicas a plena saturación parecen una caja de juguetes, lo cual es perfecto para una juguetería y erróneo para casi todo lo demás. Lleva dos o tres de los colores hacia el gris o hacia lo oscuro, y los mismos tonos se ven meditados y adultos. - Azul pizarra: #24324c - Brezo: #a085ad - Trigo: #dfc590 - Salvia: #85a375 - Lino: #f6f2ea El esquema en rectángulo cobalto apagado: los mismos tonos, ahora lo bastante silenciosos para un hotel, una librería o una boda. - De cobalto a amatista: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)` - De caléndula a helecho: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)` - Brezo sobre pizarra: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)` En un esquema en rectángulo, mezcla cada pareja de 60 grados consigo misma. Mezclar hacia un opuesto cruza el gris; mira los [degradados fangosos](https://gradiently.design/es/guide/muddy-gradients). ### Evita - Cuatro tonos con la misma superficie y el mismo brillo - Texto en un tono vivo sobre otro - Un degradado que pase por los cuatro - Añadir un quinto tono para arreglar el equilibrio ### Haz - Un color dominante, más o menos el 60 por ciento de la superficie - Un neutro para el texto y el espacio - Dos tonos apagados, dos más vivos - Rota el color líder a lo largo de una serie Si cuatro colores te parecen demasiados, retrocede a tres con [los colores triádicos](https://gradiently.design/es/guide/triadic-colors) o [los colores complementarios divididos](https://gradiently.design/es/guide/split-complementary-colors), que mantienen un contraste fuerte con un tono menos que gestionar. Luego prueba la paleta en diseños reales: en Gradiently, los colores guardados en un kit de marca (una función Pro) aparecen primero en cada selector de color del Studio, así que cada publicación de una serie puede tomar un líder distinto. ## FAQ ### ¿Qué es un esquema de color tetrádico? Una paleta de cuatro tonos formada por dos parejas complementarias en el círculo cromático, que dibujan un rectángulo o un cuadrado. ### ¿Cuál es la diferencia entre los esquemas de color en rectángulo y en cuadrado? Un esquema en rectángulo usa tonos a 0, 60, 180 y 240 grados; uno en cuadrado los reparte uniformemente a intervalos de 90 grados. Los rectángulos suelen ser más fáciles de equilibrar. ### ¿Tetrádico es lo mismo que complementario doble? El esquema tetrádico en rectángulo suele llamarse complementario doble, porque son dos parejas complementarias situadas muy cerca. ### ¿Cuál es un ejemplo de esquema de color tetrádico? Cobalto `#1B3C7E`, amatista `#9D59C0`, caléndula `#F0B642` y helecho `#7DBA5E` forman un esquema en rectángulo: cobalto y amatista están a 60 grados, frente a caléndula y helecho. ### ¿Cómo se equilibra una paleta de cuatro colores? Deja que un color domine, dale a otro un papel de apoyo y deja los otros dos como acentos pequeños. Apaga u oscurece algunos tonos y añade un neutro para el texto.