Seletor de cores de imagem, obtém as cores de qualquer foto
Extrai cores de qualquer imagem no teu navegador. Passa o cursor com uma lupa, clica para captar valores HEX, RGB e HSL e extrai uma paleta dominante.
A carregar Seletor de cores de imagem, obtém as cores de qualquer foto… Se nada acontecer, ativa o JavaScript.
Um seletor de cores de imagem (muitas vezes chamado conta-gotas) diz-te a cor exata de qualquer píxel de uma foto, captura de ecrã, logótipo ou maquete de design. Carrega uma imagem, passa o cursor por cima com a lupa de ampliação para inspecionar píxeis individuais e clica para captar a cor como código HEX, valor RGB ou valor HSL, cada um com cópia num só clique. A ferramenta também analisa automaticamente a imagem inteira e extrai uma paleta de cores dominantes, para que possas obter um conjunto combinado de até oito amostras em segundos, sem qualquer amostragem manual.
Perguntas frequentes
Como extraio uma cor de uma imagem?
A minha imagem é enviada para um servidor?
Que formatos de cor é que o seletor fornece?
Como funciona a extração da paleta dominante?
Posso colar uma captura de ecrã diretamente da área de transferência?
Que formatos de imagem são suportados?
Qual é a precisão da cor captada?
Qual é a diferença entre HEX, RGB e HSL?
Posso guardar várias cores e compará-las?
Porque é que as cores tiradas de um JPEG parecem ligeiramente diferentes?
Sobre Seletor de cores de imagem, obtém as cores de qualquer foto
Tirar uma cor de uma imagem resume-se a três passos: carregar, apontar, clicar. Podes arrastar e largar um ficheiro em qualquer parte da ferramenta, procurá-lo com o seletor de ficheiros ou simplesmente colar uma captura de ecrã diretamente da área de transferência com Ctrl+V (Cmd+V num Mac). A lupa mostra uma grelha ampliada dos píxeis à volta do cursor juntamente com uma pré-visualização em direto da cor por baixo dele, o que facilita acertar exatamente no píxel certo mesmo em detalhes finos como texto suavizado, contornos finos ou gradientes subtis. Cada cor em que clicas é adicionada a uma fila de histórico, por isso podes comparar candidatas lado a lado e voltar a selecionar qualquer uma delas mais tarde com um único clique.
Tudo acontece localmente no teu navegador. A imagem é descodificada para um canvas HTML no teu próprio dispositivo e nunca sai dele: não há envio, nem processamento em servidor, nem conta, nem rastreio dos teus ficheiros. Isso torna este seletor seguro para material confidencial como fotos de produto ainda não lançadas, ativos de marca de clientes ou capturas internas. Também significa que a ferramenta continua a funcionar offline depois de a página carregar e responde de imediato, seja qual for a velocidade da tua ligação, porque simplesmente não há qualquer ida à rede.
Os usos típicos estão por todo o lado no trabalho diário de design e desenvolvimento. Os programadores front-end tiram uma cor de marca de um logótipo para a reproduzir em CSS. Os designers verificam se um recurso exportado usa mesmo os valores de marca aprovados. Os profissionais de marketing verificam a consistência de cor entre imagens de campanha, e os ilustradores amostram fotos de referência para construir uma paleta de pintura. A extração automática de paleta é especialmente útil para criar um esquema de cores a partir de fotografia, por exemplo tirar o tema de um site de uma imagem de destaque. Quando quiseres refinar ou converter os valores que captaste, o conversor de cores e o gerador de paletas deste site continuam exatamente onde esta ferramenta termina.
Do conta-gotas aos códigos hexadecimais: como aprendemos a dar nome às cores do ecrã
A metáfora do conta-gotas é mais antiga do que a maioria imagina. Os primeiros programas de pintura dos anos 80, incluindo o Deluxe Paint no Amiga e o MacPaint no Macintosh, precisavam de uma forma de deixar os artistas reutilizar uma cor já presente na tela, e uma pipeta a sugar uma gota de tinta foi o esqueumorfismo que vingou. Quando o Photoshop 1.0 saiu em 1990, levou o conta-gotas para os fluxos de trabalho profissionais, e todos os editores de imagem desde então mantiveram tanto a ferramenta como o ícone, ao ponto de amostrar qualquer valor em qualquer parte de uma interface se chamar hoje, genericamente, usar o conta-gotas.
O código hexadecimal de seis dígitos é um acidente feliz do hardware. Os ecrãs adotaram a cor de 24 bits no final dos anos 80, com um byte por canal, e um byte corresponde exatamente a dois dígitos hexadecimais, por isso #RRGGBB era a forma legível mais compacta de escrever o que a memória de vídeo realmente continha. O HTML 3.2 normalizou a notação para a web em 1997, juntamente com um conjunto de 16 cores com nome herdadas da paleta VGA do Windows. A lista muito maior de nomes que os navegadores entendem hoje, incluindo raridades como PapayaWhip e DarkSlateGray, veio do sistema de janelas X11, onde investigadores do MIT e da DEC deram nomes a cores nos anos 80 em parte a olho e, nalguns casos, segundo se conta, comparando-as com lápis de cera Crayola.
Uma relíquia dessa era ainda aparece em conversas de design: a paleta segura para a web. No tempo dos ecrãs de 8 bits, os navegadores só conseguiam garantir que 216 cores específicas eram mostradas sem pontilhado, por isso os designers limitavam-se a valores hexadecimais construídos com 00, 33, 66, 99, CC e FF. Os ecrãs modernos mostram milhares de milhões de cores e a restrição é irrelevante há duas décadas, mas esses valores toscos ainda aparecem em guias de estilo antigos, um registo fóssil do tempo em que escolher uma cor significava negociar com o hardware.