Softonic

Gerador de Cores Análogas

Etapa 1 de 3
Próximo

Escolha uma cor base e um ângulo de separação. A ferramenta mostra a cor base com um tom vizinho de cada lado no ângulo escolhido, o trio análogo clássico, e acrescenta dois tons externos no dobro desse ângulo para formar uma paleta mais ampla de cinco cores. As paletas análogas estão entre os esquemas clássicos mais harmoniosos porque seus tons próximos compartilham uma dominante; por isso são comuns na natureza (pôr do sol, florestas) e no design editorial.

Como construir uma paleta análoga

  1. 1

    Escolha a cor base

    Cole um código hex, triplo RGB ou valor HSL. Cores saturadas de tom médio oferecem os conjuntos análogos mais ricos.

  2. 2

    Escolha o ângulo de deslocamento

    30° é o espaçamento análogo clássico. 15° oferece um conjunto mais apertado, quase monocromático; 45° começa a se aproximar do complementar dividido.

  3. 3

    Ajuste a variação de claridade

    Opcionalmente, varie a claridade entre os três tons para evitar uma paleta plana. Clarear as duas extremidades cria uma sensação mais suave e editorial.

  4. 4

    Exporte as cores

    Copie hex, RGB ou HSL. Útil para variáveis CSS, estilos Figma ou folhas de especificações de impressão.

Esquemas de cores clássicos vs. análogos

Esquema Relação angular Característica
Monocromático 0° (mesmo tom, luminosidade/saturação diferentes) Calmo, unificado
Análogo 30° de cada lado Harmonioso, natural
Complementar 180° de distância Alto contraste, tensão
Complementar dividido Base + 2 tons flanqueando o complementar Contraste com nuance
Triádico 120° de distância Equilibrado, vibrante
Tetrádico Dois pares complementares Rico, complexo

Exemplos de paletas análogas da natureza

  • Pôr do sol: amarelo → laranja → laranja-avermelhado (saltos de 30° no lado quente).
  • Floresta: amarelo-esverdeado → verde → azul-esverdeado.
  • Oceano: azul-esverdeado → azul → azul-violeta.
  • Outono: laranja-avermelhado → laranja → laranja-amarelo.

Projetando com um conjunto análogo

  • Escolha uma cor como dominante (60% da área), use a segunda como acento (30%) e a terceira como destaque (10%), a regra “60-30-10”.
  • Combine cores análogas com um neutro (branco, preto, cinza quente) para texto e UI.
  • Evite usar três cores análogas com saturação igual em grandes blocos, isso parece confuso. Varie a claridade ou saturação entre as extremidades e a base.

Espaços de cor e matemática de ângulo

O deslocamento de 30° é calculado no espaço de matiz HSL ou HSV, ambos tratam a matiz como um ângulo (0-360°). Operações na roda em RGB não funcionam, você deve converter para HSL, girar a matiz e converter de volta. É isso que a ferramenta faz nos bastidores. A saída em todas as três notações é fornecida porque CSS, ferramentas de design e fluxos de trabalho de impressão preferem formatos diferentes.

Perguntas frequentes

Monocromática usa um tom com diferentes claridade e saturação (marinho, azul, azul-céu). Análoga usa três tons diferentes que são vizinhos na roda (azul-esverdeado, azul, azul-violeta). Análoga tem mais variedade visual.

Cores análogas podem ter misturas de tinta CMYK sobrepostas, o que reduz o contraste na impressão. Verifique versões com prova suave e considere aumentar o espaçamento de 30° para 40° para trabalhos de impressão.

Sim, mas mantenha uma das três como a cor dominante da marca e relegue as outras duas a papéis de apoio (insígnias, acentos). Usar as três para ações principais de UI causa confusão, os usuários aprendem a associar uma cor à principal chamada para ação.

As três cores centrais formam o esquema análogo clássico: o matiz base e seus dois vizinhos no ângulo escolhido. As duas cores externas ficam no dobro desse ângulo e são opções adicionais para ampliar a paleta. Com a separação padrão de 30°, o trio fica em ±30° e o par externo em ±60°.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Imagem Markdown

Gere a sintaxe de imagem do Markdown com texto alternativo, atributo de título e link opcional. Saída inline e em estilo de referência.

Ferramenta disponível em outros idiomas