O que é um círculo cromático e para que serve?

O círculo cromático (ou roda de cores) é uma representação visual das cores organizadas em formato circular, mostrando as relações entre cores primárias, secundárias e terciárias. É uma ferramenta essencial para designers, artistas e desenvolvedores criarem paletas de cores harmoniosas e descobrirem quais cores combinam entre si.

Como usar o círculo cromático online?

Clique em qualquer ponto da roda de cores para selecionar a matiz (hue), depois ajuste saturação e luminosidade com os sliders. Escolha o tipo de harmonia desejada — a paleta de 5 cores é gerada automaticamente. Use Matiz para mudar a cor base, Saturação para vivacidade e Luminosidade para tom claro/escuro.

Quais harmonias de cores estão disponíveis?

A ferramenta oferece 6 tipos de harmonias cromáticas: Complementar (cores opostas no círculo, alto contraste), Análoga (cores vizinhas, sensação harmoniosa), Triádica (3 cores equidistantes, vibrante e equilibrada), Tetrádica (4 cores equidistantes, rica em variedade), Monocromática (variações de uma única cor, elegante) e Split-complementar (variação suave da complementar).

Como descobrir quais cores combinam?

Selecione uma cor base no círculo cromático e escolha o tipo de harmonia. A ferramenta calcula automaticamente as cores que combinam. Por exemplo, a harmonia complementar mostra a cor oposta (azul combina com laranja), a análoga mostra cores vizinhas (azul com azul-verde e azul-violeta), e a triádica mostra 3 cores equilibradas.

Posso copiar os códigos de cores em HEX, RGB e HSL?

Sim. Cada cor exibe HEX (#FF6B6B), RGB (rgb(255, 107, 107)) e HSL (hsl(0, 100%, 71%)). Clique em qualquer valor para copiar. Também é possível exportar a paleta completa como arquivo CSS (variables :root), JSON ou imagem PNG.

Como exportar a paleta para usar no meu projeto?

Use os botões CSS, JSON ou PNG abaixo da paleta. CSS baixa um arquivo com variáveis (:root) pronto para colar no seu stylesheet. JSON é estruturado para uso programático. PNG gera uma imagem da paleta para compartilhar em apresentações ou redes sociais.

A paleta personalizada salva minhas cores?

Sim. A paleta personalizada é salva automaticamente no seu navegador (localStorage). Quando você voltar à página, suas cores ainda estarão lá. Use o cadeado para travar cores específicas antes de gerar uma paleta aleatória — as travadas não mudam.

Qual a diferença entre HEX, RGB e HSL?

HEX (#FF6B6B) é o formato mais usado em web/CSS — 6 dígitos hexadecimais. RGB (255, 107, 107) define a cor pela mistura de Vermelho, Verde e Azul (0-255 cada). HSL (0°, 100%, 71%) é mais intuitivo: Matiz (cor pura), Saturação (intensidade) e Luminosidade (claro/escuro). Os 3 representam a mesma cor, em formatos diferentes.

O que é cor complementar?

Cores complementares são opostas no círculo cromático (180° de diferença). Geram o maior contraste possível: azul × laranja, vermelho × verde, amarelo × roxo. Use em pequenas doses para destaque (botão CTA em fundo neutro). Em proporções iguais, podem vibrar demais.

Cores análogas funcionam para quê?

Cores análogas são vizinhas no círculo cromático (15-30° de diferença), como azul, azul-violeta e violeta. Criam paletas suaves e coesas, ideais para fundos, marcas elegantes e ambientes relaxantes. Falta contraste para CTAs — combine com uma cor complementar de destaque.

Posso usar a paleta para acessibilidade web (WCAG)?

Sim, mas verifique o contraste depois. Para texto sobre fundo, a relação de contraste mínima é 4.5:1 (texto normal) ou 3:1 (texto grande), segundo o WCAG AA. Ferramentas como WebAIM Contrast Checker validam isso. Cores complementares e tons escuros sobre claros (e vice-versa) costumam atingir esse contraste.

Como escolher uma paleta de cores para meu site?

Comece pela cor da marca (cor primária). Use harmonia análoga para variações suaves dela e complementar para 1-2 cores de destaque (CTA, links). Reserve neutros (cinzas, branco, preto) para texto e fundos. Regra 60-30-10: 60% cor dominante, 30% secundária, 10% destaque.

Posso extrair as cores de uma imagem (foto, logo)?

Sim. Vá na aba 'Extrair de Imagem', envie uma foto e a ferramenta extrai automaticamente uma paleta de 3 a 8 cores usando inteligência artificial (algoritmo k-means) rodando 100% no seu navegador. Útil para criar marcas a partir de uma foto de inspiração ou extrair as cores de um logotipo. Sua imagem não vai para servidor nenhum.

Como funciona a extração de cores de imagem?

Usamos o algoritmo k-means (o mesmo do Adobe Color e Coolors): a ferramenta analisa todos os pixels da imagem e agrupa em N clusters de cores parecidas, devolvendo o centroide (cor média) de cada grupo. Filtramos pixels muito claros/escuros (fundos brancos/pretos) pra não dominar o resultado. Você escolhe quantas cores quer (3, 5, 6 ou 8) e o resultado pode ser aplicado direto na Paleta Personalizada.

O gerador de paleta de cores é gratuito?

Sim, 100% gratuito, sem cadastro, sem limite de uso, sem marca d'água. Funciona direto no navegador — suas paletas personalizadas são salvas localmente.

Círculo Cromático Online Grátis 2026 — Paleta de Cores e Harmonias

Círculo Cromático e Paleta de Cores Online Grátis

Crie paletas de cores profissionais com o círculo cromático interativo, escolha entre 6 tipos de harmonias e exporte em CSS, JSON ou PNG. Cada cor mostra o nome em português, HEX, RGB e HSL — pronto para usar em design, sites, marca e materiais gráficos. 100% no navegador, sem cadastro.

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

Harmonia	Como funciona	Quando usar
Complementar	Cores opostas no círculo (180°)	CTA, destaque, vibração
Análoga	Cores vizinhas (15-30°)	Marcas elegantes, fundos suaves
Triádica	3 cores equidistantes (120°)	Designs vibrantes e equilibrados
Tetrádica	4 cores em retângulo (90°)	Composições ricas, ilustração
Monocromática	Tons da mesma matiz	Identidade visual minimalista
Split-complementar	Cor base + 2 vizinhas da complementar	Contraste suave, mais equilibrado

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.

Paleta de Cores