Gerador de Cores Análogas
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
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
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
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
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
Conversor de ASCII para Hex
Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.
Conversor de ASCII para Binário
Converta qualquer string ASCII para sua representação binária. Cada caractere se torna oito bits, separados por espaços, prontos para colar em um rastreamento de protocolo ou tarefa de casa.
Gerador de Paletas de Cores
Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.
Conversor de Binário para ASCII
Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.
Conversor de BBCode para HTML
Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.
Simplificador de Álgebra Booleana
Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.