Escolha um pixel ou extraia uma paleta inteira
Duas tarefas, uma página. Clique num ponto da imagem para ler exatamente aquele pixel como HEX, RGB e HSL, ou deixe a ferramenta encontrar as cores que compõem a imagem e listá-las com a fatia da imagem que cada uma cobre. Os usos típicos são combinar um botão com um logotipo numa captura de tela, montar um esquema de cores a partir de uma foto ou achar o azul de um gráfico que só existe como imagem.
Da imagem à paleta em cinco passos
- Clique na área de soltar ou arraste uma imagem para ela. PNG, JPG e WebP são as escolhas seguras.
- Clique na imagem para escolher um pixel. A caixa de prévia mostra a cor, e os campos HEX, RGB e HSL são preenchidos, cada um com o seu botão de copiar.
- Escolha quantas cores a paleta deve ter, de 3 a 16, e a ordem: mais comuns primeiro, do claro ao escuro ou por matiz.
- Marque Ignorar branco e preto quando um fundo branco ou uma sombra escura esconder as cores que importam.
- Escolha um formato de exportação e copie a paleta inteira, ou clique numa amostra para torná-la a cor atual e copiar o seu código HEX.
Como as cores são escolhidas
A ferramenta usa o corte pela mediana (median cut). Ela lê uma cópia reduzida da imagem, coloca todos os pixels numa caixa e continua dividindo a caixa com mais pixels ao longo do seu canal de cor mais amplo até ter tantas caixas quanto você pediu ou até que as cores restantes sejam próximas demais para se distinguir, então um gráfico simples pode dar menos amostras do que o número que você escolheu. Cada amostra é a média de uma caixa, e a porcentagem é a parte da imagem que essa caixa cobre. Tons parecidos acabam, portanto, numa só amostra em vez de encher a lista, que é o que uma contagem simples de cores exatas faria com uma foto. Pixels quase transparentes são ignorados.
Formatos de exportação
- HEX: um código por linha, para ferramentas de design.
- CSS: propriedades personalizadas como
--color-1dentro de:root. - JSON: HEX, valores RGB e participação de cada cor.
- Tailwind: um objeto
colorsque você pode colar no tema.
A paleta é um ponto de partida. Uma amostra pode diferir um pouco de qualquer pixel isolado porque é uma média, então clique na imagem para obter um valor exato.
A imagem nunca sai do seu dispositivo
O arquivo é desenhado numa tela (canvas) no seu navegador e os pixels são lidos de lá. Nenhuma requisição é enviada quando você abre uma imagem, escolhe uma cor ou exporta uma paleta.