Círculo Cromático Online e Paleta de Cores

O que é o círculo cromático

O círculo cromático (também chamado de roda de cores ou color wheel) é a base da teoria das cores: uma representação circular onde as cores são organizadas em sequência do espectro visível. Foi criado por Isaac Newton em 1666 e serve para entender as relações entre cores — quais combinam, quais contrastam, quais geram harmonia.

O círculo padrão tem 12 cores divididas em:

• 3 primárias — vermelho, amarelo e azul.
• 3 secundárias — laranja, verde e violeta (misturas das primárias).
• 6 terciárias — vermelho-laranja, amarelo-laranja, amarelo-verde, azul-verde, azul-violeta, vermelho-violeta.

As 6 harmonias cromáticas

HEX, RGB, HSL: qual usar?

• HEX (#FF6B6B) — padrão em CSS/web. Compacto, fácil de copiar e colar. Use por padrão em estilos e variáveis.
• RGB (rgb(255, 107, 107)) — usado por editores de imagem (Photoshop, GIMP) e quando você precisa controlar a transparência (rgba).
• HSL (hsl(0, 100%, 71%)) — mais intuitivo: Matiz (cor), Saturação (vivacidade) e Luminosidade (claro/escuro). Ótimo para gerar tons programaticamente — basta variar o L.

Extrair paleta de uma imagem (com IA)

Tem uma foto, logo ou referência visual e quer descobrir as cores dela? Na aba "Extrair de Imagem", envie um arquivo (PNG, JPG, WebP) e a ferramenta extrai automaticamente uma paleta de 3 a 8 cores — o mesmo recurso do Adobe Color e Coolors.

Funciona com o algoritmo k-means clustering: ele analisa todos os pixels da imagem, agrupa em clusters de cores parecidas e devolve a cor média de cada grupo. Para evitar que fundos brancos/pretos dominem o resultado, pixels muito claros ou muito escuros são filtrados antes da análise.

Casos de uso: criar marca a partir de uma foto de inspiração, extrair as cores de um logotipo concorrente, montar paleta para fotomontagem ou tema do site baseado numa imagem hero. Todo o processamento é local — sua imagem nunca sai do navegador.

Exportar paleta: CSS, JSON ou PNG

Depois de criar a paleta, exporte em 3 formatos diferentes:

• CSS — arquivo paleta.css com as cores como variáveis dentro do :root. Cola direto no seu projeto e usa como var(--cor-1).
• JSON — arquivo estruturado para uso programático (importar em apps, processar com scripts, gerar documentação de design tokens).
• PNG — imagem com todas as cores em swatches + códigos HEX. Útil para mostrar a paleta em apresentações, briefings com cliente ou redes sociais.

Regra 60-30-10 para aplicar paletas

Uma das regras mais consagradas em design — usada em decoração, web design, branding:

• 60% — cor dominante (fundos, áreas grandes).
• 30% — cor secundária (elementos médios, blocos).
• 10% — cor de destaque (CTAs, alertas, ícones).

Ela evita o erro mais comum: usar todas as cores da paleta com mesmo peso, deixando o design "barulhento" e sem hierarquia.

Para quem é esta ferramenta

• Designers — paletas para identidade visual, ilustração, social media.
• Desenvolvedores web — variáveis CSS prontas, escolha de tema (light/dark).
• Artistas — referência de harmonia para pintura digital ou tradicional.
• Decoração e arquitetura — combinar tintas (paleta de cores Suvinil, Coral, etc).
• Conteúdo e marketing — cores que reforçam a identidade da marca em posts e anúncios.

Precisa converter uma imagem para extrair cores? Use o Conversor de Imagem. Para remover o fundo de uma foto antes de combinar com a paleta, veja o Removedor de Fundo.