Gráficos / Cor

Gerador de paleta de cores: combinações harmoniosas em um clique

Gere paletas de cores com base na teoria das cores: análogas, complementares, tríades, complementares divididas, monocromáticas ou aleatórias, com três a oito cores. Bloqueie as que quiser e gere novamente as outras, confira o contraste de cada cor com o branco e exporte a paleta como variáveis CSS, configuração do Tailwind, JSON, códigos hexadecimais ou PNG.

Gerador de paleta de cores: combinações harmoniosas em um clique: Cada paleta começa com um matiz-base, definido a partir de uma cor bloqueada, se houver, e posiciona os outros matizes de acordo com a regra escolhida: passos de 30° para cores análogas, o matiz oposto para cores complementares, passos de 120° para tríades, 150° para cada lado nas complementares divididas ou um único matiz do escuro ao claro para cores monocromáticas. A luminosidade e a saturação variam para que o conjunto tenha cores claras, intermediárias e escuras, e cada cor mostra sua proporção de contraste WCAG com o branco. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Área de paleta de coresProcessamento local

Roda inteiramente no seu navegador

HarmoniaCores

Ou pressione a barra de espaço. Bloqueie as cores que você quer manter.

#64A6F52.5:1 em branco

#382B9D10.5:1 em branco

#772BB77.5:1 em branco

#BE4BBA4.3:1 em branco

#E0367B4.2:1 em branco

Exportar como

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Como usar uma paleta

Uma divisão comum é usar cerca de 60% de uma cor neutra, 30% de uma segunda cor e 10% de uma cor de destaque, para que a cor mais forte seja usada com moderação em botões e destaques.

Contraste

4,5:1 é o mínimo da WCAG AA para texto normal e 3:1 para texto grande; 7:1 atende à AAA.

Como usar

Escolha uma harmonia e o número de cores.
Pressione gerar ou a barra de espaço até encontrar uma combinação de que goste; bloqueie as cores que quiser manter.
Copie a paleta como código ou baixe-a como PNG.

Privacidade e limitações

Tudo é gerado no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Como mantenho uma cor de que gostei?

Clique no botão de bloqueio da cor. As cores bloqueadas permanecem no lugar, e a primeira também define o matiz-base em torno do qual as outras são criadas.

Posso usar a cor da minha marca?

Sim: clique em uma amostra para defini-la como qualquer cor, bloqueie-a e gere as outras a partir dela.

O texto da paleta fica legível?

Cada amostra mostra sua proporção de contraste com o branco. A WCAG exige pelo menos 4.5:1 para texto normal; portanto, uma cor abaixo desse valor precisa de texto escuro sobre ela.

Ferramenta grátis · no seu navegador execuções · não precisa de conta