Como Extrair uma Paleta de Cores de Qualquer Imagem

2026-06-25

Algumas das melhores paletas de cores já existem — em uma foto de pôr do sol, num frame de filme, no logo de uma marca, numa captura de tela de um design que você gosta. Em vez de adivinhar códigos hexadecimais, você pode simplesmente pegar as cores direto da imagem. Veja como, e como transformá-las em valores utilizáveis para o seu CSS ou ferramenta de design.

Por que extrair cores de uma imagem

Montar uma paleta do zero é difícil; emprestar uma que já funciona é fácil. Uma fotografia tem harmonia natural porque a luz da cena amarrou as cores umas às outras. O logo de uma marca entrega as cores exatas dela. Partir de uma imagem real te dá uma paleta que parece coerente, e então você refina.

Como o conta-gotas funciona

Uma imagem é uma grade de pixels, e cada pixel tem uma cor. Um seletor de cores (conta-gotas) lê a cor exata do pixel para onde você aponta e a reporta como um código — geralmente HEX (#f59563), que são os mesmos valores de vermelho/verde/azul escritos em hexadecimal. Passe o cursor para pré-visualizar, clique para salvar as que gostar, e você tem uma paleta.

O seletor de cores do ToolKoala faz exatamente isso no seu navegador:

1. Solte qualquer imagem — uma foto, uma captura de tela, um logo.
2. Passe o cursor para pré-visualizar uma cor; clique para salvá-la. Junte quantas quiser.
3. Cada cor salva te dá HEX e RGB para copiar direto no seu código.

Roda localmente, então a imagem que você está amostrando nunca é enviada.

HEX, RGB, HSL — de qual você precisa?

Mesma cor, notações diferentes:

• HEX (#f59563) — o padrão da web; o que você vai colar no CSS na maioria das vezes.
• RGB (245, 149, 99) — útil quando você precisa de um canal alfa (rgba(...)) para transparência.
• HSL (matiz, saturação, luminosidade) — a que os designers adoram para ajustar uma cor: mexa na luminosidade para criar um tom mais claro, desloque a matiz para achar uma cor complementar.

Se você tem uma cor em um formato e precisa de outro, o conversor de cores transforma HEX em RGB, HSL, HSV e CMYK na hora.

Transformando as escolhas em uma paleta de verdade

Alguns hábitos que deixam uma paleta escolhida utilizável:

• Pegue uma variedade, não cinco tons quase idênticos — um escuro, um claro, alguns tons médios e um de destaque.
• Verifique o contraste para qualquer coisa com texto por cima. Um par lindo de baixo contraste é ilegível.
• Use HSL para criar variações — quando você tiver uma cor base, ajuste a luminosidade para estados de hover, bordas e fundos em vez de escolher cores novas sem relação.

Perguntas frequentes

Como pego o código de cor de uma imagem? Use um seletor de cores: carregue a imagem, passe o cursor para pré-visualizar e clique no pixel cuja cor você quer. Ele reporta a cor como um código HEX (e geralmente RGB) que você pode copiar. O seletor de cores do ToolKoala faz isso no navegador.

Qual a diferença entre HEX, RGB e HSL? São três jeitos de escrever a mesma cor. HEX é o padrão da web, RGB é útil para transparência (rgba) e HSL é o mais fácil para ajustar uma cor — mudando luminosidade ou matiz na mão.

Posso escolher cores de uma captura de tela ou logo? Sim — qualquer imagem funciona, incluindo capturas de tela e logos. Esse costuma ser o jeito mais rápido de combinar as cores exatas de uma marca.

O seletor de cores faz upload da minha imagem? Não. O ToolKoala lê os pixels no seu navegador, então a imagem nunca sai do seu dispositivo.

Como converto uma cor HEX para RGB ou HSL? Cole em um conversor de cores. O conversor de cores do ToolKoala transforma qualquer HEX em RGB, HSL, HSV e CMYK de uma vez.

— Milo 🐨