Sem upload, 100% local, sem conta

Gerador de Esquema de Cores

Escolha uma cor base e obtenha uma paleta completa, complementar, análoga, triádica, tetrádica ou monocromática. Copie qualquer amostra como HEX, RGB ou HSL. Nada sai do seu navegador.

Como o Gerador de Esquema de Cores funciona

O Gerador de Esquema de Cores cria paletas de cores completas a partir de uma única cor base que você escolhe: complementar (oposta na roda de matiz), análoga (matizes adjacentes), triádica (três igualmente espaçadas), tetrádica (quatro matizes em dois pares complementares) e monocromática (variando leveza e saturação do mesmo matiz). Toda a lógica de paleta é executada no navegador; nada que você inserir sai do seu dispositivo.

Cada paleta gerada mostra amostras com seus valores HEX e RGB prontos para copiar. Isso dá aos designers um ponto de partida fundamentado na teoria das cores em vez de suposições. Como o gerador tem capacidade offline após o carregamento inicial da página, você pode experimentar livremente com cores de marca durante uma reunião com o cliente sem precisar de conexão de rede. Digite sua cor base na notação que você tiver, HEX, RGB ou HSL, e cada amostra gerada é devolvida nas três para que você possa copiar a que sua ferramenta de design espera.

Escrito por Bastien Sulyan

Como usar o Gerador de Esquema de Cores, passo a passo

  1. Escolha uma cor base usando o seletor de cores ou digitando um valor HEX.
  2. Escolha um tipo de harmonia nas abas: complementar, análoga, triádica, tetrádica ou monocromática.
  3. As amostras de paleta aparecem instantaneamente com seus valores HEX e RGB.
  4. Clique em qualquer amostra para copiar seu valor HEX para a área de transferência.
  5. Ajuste a cor base para explorar variações e veja toda a paleta atualizar.

Casos de uso comuns

  • Um designer que começa uma nova identidade de marca escolhe sua cor primária e gera uma paleta triádica para propor combinações de três cores a um cliente.
  • Um desenvolvedor que cria um tema escuro usa a paleta monocromática para gerar uma gama de tons e sombras a partir de uma única cor de marca.
  • Um criador de conteúdo escolhe uma paleta análoga para selecionar cores de destaque para uma apresentação que pareçam coesas sem contraste acentuado.
  • Um designer de interface usa a paleta complementar para identificar uma cor de destaque de alto contraste que se destaque em relação à cor primária da marca.

Perguntas frequentes

Como funciona a paleta complementar?

Uma cor complementar é a matiz diretamente oposta à cor base na roda de cores HSL, 180 graus afastada. Colocar cores complementares lado a lado cria contraste máximo. A ferramenta mostra a cor base e seu complemento, além de variantes mais claras e mais escuras de cada uma.

Qual é a diferença entre paletas triádica e tetrádica?

Uma paleta triádica usa três matizes igualmente espaçadas a 120 graus entre si na roda de cores. Uma paleta tetrádica usa quatro matizes a 90 graus entre si, formando dois pares complementares (também chamada de paleta dupla complementar ou quadrada). Paletas tetrádicas são mais complexas e requerem balanceamento cuidadoso de proporções para evitar ruído visual.

As cores que escolho são armazenadas ou enviadas para algum lugar?

Não. A geração de paleta é aritmética na representação HSL da cor base: girar o ângulo de matiz por quantidades fixas, deslocar leveza e saturação. Cada cálculo é executado localmente no navegador; nada é enviado para nenhum servidor.

Posso exportar a paleta como arquivo CSS ou arquivo de token de design?

A ferramenta atualmente mostra amostras com valores HEX e RGB copiáveis. Para uma exportação completa de propriedades CSS personalizadas ou JSON de token de design, copie os valores manualmente para o arquivo de token ou CSS do seu projeto. Um botão de exportação dedicado pode ser adicionado em uma atualização futura.

Este gerador segue algum padrão formal de teoria das cores?

Os cálculos de paleta usam fórmulas padrão de rotação de matiz no espaço de cores HSL, que é a convenção na maioria das ferramentas de design web. A uniformidade perceptiva exata do HSL tem limitações em comparação com LAB ou OKLCH, mas as rotações HSL produzem paletas que correspondem às convenções da roda de cores que os designers tipicamente esperam.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de desenvolvedor