🎨 Utilitários

Gerador de Paleta de Cores

Gere paletas de cores harmoniosas a partir de uma cor base. Esquemas: monocromático, análogo, complementar, tríade, tetrádico e split-complementar.

Cor base

Esquema

Sobre os esquemas

• Monocromático: variações de brilho da mesma tonalidade
• Análogo: cores vizinhas na roda cromática (harmonia suave)
• Complementar: cor oposta na roda (alto contraste)
• Split-complementar: base + as duas cores adjacentes ao complementar
• Tríade: três cores equidistantes (vibrante e equilibrado)
• Tetrádico: quatro cores em quadrado na roda (rico e complexo)

Paletas de cores harmoniosas

Escolher cores que combinam vai além do gosto pessoal. A teoria das cores traz regras que produzem combinações agradáveis a partir das relações no círculo cromático. O gerador parte de uma cor base e monta paletas harmônicas seguindo esses esquemas clássicos.

Você escolhe o tipo de harmonia, entre monocromática, análoga, complementar, tríade, tetrádica e split-complementar, e recebe as cores correspondentes na sequência, cada uma com o código pronto para copiar. É um jeito rápido de criar a identidade visual de um projeto, um site ou uma apresentação sem ficar chutando no escuro.

A paleta nasce no navegador, a partir da cor que você definir. Boa companhia para designers, desenvolvedores e qualquer pessoa que precise de um conjunto de cores que funcione junto.

Perguntas frequentes

Por que a paleta sempre traz cinco cores, mesmo na tríade?

Porque o gerador preenche cinco faixas em qualquer esquema. A tríade clássica usa três matizes a 120 graus de distância; aqui a faixa avança de 60 em 60 graus, então os três tons da tríade propriamente dita são o primeiro, o terceiro e o quinto — os outros dois são intermediários. No tetrádico, o quadrado de 90 graus ocupa as quatro primeiras amostras e a quinta é um matiz a 45 graus, com a saturação um pouco reduzida.

Digitei o código HEX no campo de texto e a paleta não mudou. Por quê?

O campo de texto só é aceito quando traz o valor completo: o sinal # mais seis dígitos hexadecimais, como #3b82f6. Formas abreviadas de três dígitos, códigos sem o # e digitação pela metade são ignorados, e a paleta continua saindo do seletor de cor ao lado, que mantém o último valor válido. Cole o código inteiro de uma vez, ou clique no quadradinho colorido e escolha o tom por lá.

Por que as cinco cores saem quase iguais quando escolho branco, preto ou cinza?

Porque todos os esquemas trabalham girando o matiz, e um tom sem saturação não tem matiz para girar: em cinza, preto ou branco, virar 120 ou 180 graus devolve o mesmo cinza. O monocromático ainda esbarra em limites de luminosidade — as duas amostras claras param em 92% e 85%, as escuras em 12% e 6% —, então uma base já muito clara gera duas faixas quase idênticas no topo. Comece de uma cor com alguma saturação para ver diferença entre os tons.

Ferramentas Relacionadas

🎨

Gerador de Tons de Cor

Gere tons (shades) e matizes (tints) de qualquer cor. Clique para copiar o código HEX, RGB ou HSL. Ideal para sistemas de design.

🎨

Misturar Cores

Misture duas cores e obtenha a cor resultante. Controle o peso percentual de cada cor. Resultado em HEX, RGB e HSL.

🖼️

Cores da Imagem

Carregue uma imagem e descubra a cor de qualquer pixel em tempo real. Passe o mouse para ver HEX, RGB e HSL com lupa. Extrai automaticamente a paleta de cores dominantes.

🔃

Inverter Cores da Imagem

Inverta todas as cores de uma imagem (efeito negativo). Cada pixel é substituído pelo seu complemento RGB. Processado no navegador.

🎨

Seletor de Cor

Escolha uma cor e obtenha os valores em HEX, RGB e HSL com um clique para copiar.

👁️

Verificador de Contraste (WCAG)

Verifique o contraste entre cor de texto e fundo conforme as diretrizes WCAG 2.1. Exibe a proporção e os níveis AA e AAA para texto normal e grande.