O que é Roda de cores?

Escolha uma cor base e veja esquemas complementares, análogos, triádicos, complementares divididos, tetrádicos e monocromáticos numa roda interativa. Cada amostra mostra o contraste WCAG sobre branco e preto, e você pode exportar a paleta como texto simples ou como PNG para compartilhar.

A roda funciona em HSL: você arrasta um matiz base ou digita um HEX e as amostras combinadas giram para o lugar em tempo real. Os controles de saturação e luminosidade ajustam o esquema inteiro de uma vez. Cada cor gerada é copiada como HEX, RGB, HSL, CMYK ou OKLCH com um clique, e a roda marca cada ponto de harmonia com um círculo rotulado para você ver a relação entre as cores.

Como usar

1. Clique ou arraste na roda de cores para escolher sua tonalidade base, ou insira um valor HEX específico no campo de entrada.
2. Escolha um tipo de harmonia (complementar, análoga, triádica, complementar dividida ou tetrádica) para ver as cores correspondentes destacadas na roda.
3. Copie qualquer cor gerada como HEX, RGB, HSL, CMYK ou OKLCH clicando na amostra. Exporte a paleta completa para usar nas suas ferramentas de design.

Quando usar

• Escolher três ou quatro cores de destaque para um kit de marca depois de fechar a cor primária.
• Selecionar uma cor de botão visualmente oposta ao fundo para maximizar o contraste.
• Montar uma paleta de UI onde tons relacionados precisam parecer calmos, não brigar entre si.

Resultado

Um web designer escolhe #E87040 como cor da marca, seleciona harmonia triádica e obtém três cores de destaque equilibradas para sua landing page — tudo com um clique.

Perguntas frequentes

Qual a diferença entre harmonia análoga e tríade?

A análoga pega cores vizinhas na roda (dentro de uns 30 graus) e dá uma sensação calma e unificada. A tríade espaça três cores 120 graus entre si para um esquema de alto contraste, equilibrado, que dá energia ao design.

Quando uso complementar em vez de complementar dividida?

A complementar usa dois matizes opostos para impacto máximo, mas brigam se ambos estiverem em saturação total. A dividida combina sua base com os dois vizinhos do oposto: mesma tensão, choque mais suave, mais fácil de equilibrar.

Por que as cores da harmonia mudam quando movo o controle de luminosidade?

A roda mantém os deslocamentos relativos de matiz mas aplica sua saturação e luminosidade a cada resultado. Assim, os verdes análogos a 40% de luminosidade ficam todos em tom de floresta escura, sem misturar verde escuro com verde neon.

Dá para exportar a paleta como variáveis CSS ou formato de ferramenta de design?

Clique em qualquer amostra para copiar HEX, RGB, HSL, CMYK ou OKLCH para a área de transferência. Daí vai direto para um arquivo CSS (--brand-primary: #E87040), para o campo hex do Figma ou para a configuração de cores do Tailwind, o que você estiver usando.

A tetrádica é o mesmo que harmonia retangular?

Sim. A tetrádica (também chamada retangular) escolhe quatro cores formando um retângulo na roda: dois pares complementares. Dá uma paleta mais rica, mas você precisa de um tom dominante ou o design fica carregado demais.

Ferramentas relacionadas