Gerador de cores análogas

Cores análogas ficam lado a lado no círculo de matizes, então compartilham uma família de subtons e soam naturalmente harmoniosas em interfaces, sistemas de marca e ilustração. Este gerador recebe uma cor CSS hex de base e um ângulo positivo de deslocamento de matiz em graus, converte a base para HSL e então constrói as duas vizinhas subtraindo e somando esse ângulo, mantendo saturação e luminosidade fixas. O resultado é uma paleta de três amostras — menos, base e mais — devolvida como hex, inteiros RGB, componentes HSL e um array palette pronto para uso. A prática clássica de design usa trinta graus para uma família fechada e passos maiores quando você quer mais separação sem pular para o contraste complementar. Códigos hex inválidos e ângulos fora da faixa falham com um erro de validação claro em vez de inventar uma paleta.

Como funcionam os deslocamentos de matiz análogos

Comece com uma cor de base escrita como uma string CSS hex, como #3366cc ou a forma curta #36c. O resolvedor expande o hex de três dígitos, interpreta os canais vermelho, verde e azul na faixa de zero a duzentos e cinquenta e cinco e converte esse trio RGB em HSL usando as fórmulas padrão de CSS e W3C, de modo que o matiz fica em graus num círculo de zero a trezentos e sessenta enquanto saturação e luminosidade são porcentagens.

O parâmetro de ângulo é um número positivo de graus, estritamente maior que zero e no máximo cento e oitenta. As duas vizinhas análogas são formadas movendo o matiz para matiz base menos ângulo e matiz base mais ângulo, dando a volta pelo zero quando o caminho cruza a borda vermelha do círculo, e deixando saturação e luminosidade intactas para que a família permaneça na mesma faixa de croma e valor.

Cada trio HSL resultante é convertido de volta para RGB inteiro pelo mesmo caminho de conversão usado pelos módulos de cor do navegador, e então formatado como hex em minúsculas, uma string rgb() e uma string hsl().

O que você envia e o que recebe de volta

Envie um campo color obrigatório como string hex e um campo angle obrigatório como número finito de graus. Formas de cor válidas são três ou seis dígitos hexadecimais com um sustenido inicial opcional; maiúsculas e minúsculas são ignoradas e a saída sempre normaliza para um hex minúsculo de seis dígitos com sustenido.

O ângulo deve ser maior que zero e no máximo cento e oitenta, para que as duas vizinhas permaneçam distintas e não colapsem num giro de cento e oitenta graus estilo complementar, que seria uma intenção de harmonia diferente. Verificações típicas incluem um azul médio #3366cc com ângulo de trinta graus para uma família fria clássica, vermelho puro #ff0000 com trinta graus para vizinhos laranja quente e magenta, e um hex curto de três dígitos para confirmar a expansão.

Onde paletas análogas aparecem no trabalho real

Designers de produto constroem estados de componentes, séries de gráficos e gradientes de destaque de marketing que precisam de matizes relacionados sem a alta tensão dos pares complementares; um ângulo fixo mantém os tokens reproduzíveis entre sistemas de design. Equipes de marca derivam cores secundárias e terciárias a partir de um hex primário quando o guia de estilo publica apenas uma amostra oficial e ainda quer uma família controlada para ilustração e modelos de redes sociais.

Engenheiros de frontend geram propriedades customizadas de CSS e mapas de tokens no estilo Tailwind a partir de uma única cor semente, para que temas claros e escuros permaneçam na mesma espinha de matiz enquanto apenas a luminosidade muda em outros pontos. Autores de visualização de dados atribuem cores de séries que permanecem distinguíveis e coesas para gráficos categóricos em que choques complementares implicariam oposição em vez de agrupamento.

Professores e facilitadores de oficinas ensinam teoria das cores com exemplos ao vivo: os alunos digitam um hex favorito, testam trinta contra quarenta e cinco contra sessenta graus e veem imediatamente até onde a família caminha pelo círculo. Se depois você precisar de esquemas complementares ou triádicos, apenas conversão de HSL para RGB, busca da cor CSS nomeada mais próxima ou verificações de contraste WCAG, trate essas como intenções de busca e landings separadas em vez de sobrecarregar esta página do gerador de análogas.