NordVPN
SponsoredVPN sem registros com mais de 6.400 servidores em 111 países. O Threat Protection bloqueia anúncios, rastreadores e malware.
Obter NordVPN →Gerador de Paleta de Cores (5 esquemas a partir de uma cor base)
Escolha uma cor base, selecione um esquema de teoria das cores e obtenha uma paleta coordenada. Clique nas amostras para copiar valores hex individuais, ou copie todos de uma vez para usar em ferramentas de design e variáveis CSS.
Paleta gerada
- #3BDFF6
- #3B82F6
- #513BF6
Ferramentas relacionadas
Como funciona
Os cinco esquemas de teoria das cores
Complementar: duas cores nos lados opostos da roda de cores (180° de distância). Alto contraste, vibrante. Usado para destaques, botões de call-to-action e criação de pontos focais.
Análogo: três cores adjacentes na roda (30° de distância). Harmonioso e agradável, baixo contraste. Comum na natureza; ótimo para fundos e superfícies de UI.
Triádico: três cores igualmente espaçadas (120° de distância). Vibrante e equilibrado. Usado em designs divertidos ou energéticos.
Tetrádico (retângulo): quatro cores formando um retângulo (90° de distância). Paleta rica, mas mais difícil de equilibrar — tipicamente use uma como dominante e as outras como destaques.
Monocromático: tons, matizes e sombras de um único matiz. Sofisticado e unificado. Comum em designs minimalistas e branding corporativo.
Escolhendo uma cor inicial
Cores de marca: a maioria dos projetos começa com um logotipo existente ou cor de marca. Teste-a como base nos 5 esquemas para encontrar o melhor ajuste para seu design.
Inspiração: escolha uma cor da fotografia, arte ou natureza. Cores vívidas (alta saturação, luminosidade média) funcionam melhor como base; cores muito pálidas ou muito escuras produzem paletas apagadas.
Acessibilidade: garanta que sua paleta final tenha contraste suficiente para texto. Use nosso verificador de contraste para confirmar que os pares de primeiro plano/plano de fundo atendem ao WCAG AA (4,5:1 para texto normal).
Usando a paleta
Variáveis CSS: defina as cores da paleta como variáveis :root (--color-primary, --color-accent etc.) para poder trocar temas mudando em um único lugar.
Ferramentas de design: cole os valores hex nas bibliotecas de cores do Figma, Sketch ou Adobe XD. A maioria das ferramentas aceita hex diretamente; algumas também aceitam HSL ou cores nomeadas CSS.
Limite o uso: mesmo com 5 cores, designs reais geralmente usam 2-3 com destaque e as outras com moderação. A regra 60-30-10 (60% dominante, 30% secundária, 10% destaque) é um ponto de partida útil.
Perguntas frequentes
›Qual esquema devo usar?
Análogo é a escolha mais segura para a maioria dos designs — três cores próximas criam harmonia sem monotonia. Complementar funciona bem para ênfase (botões CTA). Monocromático é melhor para marcas minimalistas/sofisticadas. Triádico para um visual divertido/energético.
›Posso obter mais de 5 cores?
Não desta ferramenta — geramos os esquemas canônicos de 2-5 cores. Para paletas maiores, use a saída análoga e crie sombras monocromáticas de cada uma (combine esquemas).
›O algoritmo usa espaço de cores perceptualmente uniforme?
Usamos matemática HSL, que é rápida e previsível. Para resultados perceptualmente uniformes (melhor para paletas ajustadas para acessibilidade), ferramentas avançadas usam OKLCH ou CIELAB. HSL é suficiente para a maioria dos trabalhos de design.
›Minha paleta será acessível?
Não automaticamente. Esquemas de teoria das cores garantem harmonia estética, não contraste para texto. Sempre verifique as combinações texto-sobre-fundo com nosso verificador de contraste antes de publicar.
›Posso salvar minhas paletas favoritas?
Ainda não — copie os códigos hex para seu sistema de design ou notas. URLs de paleta que podem ser salvas como favoritos estão no roteiro.
›E as paletas do Material Design ou Tailwind?
Esses são sistemas pré-curados. Gere um esquema base aqui, depois pesquise cores similares do Material/Tailwind. Alguns aplicativos exportam códigos hex diretamente compatíveis com esses sistemas.
›Por que minha paleta parece 'sem vida'?
Se sua cor base é muito pálida (alta luminosidade) ou muito escura (baixa luminosidade), a paleta gerada tem alcance dinâmico limitado. Escolha uma base com luminosidade média (40-60%) e alta saturação (70%+) para resultados vívidos.
›Os dados saem do meu navegador?
Não. Todos os cálculos são feitos localmente; nada é enviado a um servidor.
Serviços recomendados
DivulgaçãoCloudways
SponsoredHospedagem cloud gerenciada em DigitalOcean, AWS ou GCE — servidores prontos em minutos, sem administração de sistemas.
Testar Cloudways →