Gerador de esquema triádico

Um gerador de esquema de cores triádico transforma uma cor hex em uma paleta de três cores percorrendo a roda cromática em passos iguais de cento e vinte graus. Informe um código base como #3498db ou a forma curta #abc; a ferramenta converte a cor em matiz, saturação e luminosidade, mantém saturação e luminosidade fixas e produz três membros com deslocamentos de matiz de zero, mais cento e vinte e mais duzentos e quarenta graus. Você recebe valores hex normalizados, canais RGB, detalhamentos HSL, um array de esquema e linhas de rotação passo a passo que pode assertar em testes ou gravar em um arquivo de tokens de design. Equipes de marca que equilibram acentos secundários ousados, desenvolvedores front-end que montam tokens de tema e estudantes que aprendem harmonia de cores precisam desse mesmo mapa triádico determinístico sem abrir um suíte de design completa.

O que é um esquema triádico e por que o espaçamento de 120° funciona

A harmonia triádica coloca três matizes nos vértices de um triângulo equilátero no círculo de matiz: cada cor fica a cento e vinte graus da seguinte, de modo que nenhum matiz domina enquanto os três permanecem igualmente espaçados. Sistemas de design usam essa estrutura quando uma marca precisa de uma cor primária de identidade mais dois acentos de apoio que ainda pareçam relacionados e não escolhidos ao acaso.

O gerador implementa o modelo clássico no espaço HSL: converte o hex de entrada em inteiros de vermelho, verde e azul, mapeia esses canais para matiz em graus e saturação e luminosidade como frações, e emite três cores que compartilham a saturação e a luminosidade originais enquanto seus matizes se situam no ângulo base, base mais cento e vinte e base mais duzentos e quarenta, cada um envolvido no intervalo semiaberto de zero a trezentos e sessenta.

Manter saturação e luminosidade fixas é intencional—a intenção de busca triádica é rotação equilibrada de matiz, não inventar novas rampas de valor ou croma—assim um azul pastel rende companheiros pastel e um vermelho saturado rende companheiros saturados. Quando a entrada é quase cinza, a saturação fica perto de zero e os três hex podem parecer semelhantes; é física correta, não um bug, porque cores acromáticas não têm matiz significativo para rotacionar.

Professores costumam combinar esta ferramenta com lições complementares (cento e oitenta graus) e análogas (passos adjacentes pequenos) para que os alunos vejam como o espaçamento na roda muda a tensão visual. A resposta sempre lista os papéis primary, secondary e tertiary para que a documentação e as propriedades personalizadas CSS mapeiem de forma limpa para --color-primary, --color-secondary e --color-tertiary sem reordenar à mão.

Dicas práticas, limites e buscas relacionadas

Comece pela cor de marca ou de UI em que você já confia em vez de um ponto arbitrário da roda; o membro primary é o matiz de entrada no deslocamento zero após a ida e volta HSL, que pode diferir em uma unidade de canal do hex original porque RGB para HSL para RGB é quantizado em canais de oito bits. Não passe formas com alfa como #RRGGBBAA—este landing mira apenas hex clássico opaco para que comprimentos inválidos falhem de imediato.

Cores CSS nomeadas como tomato estão fora do escopo; resolva-as primeiro para hex ou use uma tabela de cores nomeadas. Ao escrever testes unitários, cubra ao menos um caso vívido de seis dígitos, uma expansão de três dígitos, uma entrada quase cinza e um hex inválido deliberado para que tanto a matemática de harmonia quanto a validação fiquem travadas.

Esta página atende quem busca um gerador de esquema de cores triádico, uma paleta de cento e vinte graus ou uma ferramenta gratuita de roda de três cores online; não é um conversor multi-espaço completo, nem um extrator de paleta de imagem, nem um solucionador apenas complementar ou tetrádico de quatro cores. Prefira esta capacidade quando precisar de exatamente três matizes igualmente espaçados a partir de um token hex; se só precisa dividir canais sem harmonia, use um conversor hex para RGB.