Qual a diferença entre essas harmonias?

Complementar usa a cor a 180° oposta no círculo - contraste máximo, útil para acentos em botões de ação. Análoga usa vizinhas a 30° - baixo contraste, calma, ótima para fundos. Triádica escolhe três cores equidistantes (120° entre si) - vibrante e equilibrada. Tetrádica adiciona uma quarta, dois pares de complementares - rica, mas mais difícil de balancear. Monocromática varia luminosidade e saturação mantendo o matiz - a opção mais coesa.

Como são calculadas?

O hex é convertido para HSL e então o matiz é rotacionado por offsets fixos conforme a harmonia (180° na complementar, ±30° na análoga, ±120° na triádica, +60/+180/+240 na tetrádica). Saturação e luminosidade ficam constantes para as variantes parecerem da mesma família. A monocromática mantém o matiz e percorre a luminosidade de 90 % a 20 %.

Por que HSL em vez de HSV ou LCH?

HSL é o espaço que o CSS conhece nativamente e combina com a forma como a maioria dos designers pensa as cores («uma versão mais escura», «o oposto»). LCH daria passos perceptivamente mais uniformes, mas ainda não é suportado em toda ferramenta de design. HSL é o meio-termo pragmático - bom o suficiente para ideação, com saída estável entre ferramentas.

Essas paletas passam no contraste WCAG?

Nem sempre - harmonia e acessibilidade são perguntas diferentes. Duas cores podem ser harmoniosas e ainda ter contraste insuficiente para texto. Depois de escolher uma paleta, passe cada par texto/fundo pelo verificador de contraste. O gerador de tons também ajuda: a maioria das paletas precisa de variantes claras e escuras fixadas para corpo de texto, e não dos meios-tons saturados que uma harmonia devolve.

Começo da cor da marca ou de um matiz aleatório?

Cor da marca, quase sempre. O gerador te ajuda a encontrar cores de apoio que funcionam com o que já existe. Começar de um matiz aleatório dá uma paleta bonita sem âncora, o que normalmente acaba forçando a marca a se ajustar à paleta, em vez do contrário.

Gerador de paleta de cores

Gere paletas complementares, análogas, triádicas, tetrádicas e monocromáticas a partir de qualquer cor base.

Cor base

Complementar

Análoga

Triádica

Tetrádica

Monocromática

Clique numa amostra para copiar o hex.

Uma cor base, cinco paletas. O gerador aplica as harmonias clássicas - complementar, análoga, triádica, tetrádica, monocromática - sobre o hex que você digita. Cada linha mostra a paleta completa, com a amostra base destacada e as demais derivadas por rotação de matiz em HSL. Clique numa amostra para copiar o hex.

Como usar

Defina a cor base
Use o seletor ou cole um hex. As cinco linhas de paleta recalculam na hora.
Percorra as harmonias
Cada linha é uma harmonia. Escolha a que casa com a energia do projeto - calma (análoga), ousada (triádica), icônica (complementar).
Copie o que precisar
Clique numa amostra para copiar o hex. A amostra base fica marcada.
Valide contra o texto
Passe as cores escolhidas pelo verificador de contraste para garantir que cumprem WCAG nos tamanhos de texto que você usa.

O que é?

Um gerador de paleta pega uma cor base e produz vários esquemas harmônicos rotacionando seu matiz no círculo cromático. As harmonias tradicionais - complementar, análoga, triádica, tetrádica, monocromática - vêm da teoria das cores do século XIX e seguem sendo a base da maioria dos seletores de design systems (Material, Adobe, Tailwind, IBM Carbon). Dão um ponto de partida garantidamente sem dissonância, antes mesmo de afinar brilho e saturação.

Quando usar

Escolher cores de acento para uma marca com primária fixa, desenhar a paleta de um gráfico onde cada série precisa ser distinta, definir cores de apoio para uma landing a partir de uma única cor de marca, esboçar moodboards antes de se comprometer com um design system completo, e treinar quais matizes lêem bem juntos brincando com um slider.

Erros comuns

Tratar a saída do gerador como paleta final - é um ponto de partida. Geralmente é preciso afinar a luminosidade por amostra para legibilidade, trocar alguma amostra por uma vizinha que case com a marca e adicionar cinzas neutros (as harmonias não os produzem). Escolher uma paleta sem testar contra os fundos reais em que vai viver - cores lêem diferente sobre branco, bege e superfícies escuras.

FAQ

Qual a diferença entre essas harmonias?: Complementar usa a cor a 180° oposta no círculo - contraste máximo, útil para acentos em botões de ação. Análoga usa vizinhas a 30° - baixo contraste, calma, ótima para fundos. Triádica escolhe três cores equidistantes (120° entre si) - vibrante e equilibrada. Tetrádica adiciona uma quarta, dois pares de complementares - rica, mas mais difícil de balancear. Monocromática varia luminosidade e saturação mantendo o matiz - a opção mais coesa.
Como são calculadas?: O hex é convertido para HSL e então o matiz é rotacionado por offsets fixos conforme a harmonia (180° na complementar, ±30° na análoga, ±120° na triádica, +60/+180/+240 na tetrádica). Saturação e luminosidade ficam constantes para as variantes parecerem da mesma família. A monocromática mantém o matiz e percorre a luminosidade de 90 % a 20 %.
Por que HSL em vez de HSV ou LCH?: HSL é o espaço que o CSS conhece nativamente e combina com a forma como a maioria dos designers pensa as cores («uma versão mais escura», «o oposto»). LCH daria passos perceptivamente mais uniformes, mas ainda não é suportado em toda ferramenta de design. HSL é o meio-termo pragmático - bom o suficiente para ideação, com saída estável entre ferramentas.
Essas paletas passam no contraste WCAG?: Nem sempre - harmonia e acessibilidade são perguntas diferentes. Duas cores podem ser harmoniosas e ainda ter contraste insuficiente para texto. Depois de escolher uma paleta, passe cada par texto/fundo pelo verificador de contraste. O gerador de tons também ajuda: a maioria das paletas precisa de variantes claras e escuras fixadas para corpo de texto, e não dos meios-tons saturados que uma harmonia devolve.
Começo da cor da marca ou de um matiz aleatório?: Cor da marca, quase sempre. O gerador te ajuda a encontrar cores de apoio que funcionam com o que já existe. Começar de um matiz aleatório dá uma paleta bonita sem âncora, o que normalmente acaba forçando a marca a se ajustar à paleta, em vez do contrário.