O que é Criador de Esquemas de Cores?

O Criador de Esquemas de Cores gera paletas completas a partir de uma única cor base usando regras de teoria das cores. Escolha esquemas monocromáticos, complementares, complementar dividido, duplo dividido, triádicos, tetrádicos ou análogos e ajuste cada amostra. Copie um link de compartilhamento, exporte como variáveis CSS ou configuração do Tailwind, ou copie os códigos hexadecimais.

Escolha qualquer hex base e o gerador aplica as rotações clássicas da roda de cores: 180 graus para complementar, 150 e 210 graus para os dois flancos do complementar dividido, 120 para triádico, 90 para tetrádico e passos pequenos em cada lado para análogo. Tons e matizes mantêm o mesmo matiz e deslocam apenas a luminosidade em HSL com incrementos fixos, formando uma rampa limpa de cinco passos para cada um. Cada amostra pode ser copiada como HEX, rgb(), hsl() ou oklch(); o painel de contraste avalia cada cor contra branco e preto em WCAG AA e AAA, e a pré-visualização de visão redesenha a paleta inteira pelos filtros de protanopia, deuteranopia ou tritanopia em um clique. Copie um link de compartilhamento para salvar a paleta ou enviá-la a um colega sem precisar de conta.

Como usar

1. Escolha uma cor base usando o seletor de cores ou insira um código hexadecimal.
2. Selecione um tipo de esquema para gerar a paleta: monocromático, complementar, complementar dividido, duplo dividido, triádico, análogo ou tetrádico.
3. Copie códigos hexadecimais individuais, exporte a paleta completa como variáveis CSS ou baixe como amostra de imagem.

Quando usar

• Transformar um único hex da marca numa paleta completa para um site ou tema de app.
• Verificar se a cor do logo tem um complementar limpo antes de imprimir brindes.
• Gerar variáveis CSS sem abrir o Figma ou outra ferramenta de design.

Resultado

Um desenvolvedor web seleciona o azul primário da sua marca, gera um esquema triádico produzindo tons complementares de laranja e verde, e exporta a paleta como propriedades CSS personalizadas para o seu sistema de design.

Perguntas frequentes

Qual a diferença entre esquemas triádico e tetrádico?

O triádico usa três cores separadas por 120 graus no círculo, formando um trio equilibrado. O tetrádico usa quatro cores em retângulo (dois pares complementares), com mais variedade mas equilíbrio visual mais difícil.

Quando devo usar sombras e quando usar tons claros?

Sombras (versões mais escuras) funcionam para textos, bordas e estados hover em interfaces claras. Tons claros servem para fundos, estados desativados e destaques sutis. A maioria dos design systems precisa das duas rampas.

O gerador considera contraste de acessibilidade?

Sim — o painel de contraste abaixo da paleta mostra a razão WCAG de cada cor contra branco e preto, com selos de aprovado ou reprovado para AA e AAA. O limiar de 4.5:1 para texto comum atende à maioria dos casos de UI; troque a pré-visualização de visão para protanopia, deuteranopia ou tritanopia e veja também como a paleta se lê para pessoas com deficiência na visão de cores.

Por que um esquema análogo parece mais calmo que um complementar?

Cores análogas ficam vizinhas no círculo e compartilham família tonal, gerando pouca tensão visual. Complementares ficam opostas, com contraste máximo e sensação mais enérgica, mas cansam a vista em grandes superfícies.

Dá para exportar para o config do Tailwind ou só variáveis CSS?

Os dois. Variáveis CSS colam direto sob :root no stylesheet. O formato Tailwind embrulha os valores hex num objeto theme.extend.colors que você cola em tailwind.config.js.

Ferramentas relacionadas