Extrair Paleta de Cores Online
Extraia as cores dominantes de qualquer imagem de graça, direto no navegador.
.jpg, .png, .webp · até 50 MB
Por que usar
Paletas de design extraídas de imagens reais
HEX, RGB e HSL
Obtenha códigos nos três formatos mais usados, prontos para copiar.
100% privado
A análise acontece no seu navegador. Sua imagem nunca sai do seu dispositivo.
Algoritmo preciso
Quantização de cor com Median Cut para cores representativas e equilibradas.
Instantâneo
Paleta gerada em menos de 1 segundo. Sem filas, sem cadastro, sem limites.
Como funciona
Três passos, sem complicação
Envie sua imagem
Arraste ou selecione um arquivo JPG, PNG ou WebP. Até 50 MB. Sem cadastro.
Analise a paleta
O algoritmo extrai automaticamente as cores mais representativas. Ajuste o número de cores se necessário.
Copie os códigos de cor
Obtenha valores HEX, RGB e HSL para cada cor. Prontos para usar no seu design.
Perguntas frequentes
Ficou com dúvidas?
Quantização de cor é o processo de reduzir o número de cores distintas em uma imagem, mantendo a aparência visual o mais fiel possível. Uma imagem fotográfica pode conter milhões de cores únicas; a quantização as agrupa em um conjunto representativo (por exemplo, 8 ou 16 cores). O algoritmo mais clássico é o Median Cut, desenvolvido por Paul Heckbert em 1982: ele divide o espaço de cores 3D (RGB) em caixas e, a cada iteração, divide a maior caixa ao longo do seu eixo mais longo, atribuindo a cada caixa a cor média dos pixels que ela contém. O resultado é uma paleta que representa bem as cores dominantes, mas pode perder nuances em tons pouco frequentes.
Para identidade de marca e sistemas de design, a recomendação padrão é uma paleta de 5 a 8 cores: 1 cor primária (a mais representativa e identificável), 2 a 3 cores secundárias (complementares à primária), 1 a 2 cores de destaque (para chamadas à ação e realces) e 1 a 2 neutras (branco, preto, cinza para tipografia e fundos). Paletas maiores (mais de 10 cores) são difíceis de manter coerentes. Paletas muito pequenas (2 a 3 cores) podem parecer monótonas. Para extrair uma paleta de uma imagem fotográfica com fins artísticos ou de inspiração, entre 6 e 10 cores costuma capturar bem a essência visual.
HEX é a representação hexadecimal do RGB: #FF5733 equivale a R=255, G=87, B=51. É o formato mais usado em CSS e web design pela sua compacidade. RGB (Vermelho, Verde, Azul) é o modelo de luz aditiva: misturar os três canais no máximo produz branco (255,255,255). É intuitivo para programadores que trabalham com cálculos de cor. HSL (Matiz, Saturação, Luminosidade) é o mais intuitivo para designers: H é o ângulo na roda de cores (0 graus = vermelho, 120 = verde, 240 = azul), S é a saturação (0% = cinza, 100% = cor pura), L é a luminosidade (0% = preto, 50% = cor pura, 100% = branco). Modificar uma cor em HSL é mais previsível: para escurecer uma cor, basta reduzir o valor de L sem afetar o matiz.
A regra 60-30-10 é o guia mais usado no design gráfico e de interiores: 60% do espaço visual usa a cor dominante (geralmente um neutro ou a cor principal da marca), 30% usa a cor secundária (cria contraste e profundidade) e 10% usa a cor de destaque (chamadas à ação, realces). No design de interfaces web, essa proporção se adapta a: fundo (60%, geralmente branco ou cinza claro), conteúdo e tipografia (30%, cinza escuro ou preto), elementos interativos (10%, cor vibrante da marca). A regra garante coerência visual sem monotonia, pois sempre há variedade tonal suficiente para criar hierarquia visual.
Cores complementares são opostas na roda de cores (vermelho e verde, azul e laranja, amarelo e violeta). Criam o máximo contraste visual e são usadas em elementos que precisam se destacar claramente sobre o fundo. Em marcas esportivas e de energia, vermelho sobre verde e azul sobre laranja são combinações clássicas. Cores análogas são adjacentes na roda de cores (vermelho, laranja, amarelo). Criam harmonia e sensação de unidade. São mais agradáveis e menos agressivas visualmente. Para interfaces de uso prolongado (aplicativos, sites), esquemas análogos são mais descansados para os olhos. A terceira categoria, cores tríades (três cores equidistantes: vermelho, amarelo, azul), equilibra contraste com harmonia.
Teoria das cores: sistema Pantone, quantização e paletas acessíveis
A teoria das cores tem raízes na física e na percepção visual. Isaac Newton demonstrou em 1666 que a luz branca é a soma de todas as cores do espectro, passando luz solar por um prisma. Johannes Itten, professor na Bauhaus nos anos 1920, formalizou a roda de cores como ferramenta pedagógica e estabeleceu as relações harmônicas que continuam sendo a base do design de cores moderno. Josef Albers, também da Bauhaus, foi além: em seu livro A Interação das Cores (1963), demonstrou que nossa percepção de uma cor não é absoluta, mas relativa ao seu contexto, um fenômeno chamado contraste simultâneo. Um cinza sobre fundo preto parece mais claro do que o mesmo cinza sobre fundo branco, mesmo que o valor do cinza seja idêntico.
O sistema Pantone, fundado em 1963 por Lawrence Herbert em Nova Jersey, resolveu um problema fundamental da indústria gráfica: duas gráficas em cidades diferentes não conseguiam reproduzir o mesmo vermelho sem um sistema de referência comum. A Pantone criou um mostruário padronizado (o Pantone Matching System, PMS) com números únicos para cada cor e fórmulas precisas de mistura de tinta. Hoje o sistema inclui mais de 1.800 cores para impressão em papel, tecido e plástico. O algoritmo Median Cut, base da quantização digital de cores, resolve o problema inverso: dado um conjunto de milhões de cores, encontrar as N mais representativas. O algoritmo foi posteriormente otimizado por Xiaolin Wu (1992) com seu método de quantização por Octree, mais rápido e com melhor qualidade para paletas pequenas.
Paletas de cores acessíveis são uma consideração crítica no design de interfaces. O daltonismo afeta 8% dos homens e 0,5% das mulheres de ascendência europeia, com taxas menores em outras etnias. A forma mais comum, o daltonismo vermelho-verde (deuteranopia e protanopia), torna vermelho e verde indistinguíveis. Projetar usando apenas vermelho e verde para diferenciar estados (erro e sucesso, por exemplo) exclui milhões de usuários. A solução não é evitar vermelho e verde, mas adicionar diferenciadores complementares (ícones, texto, forma) e usar variações de luminosidade suficientemente distintas. Ferramentas como o Coblis (Color Blindness Simulator) permitem visualizar qualquer imagem como seria percebida por uma pessoa com diferentes tipos de daltonismo.