Gerador de Harmonia de Cores – Complementar, análoga e triádica em OKLCH
A partir de uma cor, gere paletas complementar, análoga, triádica, tetrádica, complementar dividida e monocromática, com HEX e variáveis CSS.
Complementar
A cor oposta na roda (180°). Contraste máximo de matiz — bom para um único destaque.
- Base
- Ajustada*
- #2563eb
- #906900
Análoga
Vizinhas a ±30°. Combinação calma, que parece natural.
- Ajustada*
- Base
- #007aa7
- #2563eb
- #7a49df
Triádica
Três matizes a 120°. Vibrante; funciona melhor com uma cor dominante.
- Base
- Ajustada*
- #2563eb
- #d10e2e
- #008908
Tetrádica
Quatro matizes a 90° (quadrado). Rica, difícil de equilibrar.
- Base
- Ajustada*
- Ajustada*
- #2563eb
- #c5167b
- #906900
- #00846a
Complementar dividida
A base mais as duas vizinhas da complementar (150° e 210°). Contraste com menos tensão.
- Base
- Ajustada*
- Ajustada*
- #2563eb
- #ad5400
- #727700
Monocromática
O mesmo matiz e croma em luminosidades diferentes.
- Ajustada*
- Base
- Ajustada*
- Ajustada*
- #002177
- #0543ca
- #2563eb
- #82adff
- #cddfff
* Com a mesma luminosidade e croma da base, essa cor não existe no sRGB (a tela comum). O croma foi reduzido até caber, mantendo matiz e luminosidade — ela fica um pouco menos viva, mas não muda de tom como aconteceria cortando os canais RGB.
:root {
/* Complementar */
--complementar-1: #2563eb;
--complementar-2: #906900;
/* Análoga */
--analoga-1: #007aa7;
--analoga-2: #2563eb;
--analoga-3: #7a49df;
/* Triádica */
--triadica-1: #2563eb;
--triadica-2: #d10e2e;
--triadica-3: #008908;
/* Tetrádica */
--tetradica-1: #2563eb;
--tetradica-2: #c5167b;
--tetradica-3: #906900;
--tetradica-4: #00846a;
/* Complementar dividida */
--complementar-dividida-1: #2563eb;
--complementar-dividida-2: #ad5400;
--complementar-dividida-3: #727700;
/* Monocromática */
--monocromatica-1: #002177;
--monocromatica-2: #0543ca;
--monocromatica-3: #2563eb;
--monocromatica-4: #82adff;
--monocromatica-5: #cddfff;
}Por que OKLCH? Na roda do HSL, a complementar de um azul escuro é um amarelo que parece muito mais claro — as cores da “harmonia” não têm o mesmo peso. Girando o matiz em OKLCH, luminosidade e croma percebidos ficam iguais, e só o tom muda.
Como usar esta ferramenta
- Digite a cor base em HEX, rgb(), hsl() ou oklch(), ou use o seletor
- Veja as seis harmonias geradas lado a lado
- Clique em Copiar ao lado de cada HEX para levar a cor
- Defina um prefixo, se quiser, e copie todas as paletas como variáveis CSS
Sobre esta ferramenta
O que é
Harmonia de cores é uma combinação definida por ângulos na roda de cores: a complementar fica a 180°, as análogas a ±30°, a triádica divide a roda em três partes de 120°. Fazer essa rotação em OKLCH, um espaço perceptual, mantém a claridade percebida — em HSL a complementar de um azul escuro sai um amarelo bem mais claro.
Quando usar
- Escolher uma cor de destaque que combine com a cor da marca
- Montar a paleta de um gráfico com cores de mesmo peso visual
- Gerar variações claras e escuras do mesmo tom (monocromática)
- Levar a paleta para o projeto como variáveis CSS
Segurança
Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.
Perguntas frequentes
- Por que a complementar não é igual à de outros geradores?
- A maioria gira o matiz em HSL. Aqui a rotação é em OKLCH, cujo matiz é perceptual: a complementar do vermelho #ff0000 sai um azul-ciano com a mesma luminosidade percebida, e não o ciano puro #00ffff do HSL, que parece muito mais claro.
- O que significa uma cor marcada como ajustada?
- Que, com a mesma luminosidade e croma da base, aquele matiz não existe no sRGB — acontece muito com amarelos e cianos saturados girados para azul. O croma foi reduzido até a cor caber na tela, preservando luminosidade e matiz.
- Qual harmonia usar em uma interface?
- Para produto, a complementar ou a complementar dividida funcionam bem com uma cor dominante e outra só para destaques. A análoga dá um visual calmo. Triádica e tetrádica são vibrantes e pedem que uma cor domine e as outras apareçam em pouca área.
- Como a monocromática é gerada?
- Mantém matiz e croma da base e varia só a luminosidade OKLCH em cinco níveis, de 30% a 90%. A cor base substitui o nível mais próximo dela, então ela sempre aparece exata na paleta.