Softonic

Gerador de Cores Triádicas

Etapa 1 / 2
Próximo

Uma paleta triádica usa três cores separadas por 120° no círculo cromático; vermelho, amarelo e azul é o exemplo aprendido na escola. O resultado é naturalmente equilibrado e cheio de energia, sem virar bagunça. Escolha qualquer cor base no seletor: o gerador a converte para HSL, gira o matiz exatamente +120° e +240° mantendo intactas a saturação e a luminosidade, e mostra as três amostras com seus códigos HEX. Clique em uma amostra para copiar o código.

Como a paleta é construída

  1. 1

    Escolha uma cor base

    Use o seletor de cores para definir o matiz em torno do qual a paleta será construída.

  2. 2

    As duas parceiras são calculadas

    A ferramenta gira o matiz em +120° e +240° no espaço HSL; a saturação e a luminosidade ficam idênticas para uma tríade coesa.

  3. 3

    Leia os códigos HEX

    Base, Triadic +120° e Triadic +240° aparecem lado a lado, cada uma com seu valor HEX de seis dígitos.

  4. 4

    Clique para copiar

    Um clique em qualquer amostra copia o código HEX para a área de transferência, pronto para colar no CSS, na configuração do Tailwind ou na sua ferramenta de design.

Por que paletas triádicas parecem equilibradas

Três cores em intervalos iguais no círculo cromático não compartilham vizinhança de matiz: contrastam com força, enquanto o espaçamento de 120° evita o choque frontal dos complementares diretos (a 180°). O olho as lê como distintas, porém harmoniosas.

A matemática por trás das amostras

O gerador converte sua cor HEX para HSL, soma 120° e 240° ao matiz e converte de volta. Como só o matiz se move, as três cores sempre compartilham a mesma saturação e luminosidade. Um efeito curioso: girar o matiz exatamente 120° equivale a rotacionar os canais vermelho, verde e azul, então as parceiras de #6366F1 (a cor padrão) são #F16366 e #66F163, os mesmos três pares de bytes em outra ordem.

Exemplos de tríades geradas por esta ferramenta:

Base Triadic +120° Triadic +240°
#FF0000 (vermelho) #00FF00 #0000FF
#6366F1 (índigo) #F16366 #66F163
#E67E22 (laranja) #22E67E #7E22E6
#0EA5E9 (azul-celeste) #E90EA5 #A5E90E
#2ECC71 (verde-esmeralda) #712ECC #CC712E

Como usar uma tríade sem exagerar

Três matizes vivos em saturação máxima é coisa demais. A prática recomendada:

  • Uma dominante (60%) para a interface principal.
  • Uma secundária (30%) para destaques e seções.
  • Uma de impacto (10%) para os elementos interativos principais.

A outra alavanca é partir de uma base suave: as duas parceiras herdam a saturação dela, então uma base discreta gera uma tríade discreta.

Tríade comparada a outras harmonias

Harmonia Estrutura Sensação
Complementar 2 cores, a 180° Alto contraste, impactante
Análoga 3 cores, adjacentes Calma, coesa
Triádica 3 cores, a 120° Equilibrada, energética
Tetrádica 4 cores, retângulo Rica, mais difícil de equilibrar
Compl. dividida Base + 2 quase complementares Forte sem choques

Dicas para design de interfaces

  • Verifique o contraste de cada par. Paletas triádicas não garantem contraste WCAG AA em texto sobreposto; confira cada combinação.
  • Escolha uma única cor para as chamadas para ação e mantenha. Botões alternando entre as cores da tríade confundem o usuário.
  • Use tons mais claros e mais escuros para ampliar a paleta sem adicionar um quarto matiz.
  • Teste no modo escuro. Uma tríade que funciona no branco pode perder distinção em fundos escuros; ajuste a luminosidade.

Perguntas frequentes

Três divisões iguais do círculo cromático de 360° colocam a distância máxima entre os matizes sem que nenhum domine. Espaçamentos menores geram harmonia análoga; maiores quebram a equidistância e costumam degenerar em um esquema de complementares divididas.

Sim, mas quase sempre suavizada. Muitas marcas partem de uma base triádica e depois reduzem a saturação ou o tom de duas das três cores para um ar mais maduro. Uma tríade totalmente saturada passa uma sensação divertida ou energética, então alinhe com a personalidade da marca.

Sim. O gerador mantém a saturação e a luminosidade da sua cor base nas duas parceiras, então uma base dessaturada produz uma tríade igualmente suave. É uma estratégia comum em projetos profissionais ou editoriais.

Um cinza puro tem saturação zero, então não há matiz para girar e as três amostras saem iguais. Aproxime a base de qualquer matiz e as três amostras se separam na hora.

Não precisa de cadastro e nada é salvo. A cor é usada apenas para calcular e exibir a paleta e, na visualização passo a passo, também aparece na URL da página, o que facilita salvar a paleta nos favoritos ou compartilhar.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Conversor de Pantone para HEX

Converta cores Pantone PMS para os valores mais próximos de HEX, RGB e CMYK para correspondência em tela e impressão, com pré-visualização de amostras.

Ferramenta disponível em outros idiomas