Matiz é a posição angular da cor no círculo, geralmente de 0 a 359 graus em HSL. É o que define se a cor é "vermelha", "azul" etc., independentemente da saturação e da luminosidade.
Carregando ferramenta… / Loading tool…
Monte harmonias análogas, complementares, triádicas, tetrádicas e monocromáticas com HSL controlável.
A roda de cores é o círculo em que os matizes são dispostos por ângulo, e ela transforma a escolha de paletas de "achismo" em relação geométrica. A partir de uma cor base, os esquemas de harmonia são posições no círculo: análogas ficam lado a lado (calmas), complementares ficam opostas (máximo contraste), triádicas formam um triângulo (equilíbrio vibrante), tetrádicas um retângulo, e monocromáticas variam só saturação e luminosidade de um mesmo matiz. Esta ferramenta trabalha em HSL, matiz, saturação e luminosidade, porque é o modelo mais intuitivo para girar a roda e ajustar a intenção. Em interfaces, porém, a paleta boa não é só a mais bonita: ela precisa de contraste suficiente, hierarquia clara e não pode depender só da cor para comunicar estado.
As harmonias são regras de distância angular a partir do matiz base. Análoga usa vizinhos próximos (por exemplo, ±30°): resultado coeso e tranquilo, bom para fundos e temas. Complementar usa o oposto (+180°): contraste máximo de matiz, ótimo para destacar um elemento, mas cansativo se usado em grandes áreas.
Triádica distribui três matizes a 120° de distância: vibrante e equilibrada, útil quando há três papéis a separar. Tetrádica (dois pares complementares) oferece mais variedade, exigindo uma cor dominante para não competir. Monocromática mantém um único matiz e varia saturação e luminosidade, a mais segura para escalas e estados.
Suponha uma marca com azul base em 220° de matiz. Um esquema monocromático gera tons mais claros e escuros do mesmo azul para fundos, bordas e estados, consistente e fácil de aplicar. Para criar um acento de destaque (um botão de ação), o complementar (por volta de 40°, um laranja) chama a atenção sem sair da lógica da roda.
Já uma paleta triádica a partir dos 220° traria também algo em torno de 100° (verde) e 340° (rosa/magenta), útil para categorizar seções ou séries de dados. Depois de gerar os HEX, o passo que não pode faltar é validar o contraste no contexto real, a roda dá a relação de matiz, não garante legibilidade.
O HSL é prático para CSS e para girar a roda, mas não é perceptualmente uniforme: dois matizes com a mesma "luminosidade" em HSL podem parecer muito diferentes de brilho para o olho (um amarelo a 50% de luminosidade parece bem mais claro que um azul a 50%). Por isso os valores da roda são um ponto de partida, e o ajuste final deve ser feito visualmente.
Duas verificações fecham o trabalho: contraste de luminância entre texto e fundo (as diretrizes WCAG pedem no mínimo 4,5:1 para texto normal) e a independência da cor, nunca comunicar um estado importante só pelo matiz, para não excluir quem tem baixa visão ou daltonismo. Beleza e acessibilidade caminham juntas.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/roda-de-cores"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Roda de Cores"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Matiz é a posição angular da cor no círculo, geralmente de 0 a 359 graus em HSL. É o que define se a cor é "vermelha", "azul" etc., independentemente da saturação e da luminosidade.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAA paleta é calculada localmente no navegador.