Perché abbiamo aggiunto l'estrazione automatica della palette al selettore di colori

Il nostro selettore di colori ha sempre permesso di caricare un’immagine e cliccare su qualsiasi pixel per ottenere il suo valore esatto in HEX, RGB e HSL. Questo risponde a “di che colore è questo punto esatto?” — utile, ma non è la domanda che la maggior parte delle persone si pone davvero caricando una foto. Di solito è “qual è lo schema di colori generale di questa immagine?” — estrarre la palette del brand da un logo, o abbinare il tono di una foto di riferimento allo schema colori di un sito web.

Il campionamento di un singolo pixel non può rispondere a questo. Così abbiamo aggiunto l’estrazione della palette: carica un’immagine, e lo strumento ora estrae automaticamente gli otto colori più dominanti e li mostra come campioni cliccabili.

Come funziona

Non è coinvolto alcun modello di IA e non viene caricato nulla da nessuna parte — è un semplice algoritmo di conteggio delle frequenze che gira in pochi millisecondi:

L’immagine viene ridotta a una tela di 80×80. Non serve la risoluzione completa per le statistiche sui colori, e la riduzione mantiene tutto istantaneo anche con foto grandi.
Ogni pixel viene raggruppato secondo una versione semplificata del suo colore — i 5 bit superiori di ogni canale RGB, così i pixel visivamente quasi identici finiscono nello stesso gruppo invece di essere contati ciascuno come colore unico.
I gruppi vengono ordinati in base a quanti pixel contengono, e gli otto più grandi diventano la palette, ciascuno mostrato come il colore medio di tutto ciò che è in quel gruppo.

Tutto qui. Nessun machine learning, nessun servizio esterno — solo riduzione del campionamento e conteggio, ecco perché è istantaneo e non lascia mai il tuo browser.

Clicca su un campione, ottieni il codice

Ogni campione della palette è cliccabile: cliccaci sopra e diventa il colore attivo dello strumento, con HEX, RGB e HSL compilati automaticamente e l’hex copiato negli appunti con lo stesso clic. C’è anche un pulsante “copia tutto” se vuoi l’intera palette come elenco separato da virgole, utile per incollarla direttamente in uno strumento di design o in un blocco di proprietà personalizzate CSS.

Provalo

Carica qualsiasi immagine — uno screenshot, un logo, una foto — sulla pagina del selettore di colori e la palette appare automaticamente sotto.