#3B82F6
#f6af3b
#af3bf6
#f63b82
#f6af3b
#3B82F6
59, 130, 246
217°, 91%, 60%
Blue
#f6af3b
246, 175, 59
37°, 91%, 60%
Orange
#af3bf6
175, 59, 246
277°, 91%, 60%
Purple
#f63b82
246, 59, 130
337°, 91%, 60%
Pink
#f6af3b
246, 175, 59
37°, 91%, 60%
Orange
Como usar Gerador de Paleta de Cores
- 1
Escolha a cor base
Defina a cor principal do seu projeto.
- 2
Gere a paleta
As cores relacionadas são calculadas a partir da base.
- 3
Copie os códigos
Use os valores hexadecimais no seu design ou CSS.
Sobre a ferramenta
Uma paleta define a personalidade visual de um projeto. Escolher cores uma a uma costuma produzir combinações que brigam entre si; partir de uma cor base e derivar as outras por relações do círculo cromático dá um resultado coerente.
As relações mais úteis são poucas: cores análogas (vizinhas) transmitem harmonia; complementares (opostas) criam contraste forte; triádicas equilibram vivacidade e equilíbrio. Escolher a relação certa é escolher o clima do projeto.
Uma regra prática ajuda a aplicar: 60% da área com a cor dominante, 30% com a secundária, 10% com a de destaque. É a proporção que evita interfaces onde tudo grita ao mesmo tempo.
Quando usar
- Definir as cores de uma marca nova
- Montar o tema de um site ou aplicativo
- Criar variações harmônicas a partir da cor do logotipo
- Escolher cores para gráficos e apresentações
- Encontrar tons de apoio para uma cor principal já definida
Perguntas frequentes
Quantas cores uma paleta deve ter?
Três a cinco costuma bastar: uma dominante, uma secundária, uma de destaque e um ou dois neutros para texto e fundo.
As cores geradas têm contraste suficiente para texto?
Nem sempre. Para texto, confira o contraste com o fundo — as diretrizes de acessibilidade pedem uma relação mínima de 4,5 para 1.
Posso usar essas cores comercialmente?
Sim. Cores não são protegidas por direitos autorais; apenas evite copiar a identidade visual completa de uma marca existente.