Gerador de paleta de cores

Pick a base color and get a harmonious palette instantly. Copy HEX, RGB and CSS values.

Resultado instantâneo Funciona no navegador

Dica: Clique em qualquer amostra de cor para copiar seu código HEX.

Informações de cor

HEX #3B82F6
RGB —
HSL —

Guia de harmonia de cores

Complementar180°
Análogo ±30–60°
Triádico 3 × 120°
Dividir 150° + 210°
Tetrádico 4 × 90°
Monocromático L: 15–85%

Como usar?

  1. 1
    Escolha uma cor baseUse o seletor de cores ou digite um código HEX (#RRGGBB) diretamente.
  2. 2
    Escolha um tipo de harmoniaSelect Complementar, Análogo, Triádico or another rule; palette updates instantly.
  3. 3
    Copie as coresClique em qualquer amostra para copiar seu HEX ou pegue todas as cores como propriedades personalizadas CSS.

Perguntas frequentes

O que é uma cor complementar?
It is the color directly opposite on the color wheel (180°). High contrast — ideal for CTA buttons.
Por que as cores análogas parecem harmoniosas?
Adjacent colors on the wheel (±30–60°) appear together in nature, perceived as calm and natural.
Quando devo usar uma paleta monocromática?
Light and dark variations of the same hue create a consistent, sophisticated look.

Gerador de paleta de cores

O gerador de paleta cria combinações a partir de uma cor base em formato HEX. Você pode escolher a cor no seletor visual ou digitar um código como #3B82F6. A ferramenta valida códigos de seis dígitos, converte a cor para RGB e HSL e mostra essas informações no painel lateral. A partir do matiz HSL, ela calcula harmonias por rotação de ângulo e variação de luminosidade.

Os modos disponíveis são complementar, análogo, triádico, split complementary, tetrádico e monocromático. Complementar usa a cor oposta a 180 graus. Análogo usa cores próximas ao matiz base. Triádico distribui três pontos a 120 graus. Tetrádico cria quatro pontos a 90 graus. O modo monocromático mantém o mesmo matiz e altera a luminosidade entre tons claros e escuros.

Cada amostra pode ser clicada para copiar o HEX. O botão de copiar tudo gera uma lista simples de cores, enquanto o botão CSS cria variáveis --color-1, --color-2 e assim por diante. Use a paleta como ponto de partida para UI, landing pages, gráficos ou branding, mas valide contraste, acessibilidade e consistência visual. Harmonia matemática ajuda, porém não substitui testes com texto real e estados de interface.

Verificação prática do resultado

Gerador de paletas deve ser tratado como um gerador de trabalho: ajuste os parâmetros, confira a prévia e copie apenas o resultado que atende ao formato necessário. A ferramenta cobre harmonias de cor, HEX/RGB/HSL e variáveis CSS; serve como ponto de partida a ser validado com contraste. Em códigos, cores, hashes, identificadores, senhas, JSON, QR ou códigos de barras, anote também as configurações usadas. Isso facilita repetir o processo, revisar uma decisão de design ou explicar a origem do resultado para outra pessoa da equipe.

A maior parte das operações acontece no navegador depois que a página é carregada, o que torna o uso rápido e sem conta. Mesmo assim, evite colar segredos de produção, senhas reais, chaves de API ou dados pessoais se você não tiver certeza de como o conteúdo será armazenado depois da cópia. Antes de usar em produção, teste no destino correto: CSS no componente real, JSON no parser da aplicação, QR ou código de barras em um leitor, senha em um gerenciador seguro. Essa verificação evita problemas de compatibilidade, caracteres especiais e quebras de formato.

Antes de considerar o resultado definitivo, copie-o para um ambiente de teste e confira espaços, acentos, tamanho e compatibilidade. Se a ferramenta gerar várias opções, escolha a que respeita as regras do projeto, da biblioteca usada e da experiência visual esperada.

Comentários