Estrattore di palette di colori gratuito

Come funziona davvero l'estrazione dei colori

Le palette estratte dal computer dalle immagini provengono da uno di due algoritmi classici:

• Clustering K-means (Lloyd 1982; l'idea di base risale a MacQueen 1967 e Forgy 1965). Scegli K centroidi di colore casuali nel cubo dei colori, assegna ogni pixel al suo centroide più vicino, ricalcola i centroidi come la media dei pixel assegnati, e ripeti finché i centroidi non smettono di muoversi. I K centroidi finali sono i tuoi colori dominanti.
• Quantizzazione median-cut (Heckbert, SIGGRAPH 1982). Suddividi ricorsivamente il cubo dei colori lungo la sua dimensione più ampia, dividendo ogni volta la popolazione di pixel in due metà uguali. Dopo K suddivisioni hai K scatole, e il colore medio di ogni scatola è una voce della palette. Questo è l'algoritmo usato dalla popolare libreria JavaScript Color Thief, e storicamente il modo in cui le immagini a colori indicizzati (palette GIF, PNG) vengono ridotte da milioni di colori a 256.

Entrambi i metodi producono un piccolo insieme di colori rappresentativi da una popolazione di pixel molto più grande, ma fanno compromessi diversi. Il K-means è più flessibile ma sensibile al seme casuale e ai valori anomali. Il median-cut è deterministico e bilancia la copertura dello spazio colore ma può sovrarappresentare le regioni strette dove l'immagine si trova a spendere molti pixel.

Perché la distanza RGB mente

Un'avvertenza sottile ma importante: il clustering nel semplice spazio RGB dà risultati che non sempre corrispondono alla percezione umana. L'RGB è un sistema di coordinate guidato dall'hardware, le distanze al suo interno corrispondono a differenze elettroniche tra i primari, non a differenze percepite tra i colori. Due verdi che ti sembrano identici possono avere una distanza RGB molto più grande di un verde e un rosso che sembrano ovviamente diversi.

Un clustering più accurato avviene in CIELAB (CIE 1976 L*a*b*), uno spazio colore progettato specificamente affinché la distanza euclidea nello spazio approssimi la differenza percepita dall'uomo tra due colori. Gli strumenti per palette moderni come Adobe Color e molti generatori di campioni dei sistemi di design eseguono il clustering in CIELAB o CIELCH. Il CSS Color Module Level 4 (W3C, 2022) ha aggiunto le funzioni lab(), lch(), oklab() e oklch() per esporre questi spazi direttamente ai web designer, utile quando vuoi un'interpolazione della palette percettivamente uniforme. La specifica CSS si trova su w3.org/TR/css-color-4.

HEX, RGB, HSL, scegliere il formato giusto

Tutte e tre le notazioni descrivono lo stesso colore; sono modi diversi di scriverlo.

• HEX: #RRGGBB. Sei cifre esadecimali, due per canale, intervallo 00-FF (0-255). Il formato più comune del web. Compatto, copia-incollabile, supportato ovunque.
• RGB: rgb(255, 128, 0). Stessi numeri, notazione diversa. Il CSS aggiunge rgba(255, 128, 0, 0.5) per l'alfa.
• HSL: hsl(30, 100%, 50%). Tinta (0-360°), saturazione (0-100%), luminosità (0-100%). Più facile da ragionare per i designer, «stessa tinta, più saturazione» è una modifica di un singolo numero in HSL ma un aggiustamento multicanale in RGB.
• OKLCH: oklch(70% 0.15 30). Alternativa moderna e percettivamente uniforme all'HSL. Lo stesso numero di luminosità significa la stessa luminosità percepita tra le tinte, cosa che l'HSL notoriamente sbaglia (il giallo al 50% di luminosità appare molto più luminoso del blu al 50% di luminosità).

Per la maggior parte del lavoro web, copia l'HEX. Per la manipolazione programmatica della palette (schiarire del 10%, spostare la tinta di 30°), ricorri a HSL o OKLCH dove l'operazione è più pulita.

Perché dominante ≠ utile

Un'estrazione ingenua dei «colori più frequenti» spesso delude. Il ritratto di una persona su un cielo azzurro è statisticamente dominato dai pixel del cielo e dai toni della pelle, anche se la storia cromatica visivamente interessante potrebbe essere negli abiti del soggetto. Le foto con grandi sfondi neutri ottengono il neutro come colore «dominante». La forte compressione JPEG introduce colori di artefatto che si raggruppano come se fossero reali.

Gli strumenti per palette sofisticati pesano in base alla saturazione, al contrasto rispetto allo sfondo dominante, all'«interesse» percepito, o in base al fatto che un colore appaia in regioni salienti rilevate dai modelli di salienza Itti-Koch ispirati alla visione umana. La maggior parte degli strumenti online, incluso questo, usa un semplice clustering basato sulla frequenza, veloce, prevedibile e abbastanza buono per il caso comune di estrarre una palette da una foto, un'illustrazione o un'opera d'arte.

Casi d'uso comuni

• Abbinamento del marchio: un designer estrae una palette dal logo o dalla foto di primo piano di un cliente per mantenere il resto del sito visivamente coerente.
• Mood board: estrarre palette da immagini di ispirazione (fotogrammi di film, fotografie, dipinti) è il modo più veloce per iniziare un'esplorazione cromatica.
• Configurazioni Tailwind / token di design: trasformare una palette estratta in proprietà personalizzate CSS o in una mappa colors di Tailwind.
• Abbinamento dei colori delle presentazioni: scegliere i colori d'accento dal logo aziendale così la presentazione non stoni.
• Fotografia di prodotto per l'e-commerce: usare il colore dominante di ogni prodotto come campione nella scheda prodotto.
• Arte generativa & visualizzazione dati: alimentare le palette estratte nel codice degli shader, nei grafici D3 o negli sketch di Processing.
• Progettazione per la stampa: ottenere un insieme iniziale di colori da immagini di ispirazione, poi abbinarli a Pantone o CMYK nel software di progettazione per la stampa.

Perché qui conta il solo browser

Le foto spesso portano con sé più della sola immagine. I metadati EXIF possono includere le coordinate GPS dove è stata scattata la foto, il numero di serie della fotocamera, il nome di chi ha scattato e impronte del software. Gli screenshot possono contenere interfacce riservate, testo in bozza o branding pre-rilascio. Le foto personali possono contenere volti di persone che non hanno acconsentito a essere caricate da qualche parte. Estrarre una palette in realtà non ha bisogno di nulla di tutto ciò (ha bisogno solo dei dati dei pixel) e non c'è un buon motivo per inviare l'intera immagine a un server quando il browser può analizzarla localmente.

Questo strumento disegna l'immagine su un Canvas fuori schermo, campiona i dati dei pixel tramite getImageData(), esegue il clustering e mostra il risultato. Nulla lascia la pagina; l'immagine non viene conservata dopo la chiusura della scheda. Gli strumenti per palette lato server (Adobe Color, il selettore di immagini di Coolors e molti altri) caricano l'intero file. La privacy è il compromesso che fai con ciascuno.

Lavorare con l'output

Una volta che hai una palette estratta, di solito:

1. Cura. Un'estrazione automatica di 5 colori di solito ha 3 colori utili, 1 quasi-duplicato ridondante e 1 mezzotono fangoso. Scarta quello fangoso e deduplica.
2. Assegna i ruoli. Designa un colore come colore primario del marchio, uno come secondario, uno o due come accenti, e uno come neutro. I sistemi di marchio moderni spesso vogliono uno sfondo neutro, due ancore e un accento, cinque al massimo.
3. Genera scale chiare/scure. Da ogni colore di ancora, ricava 9-11 sfumature per gli stati hover, gli sfondi e le varianti tinteggiate. Strumenti come il generatore di scale di colori di Tailwind o la sezione palette di Refactoring UI hanno ricette ben note.
4. Verifica il contrasto. Fai passare le coppie testo-sfondo attraverso un verificatore di contrasto WCAG, il livello AA richiede 4,5:1 per il testo normale del corpo, 3:1 per i componenti dell'interfaccia grandi o in grassetto.
5. Verifica il deficit della visione dei colori. All'incirca 1 uomo su 12 ha qualche forma di daltonismo. Fai passare la palette attraverso un simulatore di CVD prima di fissarla.

Errori comuni

1. Usare tutti e cinque i colori estratti senza modifiche come palette del marchio. L'estrazione automatica è un punto di partenza, non una palette finita. Cura.
2. Scegliere i colori da un JPEG fortemente compresso. Gli artefatti di compressione producono false voci di palette. Parti da una sorgente di alta qualità se puoi.
3. Fidarsi della prima esecuzione su una foto complessa. Valori di K diversi (numero di colori) producono risultati drasticamente diversi, prova 5, 8 e 12 per vedere quale dimensione sembra giusta per la tua immagine.
4. Costruire una palette da una foto senza considerare la pagina in cui vivrà. Una palette tenue derivata da una foto può apparire splendida da sola ma sparire su uno sfondo di sito bianco. Fai delle prove nel contesto.
5. Ignorare il contrasto. Le palette belle a volte abbinano il testo a uno sfondo con un contrasto di 2:1 e non superano le WCAG. Controlla sempre.
6. Dimenticare che «dominante» può significare «sfondo». Il colore più frequente in un ritratto è spesso la parete dietro il soggetto, non i vestiti del soggetto.

Altre domande frequenti

Funzionerà su PNG trasparenti?

Sì. I pixel trasparenti vengono tipicamente saltati durante il campionamento così la palette riflette solo il contenuto visibile. Se carichi un PNG con uno sfondo trasparente e un logo colorato, la palette estratta saranno i colori del logo, non un neutro inquinato.

E i GIF animati?

Il decodificatore di immagini del browser tipicamente fornisce il primo fotogramma alla Canvas API, quindi la palette viene estratta dal fotogramma zero. Per una palette che copre tutti i fotogrammi, dovresti estrarre ogni fotogramma separatamente e combinare i risultati, cosa che va oltre ciò che fa uno strumento per immagini statiche.

L'immagine originale viene caricata da qualche parte?

No. L'immagine viene caricata in un elemento Canvas nel tuo browser, i dati dei pixel vengono letti tramite getImageData(), e il clustering viene eseguito in JavaScript sul tuo dispositivo. I byte dell'immagine non vengono mai trasmessi a nessun server. Questo è importante quando la sorgente contiene GPS EXIF, volti, screenshot di interfacce riservate o immagini di prodotti non rilasciati.

Perché la mia palette cambia tra un'esecuzione e l'altra?

Il K-means dipende dal suo posizionamento iniziale casuale dei centroidi, quindi due esecuzioni sulla stessa immagine possono atterrare su minimi locali leggermente diversi. Le differenze sono di solito sottili (un quasi-duplicato sostituito con una sfumatura simile) ma visibili. Il median-cut è deterministico, stesso input, stesso output ogni volta. Se lo strumento dovesse mai dare palette notevolmente diverse per la stessa immagine, sta usando un algoritmo randomizzato ed è un comportamento atteso.

Posso usare commercialmente i colori estratti?

I colori in sé non sono soggetti a copyright; i valori HEX sono fatti sui pixel. Ma l'immagine da cui hai estratto potrebbe esserlo, estrarre una palette dalla fotografia di qualcun altro va bene per l'ispirazione, ma riprodurre la foto o i suoi elementi registrati come marchio è una questione separata. Abbina i colori, non le immagini.

In cosa si differenzia da uno strumento di selezione del colore?

Uno strumento di selezione del colore legge il colore in una specifica posizione di pixel che indichi. Questo strumento analizza l'intera immagine e restituisce la palette più rappresentativa. Lavori diversi: i selettori servono per «qual è questo colore esatto?», gli estrattori di palette servono per «quali sono i colori dominanti nel complesso?». Entrambi hanno il loro posto nel flusso di lavoro di un designer.