Por que adicionámos extração automática de paleta ao seletor de cores

O nosso seletor de cores sempre permitiu carregar uma imagem e clicar em qualquer píxel para obter o seu valor exato em HEX, RGB e HSL. Isso responde “de que cor é este ponto exato?” — útil, mas não é a pergunta que a maioria das pessoas realmente tem ao carregar uma foto. Normalmente é “qual é o esquema de cores geral desta imagem?” — extrair a paleta de marca de um logótipo, ou fazer corresponder o tom de uma foto de referência ao esquema de cores de um site.

A amostragem de um único píxel não consegue responder a isso. Por isso adicionámos a extração de paleta: carrega uma imagem, e a ferramenta agora extrai automaticamente as oito cores mais dominantes e mostra-as como amostras clicáveis.

Como funciona

Não há nenhum modelo de IA envolvido e nada é carregado para lado nenhum — é um algoritmo direto de contagem de frequências que corre em poucos milissegundos:

1. A imagem é reduzida para uma tela de 80×80. Não é necessária resolução total para estatísticas de cor, e a redução mantém tudo instantâneo mesmo com fotos grandes.
2. Cada píxel é agrupado segundo uma versão simplificada da sua cor — os 5 bits superiores de cada canal RGB, para que píxeis visualmente quase idênticos caiam no mesmo grupo em vez de cada um contar como uma cor única.
3. Os grupos são ordenados pelo número de píxeis que contêm, e os oito maiores tornam-se a paleta, cada um mostrado como a cor média de tudo o que está nesse grupo.

É só isso. Sem machine learning, sem serviço externo — apenas redução de amostragem e contagem, por isso é instantâneo e nunca sai do teu navegador.

Clica numa amostra, obtém o código

Cada amostra da paleta é clicável: clica numa e torna-se a cor ativa da ferramenta, com HEX, RGB e HSL preenchidos automaticamente e o hex copiado para a área de transferência no mesmo clique. Há também um botão “copiar tudo” se quiseres a paleta inteira como uma lista separada por vírgulas, útil para colar diretamente numa ferramenta de design ou num bloco de propriedades personalizadas CSS.

Experimenta

Carrega qualquer imagem — uma captura de ecrã, um logótipo, uma foto — na página do seletor de cores e a paleta aparece automaticamente por baixo.