Hai un'immagine e ti serve un numero da essa: il codice hex di un colore specifico. Magari è un logo la cui specifica di brand è sparita da tempo, lo screenshot di un sito il cui blu vuoi abbinare, o una foto con una tonalità che ti piacerebbe riutilizzare. Digitare quello che pensi sia il colore non funziona — il tuo occhio non può leggere #3A7BD5 da uno schermo, e il colore che sembra giusto è di solito sbagliato di qualche cifra. Ecco come leggere il valore vero direttamente dai pixel.
Perché tirare a indovinare non funziona mai del tutto
Un singolo "blu" su schermo è in realtà una gamma di blu quasi identici, e la luminosità e la calibrazione del tuo monitor li spostano ulteriormente. Scegli a occhio e atterri vicino ma sbagliato — abbastanza vicino che la discrepanza è fastidiosa ma non ovvia, quindi bruci dieci minuti a chiederti perché il pulsante non corrisponde all'intestazione. La soluzione è smettere di tirare a indovinare e leggere il numero che il pixel memorizza davvero.
Ottieni il codice in tre passaggi
Il modo affidabile è campionare il pixel direttamente con un selettore di colore.
- Carica l'immagine. Trascina il logo, lo screenshot o la foto da cui stai estraendo.
- Passa il mouse sul pixel esatto. Una lente d'ingrandimento segue il tuo cursore e ingrandisce l'area sottostante, così su un bordo netto puoi vedere quale pixel è il colore piatto del marchio e quale è una fusione con anti-aliasing di due.
- Clicca per salvare, poi copia. Ogni clic mantiene il colore come un campione che mostra il suo HEX, RGB e HSL, ognuno con il proprio pulsante di copia. Clicca l'HEX ed è nei tuoi appunti.
Atterrare sul pixel giusto
La lente conta più di quanto sembri. Dove un colore incontra un altro — una lettera contro uno sfondo, il bordo di un'icona — i pixel in mezzo sono con anti-aliasing: una fusione ammorbidita dei due colori, non l'uno né l'altro. Campiona lì e ottieni un valore fangoso che non corrisponde a nulla. Punta a un'area piatta qualche pixel dentro la forma, dove il colore è pieno, e la vista ingrandita ti permette di confermare che sei sopra prima di cliccare.
Su un logo pulito o un'interfaccia piatta questo è facile — il colore è uniforme su un'ampia area. Su una foto richiede più attenzione, perché grana e compressione fanno sì che i pixel vicini differiscano davvero. Scegli da una regione tranquilla e illuminata uniformemente e prendi un paio di campioni per verificare che concordino.
HEX, RGB o HSL — prendi ciò che si adatta
Ogni campione ti dà tutti e tre in una volta, così copi quello che vuole la tua destinazione:
- HEX (
#3A7BD5) — l'impostazione predefinita del web. CSS, Figma, Canva, documenti di brand. Copia questo a meno che tu non abbia un motivo per non farlo. - RGB (
rgb(58, 123, 213)) — valori dei canali, utili quando uno strumento li chiede o ti serve la trasparenza viargba. - HSL (
hsl(215, 65%, 53%)) — tonalità, saturazione, luminosità. Migliore quando vuoi regolare il colore: schiarirlo per uno stato al passaggio del mouse, smorzarlo per una variante, o costruirci una scala.
Poiché ogni campione porta tutti e tre, non ricampioni mai solo per cambiare formato.
Prendere diversi colori in una volta
Un logo è raramente un solo colore. Clicca il primario, l'accento e il colore del testo in un unico passaggio — ognuno si accumula nella lista così puoi confrontarli e copiarli uno dopo l'altro, invece di caricare l'immagine tre volte separate.
Se vuoi un riepilogo di colore di un'intera immagine anziché pixel specifici — la palette complessiva su cui è costruita una foto — è un lavoro diverso, e lo strumento palette separato di img.diy estrae automaticamente i colori dominanti per te. Usa questo selettore quando conosci il punto esatto che vuoi; usa lo strumento palette quando vuoi che l'immagine sia caratterizzata per te.
Resta sul tuo dispositivo
L'immagine viene letta localmente nel tuo browser da una tela — nulla viene caricato, non c'è registrazione, e dopo il primo caricamento funziona offline. Così un mockup non rilasciato o la risorsa privata di un cliente non lascia mai la tua macchina solo perché ti serviva un codice hex da esso.
Carica l'immagine, passa il mouse sul pixel, clicca e copia il codice.