InSnapMisurare colori e spaziature da uno screenshot
Controlla un valore esadecimale, un bordo da 1 px o la distanza tra due elementi senza aprire un tool di design. Ci pensano la lente, il selettore colore e la selezione.
Uno screenshot è spesso l'unica fonte di verità che hai: la segnalazione di un cliente, l'interfaccia di un concorrente, un design che è stato rilasciato diverso dal mockup. Leggere da lì colori e distanze esatte è una piccola abilità, e InSnap mette gli strumenti nella sovrapposizione di cattura, dove l'immagine è già presente.
Scegli il colore sotto il puntatore
In InSnap, attiva il selettore colore in Impostazioni › Screenshot, poi avvia una cattura. Mentre ti muovi sull'immagine congelata, il pannello del colore mostra il valore sotto il puntatore.
- Shift passa da RGB a HEX.
- C copia il valore corrente negli appunti.
- Il campione viene dallo screenshot congelato, non dallo schermo dal vivo, quindi il valore non cambia se sotto c'è un video o un'animazione in riproduzione.
Quest'ultimo punto conta per il QA del design: stai misurando i pixel che sono stati catturati, cioè esattamente quello che contiene il file.
Leggi un singolo pixel con la lente d'ingrandimento
La lente mostra una griglia ingrandita attorno al puntatore, con il pixel centrale evidenziato. Usala quando la domanda non è «che colore è quest'area» ma «cosa succede esattamente in questo pixel»:
- È un bordo da 1 px o un'ombra?
- Il separatore è un pixel o due?
- L'icona è allineata alla linea di base del testo?
- Il raggio degli angoli è uniforme su tutti e quattro gli angoli?
Alle dimensioni normali questi dettagli spariscono nell'antialiasing. La griglia dei pixel li rende contabili.
Misura la spaziatura con una selezione
Non c'è uno strumento righello, ma la selezione è un righello. Trascina un riquadro sullo spazio che vuoi misurare e leggi l'etichetta delle dimensioni:
- Avvia la cattura e trascina dal bordo di un elemento al bordo di quello successivo.
- Leggi la larghezza o l'altezza nell'etichetta delle dimensioni. Riporta i pixel fisici, cioè quello che contiene il file.
- Premi Esc per annullare, oppure copia la selezione se ti serve anche l'immagine.
Due note pratiche:
- Misura lo spazio, non l'intero elemento. Una selezione dal bordo sinistro di un pulsante al bordo sinistro del successivo ti dà il passo; sottrai la larghezza del pulsante se ti serve lo spazio vuoto.
- Considera la scala del display. Su uno schermo Retina, 20 pixel fisici sono 10 punti. Se la specifica di design è in punti, dividi per il fattore di scala; lo screenshot è sempre in pixel.
Una breve checklist per il QA del design
| Domanda | Strumento |
|---|---|
| Qual è il valore esadecimale esatto? | Selettore colore, Shift per HEX, C per copiare |
| Il bordo è da 1 px? | Lente d'ingrandimento |
| Lo spazio è di 8 o 12 pixel? | Etichetta delle dimensioni della selezione |
| Gli angoli sono allineati? | Lente d'ingrandimento |
| Il testo ha il colore previsto? | Selettore colore sopra un glifo |
Quando uno screenshot non basta
I pixel ti dicono cosa è stato renderizzato, non perché. Se un colore sembra sbagliato, controlla il profilo del display e il tema dell'app prima di aprire un bug; se uno spazio sembra fuori posto, verifica il livello di zoom della pagina. Uno screenshot scattato con lo zoom del browser al 90% riporterà dimensioni che non corrispondono al CSS.
Per un confronto, cattura i due stati separatamente e fissa entrambi: le finestre fissate restano sopra l'app, così puoi passare dal mockup all'implementazione senza perdere il segno.
Domande frequenti
Posso copiare direttamente il valore del colore?
Sì. Attiva il selettore colore, passa sopra il pixel, premi Shift per scegliere RGB o HEX, poi premi C. Il valore va negli appunti, pronto per essere incollato in un ticket o in un file di design.
Come misuro uno spazio in punti invece che in pixel?
Leggi le dimensioni della selezione in pixel fisici e dividi per la scala del display: 2 su un display Retina, 1 su un display standard, oppure il valore mostrato nelle impostazioni del display del sistema per una modalità scalata.
Il selettore colore legge lo schermo dal vivo o lo screenshot?
Lo screenshot. La cattura viene congelata quando premi la scorciatoia, e il selettore campiona quei pixel, quindi il valore corrisponde al file che salvi o condividi.
Altro dal blog
Come aggiungere testo a uno screenshot (e renderlo leggibile)
Aggiungi etichette, titoli e richiami a uno screenshot con contrasto leggibile, dimensione giusta e posizione pulita, e modificali anche dopo su Mac e Windows.
25 ottobre 2026
Zoom automatico nelle registrazioni schermo: cosa fa e quando usarlo
Come lo zoom automatico di InSnap segue i clic in una registrazione schermo, come cambia il risultato l'intensità e quando una registrazione statica è meglio.
25 ottobre 2026
Come creare un'immagine di confronto prima e dopo
Un'immagine batte due allegati: cattura i due stati alla stessa dimensione, uniscili affiancati, aggiungi le etichette e invia un confronto che si legge a colpo d'occhio.
25 ottobre 2026