Ti serve il colore esatto di un logo, uno screenshot, una foto o un riferimento di design? Carica l'immagine, muovi il cursore sopra di essa per vedere in anteprima il colore sotto una lente d'ingrandimento e fai clic per salvarlo. Ogni colore salvato mostra il suo HEX, RGB e HSL con pulsanti di copia con un clic.
Legge i pixel direttamente dall'immagine nel tuo browser, quindi la selezione è istantanea e il file non viene mai caricato: comodo per i colori di brand che preferiresti non inviare a un sito qualsiasi.
Come si usa
- Aggiungi un'immagineTrascina l'immagine o lo screenshot da cui vuoi i colori.
- Passa il cursore e fai clicLa lente ingrandisce il pixel esatto; fai clic per salvare il colore.
- Copia il valorePrendi HEX, RGB o HSL per ogni colore che hai salvato.
A volte ti serve un colore da un'immagine e nient'altro va bene — l'esatto blu di un logo, il grigio dietro un pulsante in uno screenshot, una tonalità in una foto che vuoi riutilizzare. Il tuo occhio non può leggere un codice esadecimale da uno schermo, e il colore che sembra giusto di solito è sbagliato di qualche cifra. Questo selettore ti permette di caricare un'immagine, muoverti su di essa con una lente d'ingrandimento che ingrandisce i pixel sotto il cursore, e cliccare per salvare come campione esattamente quello che vuoi — HEX, RGB e HSL mostrati tutti insieme, ciascuno con un pulsante di copia.
Legge i pixel localmente nel tuo browser da un canvas: nulla viene caricato, non c'è account, e dopo il primo caricamento funziona offline. Questo conta quando l'immagine è un mockup non ancora uscito, l'asset di brand di un cliente o uno screenshot interno. È un campionatore puntuale — ogni clic legge un pixel, il che è esattamente giusto per un logo pulito o un'interfaccia piatta, e richiede un po' più di attenzione su una foto rumorosa. Se preferisci che i colori dominanti di un'intera immagine ti vengano estratti in automatico, è a questo che serve lo strumento tavolozza separato; questo serve a puntare a un pixel specifico e prenderne il valore.
Per cosa lo usano le persone
Recuperare il colore esatto di un brand da un vecchio logo quando la specifica è andata persa
Abbinare un pulsante o un titolo al colore in uno screenshot di un sito che ti piace
Prelevare i colori primario, d'accento e del testo da un logo in un solo passaggio
Prendere una tonalità da una foto da usare come sfondo o accento
Leggere il vero colore a schermo di un elemento semitrasparente da uno screenshot
Copiare un colore come HSL così da poterlo schiarire o smorzare per uno stato al passaggio del mouse o una variante
Quando ti serve il colore esatto, non un colore che ci va vicino
Stai ricostruendo un brand e l'unico riferimento è un vecchio logo. Stai abbinando un pulsante allo screenshot di un sito che ti piace. Hai notato una sfumatura in una foto e vuoi usarla nel tuo design. In ogni caso il problema è lo stesso: il tuo occhio non riesce a leggere un codice esadecimale da uno schermo. "Quel verde acqua" è in realtà una dozzina di verdi acqua leggermente diversi, e i monitor li spostano ancora di più. Ti serve il numero che il pixel contiene davvero.
È questo che fa questo strumento. Carica un'immagine, muoviti sopra di essa, e una lente d'ingrandimento segue il cursore mostrando i pixel sottostanti, ingranditi così puoi atterrare esattamente su quello che vuoi. Clicca, e quel colore è salvato come campione. Ogni campione elenca il suo valore HEX, RGB e HSL con un pulsante di copia accanto a ciascuno, così vai direttamente da un pixel nell'immagine a un codice nei tuoi appunti.
L'immagine non lascia mai la tua macchina. I pixel sono letti in locale nel browser da un canvas — nulla viene caricato, non c'è nessun account, e una volta che la pagina è caricata continua a funzionare con la rete spenta. È il punto quando l'"immagine" è un mockup non ancora uscito, un asset di brand di un cliente, o uno screenshot interno che non dovresti consegnare a uno strumento web a caso.
Come funziona in pratica
- La lente è per la precisione. I loghi e le interfacce hanno bordi netti dove il colore cambia su un singolo pixel — l'antialiasing significa che il pixel accanto è una mescolanza torbida. La vista ingrandita ti fa vedere esattamente su quale pixel sei prima di decidere, così scegli il colore piatto del brand e non il bordo.
- Ogni clic tiene un campione. Il campionamento non è uno-alla-volta-e-via. Clicca in giro per l'immagine e ogni colore si accumula in una lista, così puoi estrarre il primario di un logo, il suo accento e il colore del testo in una sola passata e confrontarli fianco a fianco.
- Tre formati, un solo prelievo. Ogni campione mostra HEX, RGB e HSL insieme. Non ricampioni per cambiare formato — lo stesso colore è già lì in tutti e tre, ciascuno con il proprio pulsante di copia.
HEX, RGB, HSL — quale copiare
Sono tre modi di scrivere lo stesso colore, e quello giusto dipende da dove va.
- HEX (
#3A7BD5) è il predefinito per il web — CSS, la maggior parte degli strumenti di design, i documenti di brand. Compatto e incollabile ovunque. Copia questo a meno che tu non abbia un motivo per non farlo. - RGB (
rgb(58, 123, 213)) esplicita i canali rosso, verde e blu. Utile quando uno strumento vuole i valori dei canali, quando ti serve un alfa (rgba), o quando stai ragionando su come è miscelato un colore. - HSL (
hsl(215, 65%, 53%)) descrive tonalità, saturazione e luminosità. È quello da usare quando vuoi regolare un colore invece di semplicemente riutilizzarlo — sposta la luminosità per uno stato hover, abbassa la saturazione per una variante attenuata, mantieni la tonalità e costruisci una scala.
Un limite onesto, e uno strumento fratello
Questo è un campionatore puntuale: ogni clic legge un singolo pixel. Su un logo pulito o un'interfaccia piatta è esattamente ciò che vuoi. Su una foto rumorosa — grana, gradienti, artefatti JPEG — due pixel vicini possono differire, quindi preleva da un'area piatta e usa la lente per evitare di atterrare su un valore anomalo. Qui non c'è un pennello di media-di-una-zona.
E se non vuoi affatto prelevare a mano, img.diy ha uno strumento palette separato che scandaglia un'intera immagine e ti consegna automaticamente i suoi colori dominanti. I due rispondono a domande diverse. Lo strumento palette ti dice di quali colori è fatta questa immagine; il selettore di colore ti fa puntare a uno specifico pixel — questo punto esatto sul logo, quel pulsante — e prenderne il valore. Ricorri allo strumento palette per riassumere un'immagine, e a questo quando sai già il punto che vuoi.
Carica un'immagine, passa sopra per trovare il pixel, clicca per tenerlo, copia il formato che ti serve.
Perché IMG.DIY
Lente d'ingrandimento
Ingrandisce così fai clic sul pixel esatto.
HEX / RGB / HSL
Ogni colore salvato in tre formati.
Copia con un clic
Copia qualsiasi valore direttamente negli appunti.
Privato
I pixel vengono letti in locale: nessun caricamento.