Uma captura de tela é muitas vezes a única coisa que você tem. Você não consegue abrir o CSS do site, não consegue inspecionar o app, não tem o arquivo de design — mas consegue ver as cores na tela, e uma captura de tela as congela em uma imagem que você pode amostrar. Aqui está como extrair códigos de cor exatos de uma.
Por que uma captura de tela é a fonte honesta
Quando você captura uma página ou app renderizado, você registra as cores como elas de fato aparecem — depois de cada gradiente, sobreposição e opacidade ser aplicado. Isso costuma ser mais fiel que o valor de origem. Um cartão definido como #000000 a 90% de opacidade sobre um fundo cinza não é preto na tela; é um cinza escuro específico. Inspecionar o código te dá a receita; amostrar a captura de tela te dá a cor que um usuário realmente vê. Quando você está combinando com esse visual, a captura de tela é o que você quer ler.
Escolha uma cor em três passos
- Tire e carregue a captura de tela. Capture a tela (ou a região que te interessa) e solte a imagem no seletor.
- Passe o cursor até o pixel. Uma lupa de aumento segue seu cursor e amplia a área sob ele, para você acertar com precisão — mesmo em uma borda fina ou um ícone pequeno.
- Clique para salvar, depois copie. Cada clique guarda a cor como uma amostra com seu HEX, RGB e HSL, cada um com um botão de copiar. Copie o formato de que precisa e cole na sua folha de estilos ou ferramenta de design.
Coisas específicas de captura de tela para observar
Capturas de tela têm peculiaridades que podem desviar uma amostra de cor, e elas são fáceis de evitar quando você as conhece:
- Salve como PNG, não JPEG. A compressão JPEG borra as cores levemente, especialmente perto das bordas e em áreas planas, então um valor amostrado pode desviar do verdadeiro. PNG é sem perda e mantém cada pixel exato — a maioria das ferramentas de captura do sistema operacional já usa PNG por padrão.
- Cuidado com o nível de zoom. Uma captura tirada com um zoom de navegador ou de sistema diferente de 100% está escalada, e escalar mistura pixels vizinhos. Para a amostra mais limpa, capture a 100%.
- Evite bordas e texto. O anti-aliasing significa que os pixels ao longo de qualquer borda são misturas, não a cor real. Amostre do meio de uma área sólida — a lupa te ajuda a ver que você está longe da fronteira borrada.
- Cuidado com a cor de texto em subpixel. Dê zoom em um texto renderizado e você verá franjas de cor que não são o valor real do texto. Escolha cores de preenchimentos e fundos, não de traços de letra.
Lendo HEX, RGB e HSL
Cada amostra mostra os três formatos de uma vez:
- HEX (
#3A7BD5) — o padrão para CSS e ferramentas de design. - RGB (
rgb(58, 123, 213)) — valores de canal, úteis quando você precisa de transparênciargba. - HSL (
hsl(215, 65%, 53%)) — matiz, saturação, luminosidade, melhor quando você quer ajustar a cor em vez de copiá-la exatamente.
Você não reamostra para trocar — a mesma cor já está ali nos três.
Capture um esquema inteiro de uma vez
De uma captura de tela você pode reconstruir um esquema de cores inteiro: clique na cor do cabeçalho, do botão, do link, do fundo, do texto esmaecido. Cada uma se empilha na lista para você extrair o conjunto completo em uma única sessão e copiá-las em ordem.
Se, em vez disso, você quer a paleta geral de uma imagem resumida para você — o punhado de tons dominantes — isso é um trabalho separado, e a ferramenta de paleta do img.diy os extrai automaticamente. Este seletor é para apontar para um pixel específico na captura de tela; a ferramenta de paleta é para caracterizar a imagem como um todo.
Nada sai da sua máquina
Capturas de tela muitas vezes contêm coisas que você preferiria não enviar — um painel interno, um rascunho privado, a interface não lançada de um cliente. Aqui a imagem é lida localmente no seu navegador a partir de um canvas: nada é enviado a lugar nenhum, não há conta, e funciona offline após o primeiro carregamento. Você obtém as cores sem a captura de tela nunca sair do seu dispositivo.
Tire a captura de tela, passe o cursor até o pixel, clique e copie.