Blog

Como medir cores e espaçamento em uma captura de tela

Publicado em 25 de outubro de 2026 · seletor de cores, espaçamento, design, captura de tela

Confira um valor hexadecimal, uma borda de 1 px ou o espaço exato entre dois elementos sem abrir um app de design. A lupa, o seletor de cores e a seleção fazem o trabalho.

Uma captura de tela muitas vezes é a única fonte de verdade que você tem: um relato de bug de um cliente, a interface de um concorrente, um design que saiu diferente do protótipo. Ler cores e distâncias exatas dela é uma habilidade pequena, e o InSnap coloca as ferramentas na sobreposição de captura, onde a imagem já está.

Escolha a cor sob o ponteiro

No InSnap, ative o seletor de cores em Ajustes › Captura de tela e faça uma captura. Ao mover o mouse sobre a imagem congelada, o painel de cores mostra o valor sob o ponteiro.

• Shift alterna entre RGB e HEX.
• C copia o valor atual para a área de transferência.
• A amostra vem da captura congelada, não da tela ao vivo, então o valor não muda se um vídeo ou uma animação estiver rodando por baixo.

Esse último ponto importa para o controle de qualidade de design: você está medindo os pixels que foram capturados, que é exatamente o que o arquivo contém.

Leia um único pixel com a lupa

A lupa mostra uma grade ampliada ao redor do ponteiro, com o pixel central marcado. Use-a quando a pergunta não for “que cor é esta área”, mas “o que está acontecendo neste pixel exato”:

• Aquilo é uma borda de 1 px ou uma sombra?
• O divisor tem um pixel ou dois?
• O ícone está alinhado com a linha de base do texto?
• O raio dos cantos é uniforme nos quatro cantos?

No zoom normal, esses detalhes desaparecem na suavização de bordas. A grade de pixels os torna contáveis.

Meça o espaçamento com uma seleção

Não existe ferramenta de régua, mas a seleção é uma régua. Arraste uma caixa sobre o espaço que quer medir e leia o rótulo de tamanho:

1. Inicie a captura e arraste da borda de um elemento até a borda do próximo.
2. Leia a largura ou a altura no rótulo de tamanho. Ele informa pixels físicos, que é o que o arquivo contém.
3. Pressione Esc para cancelar, ou copie a seleção se também precisar da imagem.

Duas observações práticas:

• Meça o espaço, não o elemento inteiro. Uma seleção da borda esquerda de um botão até a borda esquerda do próximo dá o passo; subtraia a largura do botão se precisar do espaço entre eles.
• Leve em conta a escala da tela. Em uma tela Retina, 20 pixels físicos são 10 pontos. Se a especificação de design está em pontos, divida pelo fator de escala; a captura de tela está sempre em pixels.

Uma checklist curta de QA de design

Quando uma captura de tela não basta

Pixels dizem o que foi renderizado, não por quê. Se uma cor parece errada, confira o perfil do monitor e o tema do app antes de abrir um bug; se um espaço parece estranho, confirme o nível de zoom da página. Uma captura feita com o navegador em 90% de zoom informa tamanhos que não batem com o CSS.

Para comparar, capture os dois estados separadamente e fixe os dois: as janelas fixadas ficam acima do app, então você pode alternar entre o protótipo e a implementação sem perder o lugar.

Perguntas frequentes

Posso copiar o valor da cor diretamente?

Sim. Ative o seletor de cores, passe o mouse sobre o pixel, pressione Shift para escolher RGB ou HEX e depois pressione C. O valor vai para a área de transferência, pronto para colar em um ticket ou em um arquivo de design.

Como meço um espaço em pontos em vez de pixels?

Leia o tamanho da seleção em pixels físicos e divida pela escala do monitor: 2 em uma tela Retina, 1 em uma tela comum, ou o valor mostrado nos ajustes de monitor do sistema para um modo escalonado.

O seletor de cores lê a tela ao vivo ou a captura de tela?

A captura de tela. A imagem é congelada quando você pressiona o atalho, e o seletor amostra esses pixels, então o valor corresponde ao arquivo que você salva ou compartilha.

Mais do blog