# Esquema de cores tetrádico: quatro cores em equilíbrio [Canonical HTML page](https://gradiently.design/pt-br/guide/tetradic-colors) Quatro cores é a harmonia clássica mais rica e a mais fácil de errar. O segredo não é escolher os quatro matizes, que é aritmética, mas decidir qual deles manda. ## The short version - Um esquema de cores tetrádico usa quatro matizes dispostos como dois pares complementares no círculo cromático. - A versão retângulo une dois matizes a 60 graus de distância com seus dois opostos; a versão quadrado espaça os quatro matizes a 90 graus. - Paletas tetrádicas são ricas e variadas, mas difíceis de equilibrar, porque quatro matizes disputam a atenção. - O esquema funciona quando uma cor domina, uma segunda apoia e as outras duas entram como pequenos acentos. - Suavizar ou escurecer alguns dos quatro matizes faz a paleta tetrádica parecer sofisticada em vez de berrante. Um **esquema de cores tetrádico** são quatro matizes que formam dois pares complementares no círculo cromático. Ligue-os com linhas e você desenha um retângulo ou um quadrado, e por isso as duas versões se chamam esquema retangular e esquema quadrado. Como reúne cores quentes e frias dos dois lados do círculo, a paleta tetrádica é a mais completa das harmonias clássicas. É também a que mais tende a parecer caótica, a menos que uma cor lidere e as outras três fiquem no seu lugar. ## Esquemas tetrádicos retangular e quadrado As duas versões partem de um matiz base e somam o complementar, a 180 graus. A diferença está em onde fica o segundo par. | Versão | Matizes a partir da base | Caráter | | --- | --- | --- | | Retângulo, ou complementar duplo | 0, 60, 180 e 240 graus | Dois vizinhos próximos e seus opostos; mais fácil de equilibrar | | Quadrado | 0, 90, 180 e 270 graus | Espaçamento perfeitamente igual; o mais variado e o mais ousado | Esquemas retangulares têm um par natural de aliados de cada lado, e por isso designers costumam começar por eles. - Cobalto: #1b3c7e - Ametista: #9d59c0 - Calêndula: #f0b642 - Samambaia: #7dba5e Um esquema retangular: cobalto e ametista, a 60 graus, em oposição a calêndula e samambaia. - Violeta profundo: #452277 - Vermelho coral: #e25a66 - Folha limão: #95c059 - Verde-azulado marinho: #2e9e95 Um esquema quadrado: quatro matizes a 90 graus, com o violeta escurecido para servir de fundo. ## Como montar um esquema de cores tetrádico 1. **Escolha o matiz base** Escolha a cor de que sua marca ou seu design depende. Anote o matiz em graus, que qualquer seletor de cor com HSL informa. 2. **Some o complementar** Some 180 graus. Esse par é a espinha dorsal do esquema. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explica por que os opostos funcionam. 3. **Escolha retângulo ou quadrado** Para um retângulo, some 60 graus à base e ao complementar. Para um quadrado, some 90 graus a cada um. 4. **Dê uma função a cada cor** Uma dominante, uma de apoio, dois acentos. Anote, para que os papéis sejam os mesmos em todos os designs. 5. **Ajuste luminosidade e saturação** Escureça a dominante, suavize a de apoio e deixe os acentos mais vivos. O matiz define a harmonia; a luminosidade define a hierarquia. ```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 */ } ``` A paleta retangular acima, gerada a partir de um número. O matiz HSL passa de 360 sozinho, então você nunca precisa subtrair. ## Por que quatro cores são difíceis de equilibrar Com duas cores, o contraste é simples. Com quatro matizes fortes, o olho não sabe onde olhar primeiro, e cada cor parece gritar mais alto que as outras. A maioria dos designs tetrádicos que falham dá a todas as quatro cores área e saturação quase iguais. A solução é hierarquia, não menos cores. Post vertical de evento para um fim de semana de ateliês abertos, com uma cor de fundo dominante e pequenos acentos Uma cor lidera o fundo e as outras aparecem em pontos pequenos: conteúdo movimentado, design calmo. Post vertical de lista da mesma série, liderado por uma segunda cor do esquema de quatro cores Um post companheiro em que uma segunda cor do conjunto assume a liderança, para que a série pareça relacionada sem se repetir. Essa segunda figura aponta a verdadeira força do esquema. Quatro cores dão variedade suficiente para uma série inteira: cada post pode ser liderado por um membro diferente da paleta e o conjunto ainda claramente se pertence. É ideal para carrosséis, cardápios e programações de eventos, onde a [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) importa, mas a mesmice cansa. ## Onde o esquema tetrádico funciona melhor Quatro matizes se justificam quando um projeto precisa separar várias coisas com clareza sem inventar cores novas a cada vez. Um único pôster raramente precisa disso. Um sistema costuma precisar. - **Codificação por categoria:** o cardápio de um café com bebidas, café da manhã, almoço e bolos, cada um com sua cor. - **Programações de eventos:** quatro palcos, trilhas ou dias que os visitantes precisam distinguir num relance. - **Gráficos e painéis:** quatro séries de dados que precisam continuar distintas, de preferência [testadas para daltonismo](https://gradiently.design/pt-br/guide/color-blindness-design) também. - **Marcas infantis e de brincar:** em que a versão cheia e vibrante da paleta é exatamente o objetivo. - **Campanhas sazonais:** um matiz liderando cada trimestre do ano, com os outros em apoio. Para as proporções, comece pela [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) e divida os dez por cento finais entre os dois acentos. Num cardápio, por exemplo, a cor dominante preenche a página, a de apoio marca os títulos e os dois acentos sinalizam os pratos vegetarianos e as novidades. ## Como deixar uma paleta tetrádica sofisticada Paletas tetrádicas com saturação total parecem uma caixa de brinquedos, o que é perfeito para uma loja de brinquedos e errado para a maioria das outras marcas. Puxe duas ou três cores para o cinza ou para o escuro, e os mesmos matizes parecem pensados e adultos. - Azul-ardósia: #24324c - Urze: #a085ad - Trigo: #dfc590 - Sálvia: #85a375 - Linho: #f6f2ea O esquema retangular cobalto suavizado: os mesmos matizes, agora discretos o bastante para um hotel, uma livraria ou um casamento. - Cobalto para ametista: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)` - Calêndula para samambaia: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)` - Urze sobre ardósia: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)` Num esquema retangular, misture cada par de 60 graus consigo mesmo. Misturar até um oposto atravessa o cinza; veja [gradientes enlameados](https://gradiently.design/pt-br/guide/muddy-gradients). ### Evite - Quatro matizes com a mesma área e o mesmo brilho - Texto num matiz vivo sobre outro - Um gradiente que passa pelos quatro - Acrescentar um quinto matiz para consertar o equilíbrio ### Faça - Uma cor dominante, cerca de 60 por cento da área - Um neutro para texto e respiro - Dois matizes suavizados, dois mais vivos - Alterne a cor líder ao longo de uma série Se quatro cores parecem demais, volte a três com [cores triádicas](https://gradiently.design/pt-br/guide/triadic-colors) ou [cores complementares divididas](https://gradiently.design/pt-br/guide/split-complementary-colors), que mantêm forte contraste com um matiz a menos para administrar. Depois teste a paleta em designs reais: no Gradiently, as cores salvas no kit de marca (um recurso Pro) aparecem primeiro em todo seletor de cor do Studio, e cada post de uma série pode assumir uma liderança diferente. ## FAQ ### O que é um esquema de cores tetrádico? Uma paleta de quatro matizes formada por dois pares complementares no círculo cromático, desenhando um retângulo ou um quadrado. ### Qual a diferença entre esquema retangular e quadrado? O esquema retangular usa matizes a 0, 60, 180 e 240 graus; o quadrado os espaça igualmente a intervalos de 90 graus. Retângulos costumam ser mais fáceis de equilibrar. ### Tetrádico é o mesmo que complementar duplo? O esquema tetrádico retangular costuma ser chamado de complementar duplo, porque são dois pares complementares próximos entre si. ### Qual é um exemplo de esquema de cores tetrádico? Cobalto `#1B3C7E`, ametista `#9D59C0`, calêndula `#F0B642` e samambaia `#7DBA5E` formam um esquema retangular: cobalto e ametista ficam a 60 graus, em oposição a calêndula e samambaia. ### Como equilibrar uma paleta de quatro cores? Deixe uma cor dominar, dê a outra um papel de apoio e mantenha as duas restantes como pequenos acentos. Suavize ou escureça alguns matizes e use um neutro para texto.