Risposta diretta
L'estrattore di palette analizza i pixel di un'immagine mediante algoritmi di clustering cromatico eseguiti nel Canvas locale, estraendo i colori dominanti e le sfumature armoniche senza caricare dati all'esterno.
Come usare questo strumento
Caricare o trascinare una foto
Importa una fotografia nei formati JPG, PNG o WebP nell'area di analisi.
Definire il numero di campioni cromatici
Scegli quanti colori estrarre (da 3 a 10 campioni principali).
Ispezionare i codici colore
Clicca su ciascun colore per visualizzare i valori nei formati HEX, RGB e HSL.
Copiare o esportare la palette
Esporta la tavolozza colori come variabili CSS, array JSON o immagine campione.
Clustering dei pixel nello spazio colore tridimensionale
I dati dei pixel vengono campionati dall'oggetto ImageData del Canvas e raggruppati tramite quantizzazione a colori (algoritmo Median Cut o K-Means). I centroidi dei cluster più popolati determinano la gerarchia cromatica dominante dell'immagine.
- Il campionamento uniforme dei pixel consente una convergenza rapida dell'algoritmo anche su immagini di grandi dimensioni.
- La distinzione tra colori dominanti e tonalità d'accento offre combinazioni equilibrate per il design di interfacce web.
Esempi pratici
Estrazione della palette da un paesaggio al tramonto
Input: Fotografia: tramonto.jpg (cielo arancione, mare blu scuro, spiaggia dorata)
Output: Palette 5 colori: #1a2a3a, #e65c00, #f9d423, #ff8c42, #f4e8c1
Crea una combinazione cromatica armonica pronta per l'impiego in progetti grafici o brand identity.
Limitazioni
- Immagini con rumore fotografico elevato o compressione artefatta possono generare cluster leggermente instabili tra scansioni successive.
Domande frequenti
Le immagini caricate vengono conservate o inviate a servizi terzi?
No. L'estrazione avviene interamente all'interno dell'ambiente Canvas del tuo browser; nessun dato lascia il tuo dispositivo.
In quali formati posso esportare la palette estratta?
Puoi copiare i singoli codici HEX negli appunti, esportare variabili CSS (--color-primary, ecc.) oppure salvare un oggetto JSON strutturato.
Riferimenti autorevoli e standard
- MDN Web Docs: Manipolazione dei pixel con Canvas 2D e ImageData ↗ — Documentazione tecnica sull'accesso ai buffer di byte RGBA e la scansione dei dati grafici in memoria.
- Standard W3C sulla luminanza e percezione cromatica ↗ — Riferimento per il calcolo della brillanza e il bilanciamento visivo delle tonalità.