Come si usa
- Scegli un'immagine o trascinala nel riquadro.
- Sposta il puntatore sull'immagine; la lente mostra i pixel circostanti.
- Fai clic o tocca per selezionare il colore e copiarlo come HEX, RGB o HSL.
- Scorri verso il basso per vedere i colori dominanti, scegli quanti ne vuoi e copiali o scaricali come variabili CSS.
Come funziona
L'immagine viene disegnata su un canvas nel browser e il colore del pixel esatto sotto il puntatore viene letto da lì. La lente mostra un'area di 11 × 11 pixel ingrandita, con il pixel scelto evidenziato. Le immagini con lato superiore a 4096 pixel vengono prima ridimensionate, quindi nelle foto molto grandi un pixel selezionato è la media di alcuni pixel originali.
I colori dominanti vengono individuati con il clustering k-means: i pixel vengono prima raggruppati in 32.768 piccoli gruppi di colori, poi i gruppi vengono uniti nel numero di colori scelto, ponderati in base al numero di pixel contenuti. I punti di partenza sono scelti in modo deterministico, quindi la stessa immagine produce sempre la stessa palette.
I colori vengono letti nello spazio sRGB usato dal browser per la visualizzazione. Se un'immagine ha un profilo colore ampio incorporato, i valori possono differire leggermente da quelli mostrati da un editor fotografico. Nei browser che lo supportano (Chrome ed Edge su desktop), il pulsante Seleziona dallo schermo usa lo strumento integrato EyeDropper per prelevare un colore da qualsiasi punto dello schermo.
Esempi
Abbinare un colore aziendale
Carica uno screenshot di un logo, fai clic sul colore principale e copia #1a73e8 o rgb(26, 115, 232) nel tuo CSS.
Palette da una foto
Una foto di una spiaggia suddivisa in 6 colori restituisce toni di sabbia, mare e cielo, ciascuno con la quota di immagine che copre, ordinati dalla quota maggiore alla minore.
Controllare una tonalità
Ingrandisci con la lente per selezionare il pixel esatto di una linea sottile anziché il bordo anti-alias accanto.
Domande frequenti
Perché il colore è leggermente diverso rispetto al mio editor di foto?
I browser convertono le immagini in sRGB per la visualizzazione. Le foto con un profilo ad ampia gamma (Display P3, Adobe RGB) possono mostrare valori leggermente diversi in un editor che mantiene il profilo originale.
Perché manca il pulsante Seleziona dallo schermo?
Richiede l'API EyeDropper, supportata solo da alcuni browser, attualmente Chrome e Edge su desktop. La selezione dall'immagine caricata funziona ovunque.
Come vengono scelti i colori dominanti?
Attraverso il clustering k-means di tutti i pixel, ponderato in base alla frequenza con cui compare ogni colore. I dettagli piccoli ma vivaci possono essere accorpati a un colore vicino più presente; aumenta il numero di colori per separarli.
L'immagine viene caricata?
No. L'immagine viene decodificata e analizzata da questa pagina nel tuo browser e non lascia mai il tuo dispositivo.
Privacy
L'immagine viene elaborata interamente nel tuo browser. Non viene caricata e i colori selezionati non vengono inviati né salvati.