ZenovayTools

Gerador de Paleta de Cores

Gere paletas de cores harmoniosas a partir de uma cor base. Crie esquemas complementares, análogos, triádicos, tetradicos e monocromáticos com códigos hex/RGB/HSL.

Color harmony

Generated Palette

Base

hsl(217, 91%, 60%)

#3C83F6

Complement

hsl(37, 91%, 60%)

#F6AF3C

CSS Variables

:root {
  --color-1: #3C83F6;
  --color-2: #F6AF3C;
}

Como Usar Gerador de Paleta de Cores

  1. 1Insira uma cor base usando o seletor de cores ou entrada hex.
  2. 2Escolha um tipo de harmonia: complementar, análogo, triádico, etc.
  3. 3Veja a paleta gerada com todos os códigos de cores.
  4. 4Copie cores individuais ou as variáveis de paleta completa.
ZenovayAnalytics

Transforme seu tráfego em clientes.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

O que é harmonia de cores?▾
Harmonia de cores é a combinação esteticamente agradável de cores com base em suas posições na roda de cores. Os principais tipos: Complementares (cores opostas, alto contraste — ex.: azul + laranja), Análogas (cores adjacentes, harmoniosas — ex.: azul, azul-verde, verde), Triádicas (3 cores igualmente espaçadas a 120° — ex.: vermelho, amarelo, azul), Tetrádicas/Quadradas (4 cores a 90° de distância), Complementares divididas (base + duas cores adjacentes ao seu complemento). Monocromáticas usam tons e matizes de uma única cor.
Como funcionam as cores complementares?▾
Cores complementares são diretamente opostas na roda de cores (a 180°). Exemplos: vermelho + verde, azul + laranja, amarelo + roxo. Quando colocadas lado a lado, criam contraste máximo — cada uma torna a outra mais vívida. Usar demais o par complementar é opressivo; use uma como dominante (70%) e a outra como destaque (30%). Cores análogas (a 15–30°) são mais fáceis de combinar, mas menos dinâmicas.
O que é a regra 60-30-10?▾
A regra 60-30-10 é um princípio de design para uso equilibrado de cores: 60% cor dominante (geralmente neutra ou da marca), 30% cor secundária (complementa a dominante), 10% cor de destaque (para ênfase, chamadas para ação, realces). Isso cria hierarquia visual e evita que qualquer cor sobrecarregue o design. Exemplo: 60% branco, 30% azul-marinho, 10% laranja vivo. A proporção garante que os olhos se movam naturalmente pela composição.
O que são tints, shades e tones?▾
Tint: uma cor misturada com branco — aumenta a luminosidade. Shade: uma cor misturada com preto — diminui a luminosidade. Tone: uma cor misturada com cinza — reduz a saturação. Em HSL: tints aumentam L em direção a 100%, shades diminuem L em direção a 0%, tones diminuem S em direção a 0%. Sistemas de design (Tailwind, Material, Radix) usam uma escala de 10 tints/shades (50–950) para cada cor base. Isso cria peso visual consistente nos elementos de UI.
Como escolho cores acessíveis?▾
O WCAG 2.1 exige uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18pt/14pt negrito) em relação ao fundo. Razão de contraste = (L1 + 0,05) / (L2 + 0,05), onde L é a luminância relativa. Ferramentas: verifique cada par de cores. Consideração para modo escuro: uma cor legível no branco pode não ser no preto — sempre teste os dois. Evite depender apenas de cor para significado (vermelho=erro, verde=sucesso) — use também ícones ou rótulos de texto.