# Cores análogas: o caminho mais fácil para uma paleta calma [Canonical HTML page](https://gradiently.design/pt-br/guide/analogous-colors) Escolha três vizinhas no círculo cromático e é quase impossível errar. A habilidade está em dar a elas contraste suficiente para continuarem interessantes e em saber quando quebrar a calma. ## The short version - Cores análogas são matizes que ficam lado a lado no círculo cromático, como azul, verde-azulado e verde. - Como matizes vizinhos têm muito em comum, as paletas análogas parecem calmas e naturais, e são as mais fáceis de acertar. - Cores análogas fazem os gradientes mais suaves, porque a mistura entre vizinhas continua saturada, em vez de virar cinza. - O principal risco é a mesmice, que você evita dando à paleta uma ampla variação de luminosidade. - Um pequeno destaque do lado oposto do círculo dá à paleta análoga um ponto focal sem quebrar a calma. **Cores análogas** são matizes que ficam lado a lado no círculo cromático: azul, verde-azulado e verde, ou vermelho, laranja e amarelo. Como cada uma divide um pouco de si com a vizinha, elas parecem pertencer ao mesmo conjunto, como as cores de um pôr do sol ou de um mar raso. Uma paleta análoga costuma ter de três a cinco matizes num pequeno arco do círculo, e é o caminho mais confiável para um visual calmo e unificado. Este guia mostra como montar uma, como evitar que ela fique chapada e por que as cores análogas fazem os melhores gradientes. Se o círculo é novidade para você, leia antes [como usar o círculo cromático](https://gradiently.design/pt-br/guide/color-wheel). ## O que torna as cores análogas Não existe um corte rígido, mas um guia útil é que matizes análogos cabem em cerca de um quarto do círculo, aproximadamente 90 graus de matiz. Um arco fechado de 30 graus parece quase monocromático. Acima de 90 graus, as pontas começam a contrastar e a paleta passa a parecer parte de um arco-íris. | Extensão no círculo | Exemplo | Sensação | | --- | --- | --- | | Cerca de 30 graus | Azul, azul-índigo | Quase uma cor só, muito silenciosa | | Cerca de 60 graus | Azul, azul-céu, verde-azulado | Harmoniosa, com variedade suave | | Cerca de 90 graus | Índigo, azul, azul-céu, verde-azulado | Rica, ainda unificada | | Mais de 120 graus | Do violeta ao verde | Começa a parecer um arco-íris | Como a largura do arco muda o caráter de uma paleta análoga. - Índigo: #4f46e5 - Azul: #2563eb - Céu: #0284c7 - Verde-azulado: #0d9488 Quatro vizinhas num arco de cerca de 70 graus, do índigo até o verde-azulado. ## Paletas de cores análogas, com códigos A forma mais fácil de ver as cores análogas é como gradientes, porque é ali que elas brilham. Cada um destes percorre matizes vizinhos e vai ficando mais claro, o que evita que pareça chapado. - Brasa: ferrugem, laranja, âmbar: `linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #fbbf24 100%)` - Lagoa: marinho, turquesa, menta: `linear-gradient(135deg, #1e3a8a 0%, #0e7490 50%, #34d399 100%)` - Frutas vermelhas: violeta, magenta, rosa: `linear-gradient(135deg, #4c1d95 0%, #a21caf 50%, #f472b6 100%)` - Samambaia: floresta, oliva, lima: `linear-gradient(135deg, #14532d 0%, #3f6212 50%, #a3e635 100%)` - Anoitecer: tinta, índigo, pervinca: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #818cf8 100%)` - Cítrico: verde, dourado, laranja: `linear-gradient(135deg, #4d7c0f 0%, #ca8a04 50%, #f97316 100%)` Seis gradientes análogos. Cada um cobre um arco curto de matiz e uma longa faixa de luminosidade. Repare que as paletas quentes (Brasa, Frutas vermelhas, Cítrico) e as frias (Lagoa, Samambaia, Anoitecer) ficam, cada uma, numa única temperatura. É daí que vem quase toda a calma delas. Paletas análogas quentes parecem próximas, animadas e apetitosas, o que combina com comida, hospitalidade e eventos. As frias parecem espaçosas e estáveis, o que combina com bem-estar, finanças e tecnologia. O guia de [cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) aprofunda a temperatura. Muitas das melhores paletas análogas vêm direto da natureza, porque a luz que atravessa o ar, a água ou as folhas muda aos poucos por matizes vizinhos. Uma foto de uma orla, do chão de uma floresta ou de um céu de fim de tarde é uma fonte pronta; [tirar uma paleta de uma imagem](https://gradiently.design/pt-br/guide/color-palette-from-image) mostra como coletar uma sem escolher cores sujas. ## Por que as cores análogas fazem os gradientes mais suaves Quando um gradiente mistura duas cores, cada ponto intermediário é uma mistura delas. Misture duas vizinhas e a mistura é simplesmente o matiz entre elas, ainda saturado. Misture duas opostas e a mistura se anula rumo ao cinza. É por isso que os [gradientes complementares](https://gradiently.design/pt-br/guide/complementary-colors) precisam de uma parada de ajuda no meio e os análogos nunca precisam. - Vizinhas: azul para verde-azulado: `linear-gradient(90deg, #2563eb 0%, #0d9488 100%)` - Opostas: azul para laranja: `linear-gradient(90deg, #2563eb 0%, #ea580c 100%)` O primeiro se mantém limpo de ponta a ponta. O segundo passa por um meio opaco e acinzentado. Isso faz das misturas análogas uma escolha segura para fundos atrás de texto, campos de marca e superfícies grandes. Para saber mais sobre o meio opaco, veja os [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients). ## Como montar uma paleta de cores análogas 1. **Escolha um matiz dominante** Comece pela cor que mais importa. Ela vai cobrir a maior parte do design. 2. **Acrescente uma ou duas vizinhas de cada lado** Fique dentro de 60 a 90 graus. Inclinar-se para um lado dá direção à paleta: rumo ao quente ou rumo ao frio. 3. **Distribua a luminosidade** Faça uma cor profunda e uma clara. É isso que impede uma paleta análoga de parecer uma cor só borrada. 4. **Varie a saturação** Suavize um pouco as cores de apoio para que a dominante se destaque como líder. 5. **Decida sobre um destaque** Se o design precisa de um ponto focal, acrescente um pouco de uma cor do lado oposto do círculo. ## Acrescentando um destaque a uma paleta análoga A calma de uma paleta análoga é também a sua fraqueza: nada se destaca. Quando você precisa que um botão, um preço ou uma palavra-chave seja visto, pegue emprestada uma cor do outro lado do círculo e use muito pouco dela. Designers às vezes chamam isso de análoga com destaque. O destaque funciona justamente porque todo o resto combina. - Azul-marinho profundo: #0c1a3a - Azul: #1d4ed8 - Verde-azulado: #0e7490 - Menta pálido: #99f6e4 - Destaque: damasco: #fb923c Uma família análoga fria, do azul-marinho à menta, com um destaque quente do lado oposto. Um post de anúncio de produto em retrato, com um título sobre um fundo calmo e mesclado Campos análogos sustentam o texto com calma, o que combina com posts de produto e editoriais. ## Erros comuns em paletas de cores análogas ### Evite - Todas as cores com a mesma luminosidade - Um arco tão largo que vira um arco-íris - Misturar uma inclinação quente e uma fria sem um plano - Texto num tom médio da paleta ### Faça - Uma cor profunda, uma média e uma clara - De três a cinco matizes dentro de cerca de 90 graus - Uma temperatura clara - Texto na cor mais escura ou mais clara Se você quer ainda mais unidade, feche o arco num único matiz e você tem uma [paleta monocromática](https://gradiently.design/pt-br/guide/monochromatic-color-scheme). Se quer mais energia, passe para uma [paleta triádica](https://gradiently.design/pt-br/guide/triadic-colors). ## FAQ ### O que são cores análogas? Cores análogas são matizes lado a lado no círculo cromático, como azul, verde-azulado e verde, ou vermelho, laranja e amarelo. ### Quantas cores tem um esquema análogo? Em geral de três a cinco matizes dentro de cerca de um quarto do círculo cromático, com um dominante e os demais de apoio. ### Por que as cores análogas ficam boas em gradientes? A mistura entre dois matizes vizinhos é simplesmente o matiz entre eles, então a transição se mantém saturada e nunca vira cinza no meio. ### Como evito que uma paleta análoga fique chapada? Dê a ela uma ampla variação de luminosidade, varie um pouco a saturação e, se preciso, acrescente um pequeno destaque do lado oposto do círculo.