Pegue o código exato de qualquer pixel: toque num logotipo, num botão de uma captura de tela ou num tom de uma foto e copie em HEX, RGB ou HSL. As escolhas recentes ficam ao lado da amostra grande para juntar cinco ou seis cores e comparar.
Como usar
- Abra uma imagem, solte no cartão ou cole uma captura com Ctrl+V. Enquanto isso, aparece uma imagem de exemplo.
- Passe o ponteiro sobre a imagem para ver a lupa e clique para pegar aquele pixel. No celular, segure o dedo na imagem, deslize até a lupa mostrar o pixel certo e solte.
- Toque em HEX, RGB ou HSL para copiar a cor. As últimas cores ficam na fileira ao lado da amostra grande.
- A paleta se atualiza sozinha. Escolha de 5 a 12 cores e o método, toque numa amostra para copiá-la e exporte a paleta em CSS, JSON ou PNG.
- K-means agrupa cores parecidas e costuma dar a paleta mais natural. O corte pela mediana divide a faixa de cores por igual e mantém pequenas cores de destaque.
- A cor dominante é o maior grupo da paleta. A média é calculada sobre todos os pixels visíveis, por isso costuma ser um tom mais apagado.
- Imagens grandes são reduzidas a 2400 pixels no lado maior para a coleta, o que mantém exatas as áreas lisas. Pixels transparentes são ignorados.
- A imagem fica no seu navegador. Nada é enviado.
Escolher um pixel exato
Passe o ponteiro sobre a imagem para ver a lupa ampliada e clique. Na tela de toque, segure o dedo, deslize até a lupa mostrar o pixel desejado e solte. Imagens grandes são reduzidas para 2400 px no lado maior na hora de escolher, o que mantém exatas as cores chapadas de logotipos e interfaces. Fotos têm ruído, e pixels vizinhos de um céu podem variar um pouco; a paleta dá uma cor mais representativa.
Como a paleta é montada
O k-means agrupa cores parecidas e costuma dar a paleta mais natural para fotos. O median cut divide a faixa de cores por igual e mantém pequenas cores de destaque, bom para ilustrações e imagens de marca. Cada amostra mostra sua participação na imagem.
A cor dominante é o maior grupo. A cor média é a média de todos os pixels visíveis, por isso costuma ser um tom apagado que não aparece na imagem. Pixels totalmente transparentes são ignorados.
Usar os códigos
HEX (#1e88e5) é o formato comum em CSS, ferramentas de design e manuais de marca; RGB dá a mesma cor em vermelho, verde e azul de 0 a 255; HSL descreve matiz, saturação e luminosidade, o que facilita variações mais claras ou escuras. Exporte a paleta como variáveis CSS, JSON ou uma cartela PNG.
Perguntas frequentes
Como descobrir o código de cor de algo numa imagem?
Abra a imagem, passe a lupa sobre o ponto e clique ou solte o dedo. Os códigos HEX, RGB e HSL aparecem ao lado da amostra e são copiados com um toque.
Dá para pegar uma cor de uma captura de tela?
Sim. Pressione Ctrl+V para colar a captura ou arraste o arquivo. Capturas são ideais porque as cores não têm o ruído de uma câmera.
Por que a cor escolhida difere um pouco da cor da marca?
A compressão JPEG e o processamento da câmera alteram um pouco os valores. Para logotipos, use o PNG ou SVG original se puder, ou compare alguns pixels próximos.
Qual a diferença entre cor dominante e cor média?
A dominante é o maior grupo de pixels parecidos. A média mistura todos os pixels, então uma imagem vermelha e azul resulta num roxo que talvez nem apareça nela.
Quantas cores a paleta pode ter?
De 5 a 12. Menos cores mostram o tema principal; mais cores também pegam pequenos detalhes de destaque.
Minha imagem é enviada?
Não. A imagem é lida e analisada no navegador e não é enviada a lugar nenhum.