Seletor de cores de imagem
Extraia as cores dominantes de qualquer imagem, com valores HEX e RGB e a proporção de cada cor na foto. Processado no seu dispositivo; a imagem nunca é enviada.
ou solte-o aqui
JPG, PNG, WebP ou GIF. Você também pode colar uma imagem.
Cores extraídas
Como funciona
Este seletor de cores de imagem analisa uma imagem carregada inteiramente no seu navegador e retorna as cores dominantes como valores HEX e RGB com a cobertura aproximada de cada cor na imagem, para que você possa extrair rapidamente uma paleta de marca ou esquema de cores de qualquer foto.
- Escolher uma imagem
Clique para navegar, arraste um arquivo ou cole um da sua área de transferência.
- Definir quantas cores
3 a 10 amostras, classificadas pela proporção da imagem que cobrem.
- Copiar uma cor
Clique em qualquer amostra para copiar seu valor HEX ou copie todo o conjunto como variáveis CSS.
Como as cores são selecionadas
A imagem é desenhada em uma pequena tela e os valores de vermelho, verde e azul de cada pixel são arredondados em grupos de 16 unidades, para que tons quase idênticos contem como uma única cor. Os grupos são classificados pelo número de pixels que cobrem, e qualquer candidato muito próximo em cor de um já selecionado é ignorado, para que o resultado seja uma variedade de cores genuinamente distintas em vez de vários quase duplicados.
Executado inteiramente no seu navegador
A imagem é lida com a API FileReader e analisada com o método getImageData da API Canvas. Nenhum dado de imagem é enviado a qualquer servidor, o que torna esta ferramenta segura para ativos confidenciais de marca ou fotos privadas. Imagens de origem cruzada carregadas por URL não podem ser analisadas, pois os navegadores bloqueiam a leitura de dados de pixel de uma imagem sem permissão CORS; baixe a imagem primeiro e envie o arquivo local em vez disso.
Perguntas frequentes
Como extrair cores de uma imagem para criar uma paleta de cores?
Arraste ou envie qualquer arquivo de imagem. A ferramenta coleta dados de pixel da imagem usando um canvas HTML, agrupa cores semelhantes e exibe as tonalidades dominantes como amostras com seu código HEX, valor RGB e porcentagem aproximada de cobertura. Clique em qualquer amostra para copiar seu valor HEX para a área de transferência ou copie todo o conjunto como propriedades personalizadas CSS.
Minha imagem é enviada para um servidor ao extrair cores?
Não. A extração de cores ocorre inteiramente no seu navegador usando o método getImageData da API Canvas. A imagem é carregada em um canvas oculto, os dados de pixel são lidos localmente e as cores agrupadas são calculadas em JavaScript. Nenhum dado de imagem é enviado a qualquer servidor externo, o que é seguro para ativos confidenciais de marca ou fotos privadas.
Quais formatos de imagem posso usar com o extrator de cores?
A ferramenta aceita qualquer formato de imagem que seu navegador possa decodificar, tipicamente JPEG, PNG, WebP, GIF e BMP. O arquivo é lido com a API FileReader e renderizado em um canvas, então o limite é o suporte nativo a imagens do seu navegador, e não qualquer restrição nesta ferramenta.
Qual é a precisão da extração de cores e ela encontra todas as tonalidades?
O extrator identifica os grupos de cores mais dominantes, não cada pixel único. Imagens com gradientes suaves, como céus azuis ou tons de pele, podem ser resumidas em alguns valores HEX representativos em vez de cada tonalidade intermediária. Aumente o controle deslizante de cores a extrair para uma análise mais detalhada de uma imagem complexa.
Qual é uma limitação da extração de cores baseada no navegador?
Imagens de origem cruzada não podem ser analisadas devido a restrições de segurança do canvas do navegador. Se você vincular uma imagem hospedada em outro domínio sem cabeçalhos CORS, a leitura dos dados de pixel causará um erro de segurança. Baixe a imagem primeiro e envie o arquivo local em vez de fornecer uma URL remota.