Htmly
Design & Assets

Gerador de Paleta de Cores

Escolha uma cor base e gere paletas complementares, análogas e triádicas para seu projeto.

1 usos

HSL: 243, 75%, 59%

Complementar

Cores opostas no circulo cromatico

Analogas

Cores vizinhas no circulo cromatico

Triadica

Tres cores equidistantes no circulo

Dividida-complementar

Base + vizinhas da complementar

Monocromatica

Variacoes de luminosidade da mesma cor

Tetradica

Quatro cores formando um retangulo

Variaveis CSS
:root {
  --color-primary: #4F46E5;
  --color-complementary: #dde548;
  --color-analogous-1: #488fe5;
  --color-analogous-2: #9e48e5;
  --color-triadic-1: #e55048;
  --color-triadic-2: #48e550;
}

Como usar o Gerador de Paleta de Cores

  1. 1

    Escolha a cor base

    Selecione uma cor usando o seletor de cores ou digite o código hexadecimal diretamente no campo de entrada.

  2. 2

    Selecione o tipo de paleta

    Explore as paletas geradas automaticamente: complementar, análogas, triádica, dividida-complementar, monocromática e tetrádica.

  3. 3

    Copie as cores

    Clique em qualquer cor para copiar o código hexadecimal. Use as variáveis CSS geradas diretamente no seu projeto.

O que é uma paleta de cores?

Uma paleta de cores é um conjunto de cores selecionadas para funcionar harmoniosamente juntas em um projeto de design. Baseada na teoria das cores e no círculo cromático, uma boa paleta cria equilíbrio visual e transmite a mensagem certa. Cores complementares (opostas no círculo) criam contraste forte, cores análogas (vizinhas) transmitem harmonia suave, e cores triádicas oferecem equilíbrio com variedade. Escolher a paleta certa é fundamental para a identidade visual do seu site, afetando a percepção da marca, a legibilidade do conteúdo e a experiência geral do usuário.

Perguntas frequentes

Qual tipo de paleta devo usar no meu site?
Para a maioria dos sites, comece com uma paleta monocromática ou análoga para um visual harmonioso. Use cores complementares para destacar botões e chamadas para ação (CTAs). A paleta triádica funciona bem para sites mais vibrantes e criativos.
Quantas cores uma paleta deve ter?
A maioria dos projetos web funciona bem com 3 a 5 cores: uma cor primária, uma secundária, uma de destaque (accent) e tons neutros para texto e fundos. Menos é mais — paletas simples são mais fáceis de manter consistentes.
Como garantir que as cores são acessíveis?
Verifique o contraste entre texto e fundo usando o padrão WCAG. O mínimo recomendado é uma razão de contraste de 4.5:1 para texto normal. Use nosso Verificador de Contraste WCAG para testar suas combinações.
Posso usar as variáveis CSS geradas diretamente?
Sim! As variáveis CSS geradas seguem o formato padrão var(--nome) e podem ser copiadas diretamente para o seu arquivo CSS. Elas facilitam a manutenção e a consistência das cores em todo o site.

Publique seu site HTML em 30 segundos

Publicar agora