Pular para o conteúdo

Gerador de paleta de cores

Paletas complementares, análogas, triádicas, complemento dividido e monocromáticas a partir de uma única cor base, com os cálculos HSL feitos para você.

Como funciona

Este gerador de paleta de cores usa uma cor base e produz instantaneamente cinco variações de paleta baseadas na teoria das cores: complementar, análoga, triádica, complemento dividido e monocromática, para que você possa explorar esquemas de cores harmoniosos sem precisar fazer os cálculos HSL manualmente.

  1. Defina uma cor base

    Digite um código hexadecimal, use o seletor de amostras ou clique em Cor aleatória.

  2. Gere as paletas

    Cinco tipos de harmonia aparecem, cada um como uma linha com cinco amostras.

  3. Copie o que precisar

    Clique em qualquer amostra para ver seu valor hexadecimal ou copie tudo como variáveis CSS.

Os cinco tipos de harmonia

Cada paleta é criada convertendo a cor base para HSL (matiz, saturação, luminosidade) e deslocando a matiz por um valor fixo ao redor do círculo cromático:

  • Complementar: a matiz diretamente oposta à base, a 180 graus de distância, para máximo contraste.
  • Análoga: matizes vizinhas à base, a 15 e 30 graus de cada lado, para um visual calmo e coeso.
  • Triádica: três matizes espaçadas em 120 graus, uma combinação equilibrada e vibrante.
  • Complemento dividido: as duas matizes adjacentes à complementar, a 150 e 210 graus de distância, quase o mesmo contraste com menos tensão.
  • Monocromática: a mesma matiz em cinco níveis diferentes de luminosidade, sempre uma escolha segura e coesa.

Usando uma paleta em CSS

Copie os valores hexadecimais e defina-os como propriedades personalizadas, depois referencie-as em toda a folha de estilo:

--color-primary: #14b8a6; --color-accent: #b84e14;

O HSL não é perceptualmente uniforme

Essas paletas são calculadas puramente com matemática HSL e não consideram a uniformidade perceptual, como fazem espaços de cor como OKLCH ou CIELAB. Duas cores com a mesma luminosidade HSL ainda podem parecer ter brilhos visivelmente diferentes, então verifique as taxas de contraste com uma ferramenta dedicada de acessibilidade antes de finalizar uma paleta de interface.

Perguntas frequentes

Como gero uma paleta de cores a partir de um único código hexadecimal?

Digite seu código hexadecimal no campo Cor base, por exemplo #14b8a6, e clique em Gerar paletas. A ferramenta o converte para HSL e calcula cinco tipos de harmonia: complementar, análoga, triádica, complementar dividida e monocromática, cada uma como uma linha com cinco amostras. Clique em qualquer amostra para copiar seu valor hexadecimal para a área de transferência.

Qual é a diferença entre paletas de cores complementares e complementares divididas?

Uma paleta complementar combina sua tonalidade base com a cor diretamente oposta a ela no círculo cromático, a 180 graus, para obter contraste máximo. Uma paleta complementar dividida usa as duas tonalidades adjacentes a esse ponto oposto, a 150 e 210 graus, produzindo um contraste igualmente vibrante, mas ligeiramente mais suave, que é mais fácil de equilibrar no design de interfaces.

Como uso uma paleta gerada em CSS?

Copie os valores hexadecimais das amostras e defina-os como propriedades personalizadas de CSS, por exemplo --color-primary: #14b8a6; --color-accent: #b84e14;. Referencie-as em toda a sua folha de estilos com var(--color-primary). O botão Copiar todas as 5 paletas copia todas as amostras de todos os tipos de harmonia de uma vez, prontas para colar em um bloco :root.

Posso começar com uma cor aleatória para obter inspiração de paleta?

Sim. Clique no botão Cor aleatória para gerar um valor hexadecimal aleatório e calcular imediatamente todas as cinco paletas a partir dele. Isso é útil para exploração de marca quando você ainda não tem uma cor inicial em mente.

Qual é uma limitação da geração de paletas baseada em navegador?

Os cálculos das paletas são feitos puramente com matemática HSL e não consideram a uniformidade perceptual, como fazem os espaços de cores OKLCH ou CIELAB. Cores com a mesma luminosidade HSL podem parecer visualmente diferentes em brilho, portanto, sempre verifique as proporções de contraste com uma ferramenta dedicada de acessibilidade antes de finalizar uma paleta de interface.