Come funziona il contagocce
Carica una foto, uno screenshot o un logo e fai clic in un punto qualsiasi. Lo strumento legge quel pixel esatto e mostra il colore in HEX (per esempio #1e88e5) e in RGB (rgb(30, 136, 229)). Il pulsante Copia mette il codice HEX negli appunti. Appena l'immagine si carica viene letto il pixel centrale, così hai subito un valore.
Ogni colore che scegli finisce in una fila di campioni recenti (fino a otto): puoi provare più punti — un pulsante, uno sfondo, un titolo — e confrontarli prima di decidere. L'immagine viene letta in un canvas nel tuo browser e non viene mai caricata online.
HEX, RGB e HSL in parole semplici
Tutti e tre descrivono lo stesso colore sullo schermo, solo scritto in modo diverso.
- HEX —
#RRGGBB, tre coppie di cifre esadecimali per rosso, verde e blu, da00aff. È ciò che chiedono CSS, Figma, Canva, i temi WordPress e quasi tutti i campi "colore del brand". - RGB — gli stessi tre canali come numeri decimali da 0 a 255.
#1e88e5ergb(30, 136, 229)sono identici. Comodo nel codice, in Office e nei programmi con i cursori. - HSL — tonalità (0–360° sulla ruota dei colori), saturazione e luminosità in percentuale. Il contagocce non mostra l'HSL, ma qualsiasi programma di grafica o il CSS converte l'HEX all'istante. L'HSL è utile quando vuoi una versione più chiara o più scura del colore scelto: tieni la tonalità e cambi solo la luminosità.
Prendere colori dagli screenshot
Per copiare un colore da un'app, un sito o un fotogramma di video, fai uno screenshot (Windows: Win + Maiusc + S; Mac: Cmd + Maiusc + 4; telefono: accensione + volume giù, oppure tasto laterale + volume su su iPhone) e trascinalo qui.
Consigli per un risultato preciso:
- Clicca su aree uniformi. Punta al centro di un pulsante, non al bordo: i bordi sono sfumati (antialiasing) con lo sfondo e danno un colore intermedio.
- Le foto hanno rumore. Pixel vicini in una foto differiscono un po'; prova diversi punti e tieni il più rappresentativo.
- Gli screenshot possono alterare i colori. Modalità notte, Night Shift, HDR o un display con gestione del colore possono tingere l'acquisizione. Disattivali se ti serve il colore esatto del brand.
- I JPG molto compressi deviano. Un JPG salvato molte volte mostra macchie vicino ai bordi. Usa il PNG o l'SVG originale del logo, se lo hai.
- Le aree trasparenti non hanno un colore vero; cliccandole ottieni nero (
#000000). Clicca sulla parte visibile del logo.
Controlla il contrasto prima di usare il colore
Un bel colore può comunque risultare illeggibile come testo. Le linee guida di accessibilità (WCAG) chiedono un contrasto di almeno 4,5:1 tra testo normale e sfondo, e 3:1 per testo grande e icone. Grigio chiaro su bianco o blu medio su blu scuro spesso non passano.
Una volta presi i colori di testo e sfondo, incolla entrambi gli HEX in un qualsiasi verificatore di contrasto. Se il rapporto è basso, scurisci il testo o schiarisci lo sfondo: regolare la luminosità in HSL è il modo più veloce per correggere restando nel brand.
Usi tipici
- Trovare il colore del brand da un logo ricevuto come immagine.
- Ricreare il colore di un pulsante o di uno sfondo di un sito nel tuo progetto.
- Costruire una palette da una foto per slide, post social o un moodboard d'arredo.
- Scegliere lo sfondo dell'icona Apple touch nel generatore di favicon.
Strumenti collegati
- Scontorna prima il soggetto e prendi il colore senza sfondo: Rimuovi sfondo.
- Isola una piccola area per cliccare con più precisione: Ritaglia immagine.
- Ti serve l'immagine stessa come codice per il CSS? Immagine in Base64.