Extrator de cores

Visão Geral

Um extrator de cores analisa uma imagem e devolve suas cores dominantes como uma paleta utilizável: códigos hex que você usa direto num design. Seja para combinar uma marca com uma fotografia, criar um moodboard ou tematizar um site em torno de uma imagem principal, pegar cores à mão com o conta-gotas é lento e impreciso. Esta ferramenta amostra a imagem inteira e agrupa seus pixels nas poucas cores que realmente definem sua aparência, tudo processado no seu navegador.

Como usar (passo a passo)

1. 1

   Solte uma imagem

   Fotos, logos, capturas ou ilustrações, tudo funciona. Quanto maior a resolução, mais representativa a paleta.

2. 2

   Revise a paleta extraída

   As cores dominantes e de destaque aparecem com seus valores hex e RGB.

3. 3

   Copie os códigos que precisar

   Clique numa amostra para copiar seu hex. Leve os valores para seu CSS, ferramenta de design ou guia de marca.

Como Funciona

A imagem é desenhada num canvas e seus pixels são lidos como valores RGB. Um algoritmo de agrupamento (do tipo median-cut ou k-means) agrupa milhões de pixels num conjunto de cores representativas, ponderadas pela frequência. O resultado é a paleta dominante mais cores de destaque, cada uma com seu código hex e RGB pronto para copiar. Como trabalha com os pixels em bruto localmente, a imagem original nunca é enviada.

Quando usar

Criar um tema de site ou apresentação que harmonize com uma foto escolhida. Extrair as cores de marca de um logo. Criar uma paleta coordenada para uma ilustração ou protótipo de UI. Gerar moodboards a partir de fotos de inspiração. Escolher combinações acessíveis de texto/fundo a partir de uma foto de produto. Combinar um gradiente CSS com os tons de uma imagem principal.

Perguntas Frequentes