Pular para o conteúdo
SPCXTools

Gerador de Paleta de Cores

Escolha uma cor e obtenha uma paleta harmoniosa de cinco cores baseada na teoria das cores.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Gerador de Paleta de Cores

  1. 1Escolha uma cor base no seletor, digite um valor HEX/RGB/HSL ou clique em Aleatório.
  2. 2Escolha um esquema de cores como complementar, análogo ou triádico.
  3. 3Clique em qualquer amostra para copiar seu código HEX.
  4. 4Copie a paleta inteira como propriedades personalizadas do CSS ou JSON.

Crie uma paleta de cores a partir de uma cor

Escolher cores que combinam é uma das partes mais difíceis na hora de criar um site, aplicativo, apresentação, logotipo ou pôster. A teoria das cores oferece relações comprovadas entre as cores no círculo cromático, e este gerador de paletas aplica essas regras para você. Comece com uma cor que você gosta — ou a cor da sua marca —, escolha um esquema e obtenha cinco cores harmoniosas prontas para copiar para o seu projeto.

Recursos

  • Sete esquemas: complementar, análogo, triádico, complementar dividido, tetrádico, monocromático e tons.
  • Qualquer cor inicial em HEX, RGB, HSL ou nome de cor CSS, ou escolha uma cor aleatória.
  • Clique para copiar qualquer amostra.
  • Exporte como propriedades personalizadas CSS ou um array JSON.
  • Rótulos legíveis que alternam entre preto e branco para garantir o contraste.

Qual esquema usar?

Esquema Sensação Ideal para
Complementar Ousado, alto contraste Botões de call-to-action, esportes, vendas
Análogo Calmo, harmonioso Natureza, bem-estar, planos de fundo
Triádico Vibrante, equilibrado Produtos infantis, ilustrações
Complementar dividido Vívido, mas menos tenso Sites que precisam de um destaque forte
Tetrádico Rico, colorido Infográficos e gráficos
Monocromático Elegante, minimalista Sites corporativos, portfólios
Tons Sistemático Design systems, estados de UI

Da paleta ao design

Com a paleta pronta, verifique se o texto está legível em qualquer fundo com o Verificador de Contraste de Cores, converta as cores para RGB, HSL ou CMYK para impressão com o Conversor de Cores, e transforme duas delas em um fundo suave com o Gerador de Gradiente CSS.

Perguntas frequentes

O que é um esquema de cores complementares?
As cores complementares ficam em lados opostos no círculo cromático, como azul e laranja. O forte contraste destaca elementos e chamadas para ação. Use uma cor como principal e a complementar com moderação.
Qual é a diferença entre cores análogas, triádicas e tetrádicas?
Cores análogas são vizinhas no círculo cromático e transmitem calma e coesão. Cores triádicas têm um espaçamento igual de 120° e são vibrantes, mas equilibradas. Paletas tetrádicas (em quadrado) usam quatro tons com 90° de distância e são as mais coloridas — geralmente funcionam melhor com uma cor dominante.
Como devo usar uma paleta de cinco cores em um site?
Uma abordagem comum é a regra 60-30-10 — cerca de 60% de fundo neutro, 30% de cor primária e 10% de destaque. Use a cor mais escura para o texto e verifique cada combinação de texto e fundo com um verificador de contraste.
Posso começar a partir da cor da minha marca?
Sim. Insira o código HEX da sua marca como cor base; todos os esquemas são criados a partir dela. Para extrair a cor da marca de um logotipo ou captura de tela de um site, use o Seletor de Cores de Imagem.
Como as cores são calculadas?
A cor base é convertida para HSL (matiz, saturação, luminosidade). Os esquemas giram o matiz em ângulos fixos no círculo cromático, enquanto paletas monocromáticas e tons mantêm o matiz e variam a luminosidade.

Ferramentas relacionadas

Verificador de Contraste de CoresVerifique se o seu texto está legível — e obtenha a cor mais próxima que passa na WCAG.Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e CMYK e verifique seu contraste.Seletor de Cores de ImagemClique em qualquer lugar de uma imagem para obter sua cor exata em HEX, RGB e HSL — além da sua paleta de cores principal.Gerador de Gradiente CSSCrie um fundo gradiente visualmente e copie o CSS — linear, radial ou cônico.Gerador de Box ShadowAjuste sombras suaves, nítidas, em camadas ou internas com visualização em tempo real e copie o CSS.Simulador de DaltonismoVisualize suas imagens através dos olhos de alguém com deficiência de visão de cores para garantir que seus designs sejam acessíveis.