256 Tools

Gerador de Paleta de Cores — Esquemas Harmônicos a partir de um HEX (Grátis, CSS/Tailwind)

#7C3BEDAa AA: aprovado 5.67:1
#3BACEDAa AA: aprovado 8.31:1
#3B53EDAa AA: aprovado 5.76:1
#D53BEDAa AA: aprovado 5.68:1
#ED3BACAa AA: aprovado 5.82:1
38
A barra de espaço também regenera (quando não há campo ativo)

Ajustar cor selecionada

#7C3BED

Exportar paleta

:root {
  --color-1: #7C3BED;
  --color-2: #3BACED;
  --color-3: #3B53ED;
  --color-4: #D53BED;
  --color-5: #ED3BAC;
}

Ferramentas externas relacionadas

Alguns links são links de afiliados.

Adobe ColorRoda de cores e temasCanvaDesign gráfico fácil

Ferramentas relacionadas

Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e RGBA ao mesmo tempo. Edite um valor, copie com um clique, com alfa e contraste WCAG.Gerador de GradienteCrie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor. Ajuste ângulo, forma e centro, e copie o CSS de background ou o valor do Tailwind com um clique.Extrator de Cores de ImagemExtraia a paleta de cores dominantes de qualquer imagem no seu navegador, sem enviar nada. Obtenha HEX, RGB e porcentagem (%) de cada cor, escolha quantas cores e exporte como CSS/JSON.Ferramenta de combinação de fontesEncontre combinações curadas do Google Fonts para título e corpo, visualize em tempo real e copie o CSS com um clique.

Este gerador de paleta de cores gratuito cria combinações cromáticas harmônicas a partir de uma cor base, seguindo a teoria das cores. Digite um código HEX, escolha uma cor com o seletor ou clique em Aleatório — depois selecione um esquema como complementar, análogo, triádico, tetrádico ou monocromático para gerar instantaneamente uma paleta equilibrada. Trave as cores que gostar e regenere o resto, ajuste luminosidade e saturação com controles deslizantes, copie qualquer HEX com um clique ou exporte toda a paleta como variáveis CSS, cores do Tailwind ou JSON. Tudo funciona no seu navegador — suas cores nunca são enviadas para um servidor.

Como usar

  1. Digite um código HEX (ex.: #7C3AED) ou um nome de cor CSS (ex.: rebeccapurple) no campo Cor base, use o seletor de cor ou clique em Aleatório para começar de uma cor aleatória.
  2. Escolha um esquema — Complementar, Análogo, Triádico, Tetrádico, Complementar dividida ou Monocromático — e a paleta se atualiza instantaneamente.
  3. Defina o número de cores (3–8) com o controle deslizante.
  4. Clique no ícone de cadeado de qualquer cor para travá-la. Clique em Regenerar (ou pressione Espaço fora de um campo) para embaralhar apenas as desbloqueadas.
  5. Selecione uma amostra e use os controles de Luminosidade / Saturação para ajustá-la. Mude o escopo para 'Todas as cores' para ajustar toda a paleta relativamente.
  6. Copie um HEX com o ícone de copiar, ou use 'Copiar todos os HEX'. Na aba Exportar, escolha o formato e copie ou baixe.
  7. Use 'Copiar URL da paleta' para compartilhar esta combinação exata.

Esquemas de cores (harmonia cromática)

Um esquema de cores é uma regra para escolher cores que pareçam harmoniosas juntas, com base em suas posições no círculo cromático. As relações de matiz são a base; as variações de luminosidade e saturação acrescentam vida.

Círculo cromático com 12 matizes em intervalos de 30 grausCírculo cromático

Complementar

Duas cores diretamente opostas no círculo (+180°). Alto contraste e chamativo. Ideal para acentos que se destacam.

Complementar dividida

A cor base mais os dois vizinhos do seu complementar (+150°/+210°). Tensão mais suave que o complementar e mais fácil de equilibrar.

Análogo

Matizes adjacentes (±30°). Coeso e calmo, ótimo para fundos e histórias de cor naturais.

Triádico

Três matizes igualmente espaçados pelo círculo (+120°/+240°). Equilibrado e vibrante — forte e versátil.

Tetrádico

Quatro matizes em intervalos de 90° formando um retângulo. Rico e variado; requer equilibrar cuidadosamente tons quentes e frios.

Monocromático

Variações de luminosidade e saturação de um único matiz. O esquema mais seguro — sempre coeso e sem riscos.

Dica: se não tiver certeza, comece com Análogo ou Monocromático — são os mais difíceis de dar errado.

Recursos

Gerar a partir de uma cor base ou aleatoriamente

Digite qualquer HEX, nome CSS ou use o seletor para definir uma cor base, e deixe o esquema gerar o resto. Ou clique em Aleatório para um ponto de partida completamente novo.

Travar cores e regenerar o resto

Encontrou uma cor que gosta? Clique no cadeado para fixá-la. Regenerar (ou Espaço) embaralha apenas os slots desbloqueados — rápido para explorar variações.

Ajuste fino de luminosidade e saturação

Selecione uma amostra e arraste os controles de Luminosidade ou Saturação para ajustá-la com precisão, sem tocar na harmonia de matizes. Use 'Todas as cores' para deslocar toda a paleta.

Copiar HEX com um clique

Clique no ícone de copiar em qualquer amostra para copiar seu HEX instantaneamente para a área de transferência. Use 'Copiar todos os HEX' para pegar todas as cores de uma vez.

Exportar para variáveis CSS, Tailwind ou JSON

Abra a aba Exportar e escolha seu formato. Variáveis CSS gera um bloco :root (--color-1, --color-2…). Tailwind gera um bloco theme.extend.colors pronto para colar. JSON gera um array simples. Os valores de cor são sempre HEX em maiúsculas, nunca formatados para localidade.

Sugestões de contraste e legibilidade

Cada amostra mostra se texto branco ou preto é mais legível sobre ela, a taxa de contraste WCAG e um selo de aprovado/reprovado para AA — mostrado com cor e texto, não apenas com cor.

Casos de uso

Definir cores de marca a partir de um HEX de logo

Cole o HEX primário da sua marca, escolha Análogo ou Complementar e obtenha instantaneamente candidatos para cor de destaque, fundo e texto que harmonizam com seu logo.

Colar diretamente no CSS / Tailwind

Exporte como variáveis CSS (:root { --color-1: ... }) ou bloco theme.extend.colors do Tailwind e cole diretamente no seu código — sem conversão manual.

Verificar acessibilidade de cores

Use as sugestões de legibilidade de cada amostra para verificar se o texto atende ao WCAG AA (4.5:1 de contraste). Identifique cores problemáticas antes de construir.

Notas e dicas

  • Os esquemas fornecem um ponto de partida harmonioso, não um resultado garantido. A paleta certa sempre depende do contexto, das proporções e dos tons específicos que você usar.
  • O contraste é um guia: o cálculo WCAG é preciso, mas a legibilidade real também depende do tamanho e peso da fonte e das cores ao redor.
  • Paletas monocromáticas podem parecer dessaturadas em valores de luminosidade extremos — isso é esperado. Manter a saturação base moderadamente alta ajuda.
  • Seus dados de cor nunca são enviados para um servidor. O compartilhamento funciona codificando a paleta na URL — apenas o que você copia deliberadamente sai do seu dispositivo.

Perguntas frequentes

Posso gerar uma paleta de cores a partir de um código HEX?
Sim. Digite qualquer código HEX (com ou sem #) no campo Cor base e a ferramenta gera instantaneamente uma paleta harmônica usando o esquema selecionado. Nomes de cor CSS como 'rebeccapurple' também funcionam.
Quais esquemas de cores posso escolher?
Seis: Complementar (+180°), Complementar dividida (+150°/+210°), Análogo (±30°), Triádico (+120°/+240°), Tetrádico (+90° cada) e Monocromático (um único matiz com luminosidade variável). Todos seguem a teoria das cores padrão.
Posso travar uma cor e regenerar apenas o resto?
Sim. Clique no ícone de cadeado em qualquer amostra para fixá-la. Clicar em Regenerar ou pressionar Espaço embaralha apenas os slots desbloqueados.
Posso exportar para variáveis CSS, Tailwind ou JSON?
Sim. Na aba Exportar, escolha o formato: variáveis CSS (:root { --color-1: #...; }), configuração Tailwind (theme.extend.colors → palette: { 1: '#...', ... }) ou JSON ({ "palette": ["#...", ...] }). Cada um pode ser copiado ou baixado.
Quantas cores a paleta pode ter?
De 3 a 8. Use o controle deslizante para escolher. Quando o esquema tem menos matizes-chave do que o solicitado, os slots extras são preenchidos com variações de luminosidade (tints e sombras).
Posso verificar se o texto é legível em cada cor?
Sim. Cada amostra mostra a cor de texto recomendada (branco ou preto), a taxa de contraste WCAG e um rótulo de aprovado/reprovado para AA — em texto, não apenas em cor.
Minhas cores são enviadas para um servidor?
Não. Toda geração de paleta, ajuste, cálculo de contraste e exportação acontece inteiramente no seu navegador. Suas cores nunca são enviadas ou armazenadas.

Usamos cookies para anúncios e análises.