Come utilizzare un selettore di colori per trovare i colori da qualsiasi pixel
Risposta rapida
Per scegliere un colore: apri il selettore colore, carica un'immagine (o usa il contagocce sullo schermo), fai clic sul pixel di cui desideri il colore e verranno visualizzati i valori HEX, RGB e HSL. Tutta l'elaborazione avviene localmente: la tua immagine non viene mai caricata.
Introduzione
Un selettore di colori (chiamato anche contagocce) ti consente di trovare il colore esatto di un pixel. Ciò è essenziale per abbinare i colori del marchio, campionare i colori dalle immagini o creare una tavolozza di colori da una foto. I selettori di colore basati sul browser possono leggere i colori dalle immagini caricate utilizzando Canvas API e l'EyeDropper integrato nel browser API può scegliere i colori da qualsiasi punto dello schermo. Questa guida ti mostra come utilizzare un selettore di colori nel tuo browser.
Passo dopo passo
-
Apri lo strumento Selettore colore
Vai alla pagina dello strumento Selettore colore. Lo strumento supporta la selezione dei colori dalle immagini caricate e, nei browser supportati, da qualsiasi punto dello schermo tramite EyeDropper API.
-
Scegli la tua fonte
Per scegliere da un'immagine: carica o trascina e rilascia un'immagine. Per scegliere dallo schermo (solo Chrome/Edge): fai clic sul pulsante "Scegli dallo schermo", quindi fai clic in un punto qualsiasi dello schermo.
-
Fare clic sul pixel da campionare
Per la selezione delle immagini, sposta il cursore sull'immagine e fai clic sul pixel di cui desideri il colore. Lo strumento legge il colore dei pixel dall'area di disegno utilizzando getImageData(). Una lente d'ingrandimento può aiutarti a selezionare il pixel esatto.
-
Leggi i valori dei colori
Lo strumento visualizza il colore selezionato nei formati HEX, RGB e HSL, insieme a un campione. I valori si aggiornano istantaneamente mentre si sposta il cursore.
-
Copia il colore
Fai clic su Copia accanto a qualsiasi formato per copiare il valore del colore negli appunti. Usalo nel tuo CSS, strumento di progettazione o applicazione.
Esempi
Scegli il colore del marchio da un logo
Ingresso: logo.png, fai clic sul pixel del colore del marchio
Produzione: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Prova un colore da una foto
Ingresso: photo.jpg, fai clic su un pixel del cielo
Produzione: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Scegli dallo schermo (Chrome/Edge)
Ingresso: Fai clic su "Scegli dallo schermo", quindi fai clic su qualsiasi pixel sul display
Produzione: HEX valore di quel pixel, ad esempio, #ff5733
Problemi comuni
- L'anti-aliasing fonde i colori sui bordi: i pixel sul bordo tra due colori costituiscono una fusione. Campionare dal centro di un'area di colore solido per garantire la precisione.
- EyeDropper API non supportato: il selettore schermo richiede Chrome 95+ o Edge 95+. Firefox e Safari non lo supportano; utilizzare invece il metodo di caricamento delle immagini.
- La compressione JPEG altera i colori —JPEG la compressione con perdita modifica leggermente i colori dei pixel. Per i colori esatti del marchio, utilizza PNG o la fonte vettoriale originale.
- Differenze nel profilo colore: le immagini con profili colore incorporati (ICC) potrebbero essere visualizzate in modo diverso rispetto a quanto suggerito dai valori dei pixel grezzi.
Suggerimenti
- Utilizza la lente d'ingrandimento per selezionare il pixel esatto: con uno zoom elevato, puoi selezionare un singolo pixel preciso anziché un bordo sfumato.
- Campiona più pixel da un'area solida e calcola la media se la compressione ha introdotto rumore: ciò fornisce un colore più rappresentativo.
- Utilizza EyeDropper API (Chrome/Edge) per scegliere i colori da qualsiasi applicazione, non solo dalle immagini nel browser.
- Utilizza il nostro Selettore colore per un campionamento colore istantaneo e privato: le tue immagini non lasciano mai il tuo browser.