Estrattore di Palette Colori
Estrai i colori dominanti da qualsiasi immagine. Ottieni codici hex, valori RGB e crea splendide palette di colori.
Trascini un'immagine qui o clicchi per caricare (singolo file)
o incolla un'immagine dagli appunti (Ctrl+V / ⌘V)
Distribuzione dei Colori
Copied!
Pubblicità
Informazioni su questo strumento
L'Estrattore di Palette Colori analizza qualsiasi immagine caricata per identificare ed estrarre i colori visivamente più significativi. Utilizza l'algoritmo di quantizzazione del colore median cut (Heckbert, 1982), una tecnica consolidata della ricerca sull'elaborazione digitale delle immagini che e stata ampiamente adottata in software grafici, sistemi di stampa e strumenti di sviluppo web. A differenza del semplice campionamento di pixel, che seleziona punti arbitrari in un'immagine, l'algoritmo median cut esamina ogni pixel nei dati dell'immagine e partiziona ricorsivamente l'intero spazio colore in regioni distinte. Questo approccio garantisce che la palette risultante rappresenti accuratamente la vera distribuzione dei colori dell'immagine, catturando sia i toni dominanti dello sfondo che i colori di accento più piccoli che danno carattere a una composizione. Lo strumento produce colori in tre formati standard del settore. I codici HEX sono lo standard web usato in CSS e HTML per stilizzare le pagine web. I valori RGB (Rosso, Verde, Blu) sono il formato usato dalla maggior parte dei software di design tra cui Photoshop, Figma e Sketch. I valori HSL (Tonalità, Saturazione, Luminosità) forniscono un modello di colore intuitivo particolarmente utile per regolazioni sistematiche di luminosità, saturazione o tonalità. Funzionalità aggiuntive includono la generazione di armonie cromatiche (schemi complementari, analoghi, triadici, complementari divisi e tetradici), verifica del contrasto WCAG per la conformita all'accessibilità e simulazione del daltonismo. Può ordinare i colori estratti per dominanza, luminosità, tonalità o saturazione. Le opzioni di esportazione includono proprietà CSS personalizzate, configurazione Tailwind CSS, dati JSON per uso programmatico e immagini PNG dei campioni. Lo strumento usa l'HTML Canvas API (standard W3C) per l'analisi a livello di pixel e tutta l'elaborazione avviene interamente nel Suo browser. Le Sue immagini non vengono mai caricate su alcun server.
Come usare
- Carica un'immagine trascinandola o cliccando per sfogliare. Funziona con foto, opere d'arte, loghi o screenshot.
- Selezioni quanti colori estrarre (5-15) e scelga il formato colore preferito (HEX, RGB o HSL).
- Clicchi su un campione di colore per copiarne il valore. Esporti come proprietà CSS personalizzate, JSON o campioni PNG per i Suoi progetti.
La Scienza dell'Estrazione del Colore
L'estrazione del colore dalle immagini digitali affonda le sue radici nel campo della quantizzazione del colore, un ramo dell'elaborazione digitale delle immagini emerso all'inizio degli anni 1980 quando i display dei computer erano limitati a pochi colori simultanei. L'articolo di Paul Heckbert del 1982 introdusse l'algoritmo median cut come metodo efficiente per ridurre milioni di colori pixel unici a una palette rappresentativa, e rimane uno degli approcci più utilizzati oggi. L'occhio umano può distinguere circa 10 milioni di colori, ma la maggior parte delle immagini contiene solo da poche centinaia a qualche migliaio di colori percettivamente distinti. Gli algoritmi di quantizzazione del colore sfruttano questo raggruppando colori visivamente simili. L'approccio median cut opera nello spazio colore RGB tridimensionale, dove ogni pixel viene trattato come un punto con coordinate corrispondenti ai suoi valori di intensità rosso, verde e blu. Le applicazioni moderne dell'estrazione del colore vanno ben oltre l'ottimizzazione del display. Nel web design, le palette estratte aiutano i designer a creare sistemi visivi coerenti. Nella visualizzazione dati, l'estrazione identifica scelte di palette ottimali con contrasto sufficiente. I designer di brand usano l'estrazione per ricavare specifiche di colore digitali da materiali fisici come campioni di tessuto o vernice. Principi di teoria del colore come armonie complementari, analoghe e triadiche possono essere applicati ai colori estratti per generare palette espanse. Queste armonie si basano su relazioni matematiche attorno alla ruota dei colori HSL: i colori complementari distano 180 gradi, gli analoghi entro 30 gradi e i triadici formano un triangolo equilatero a intervalli di 120 gradi.
Come usare
- Carica un'immagine trascinandola o cliccando per sfogliare. Funziona con foto, opere d'arte, loghi o screenshot.
- Selezioni quanti colori estrarre (5-15) e scelga il formato colore preferito (HEX, RGB o HSL).
- Clicchi su un campione di colore per copiarne il valore. Esporti come proprietà CSS personalizzate, JSON o campioni PNG per i Suoi progetti.
Metodologia
Questo strumento offre due algoritmi di estrazione del colore. Il clustering k-means raggruppa pixel simili regolando iterativamente i centri dei cluster fino alla convergenza, producendo palette orientate verso i colori visivamente dominanti. Median cut (Heckbert, 1982) divide ricorsivamente lo spazio colore lungo la sua dimensione di canale più ampia nel punto mediano, creando palette distribuite più uniformemente. Entrambi gli algoritmi operano su una copia ridimensionata della Sua immagine (massimo 200×200 pixel) per un'elaborazione efficiente. I pixel trasparenti sono esclusi dall'analisi. Il filtraggio dell'atmosfera cromatica pre-seleziona i pixel per proprietà HSL prima del clustering, è il generatore di design system applica l'assegnazione di ruoli basata sulla luminanza alla palette finale.
Fonti: Median Cut Algorithm · K-Means Clustering
Capire i tuoi risultati
La palette estratta rappresenta i colori visivamente più significativi della Sua immagine, ordinati per dominanza. Il primo colore copre l'area di pixel più grande ed e tipicamente lo sfondo o il colore del soggetto principale. I colori successivi rappresentano porzioni progressivamente più piccole dell'immagine. Scelga la dimensione della palette in base ai Suoi obiettivi di design. Una palette di 3-5 colori funziona meglio per identità di brand coese, temi di siti web e design UI dove semplicita e coerenza sono prioritarie. Una palette di 6-8 colori cattura toni intermedi, ideale per illustrazioni o materiali di marketing. Una palette di 9-10 colori rivela sfumature sottili e variazioni di texture, perfetta per analisi dettagliate di opere d'arte o guide di stile complete. Usi le opzioni di ordinamento per diversi flussi di lavoro. Ordini per dominanza per il peso visivo, per tonalità per l'analisi dell'armonia lungo la ruota dei colori, per luminosità per il contrasto di valore e per saturazione per identificare colori vividi rispetto a quelli smorzati. Il verificatore di contrasto WCAG aiuta a verificare che la Sua palette soddisfi gli standard di accessibilità. Un rapporto di contrasto di almeno 4,5:1 e richiesto per il testo normale (livello AA), mentre 3:1 e sufficiente per il testo grande. L'anteprima del daltonismo assicura che la Sua palette rimanga distinguibile per utenti con protanopia, deuteranopia o tritanopia.
Esempi pratici
Esempio 1 - Identità del Brand: Carichi il logo della Sua azienda per estrarre i colori esatti, poi usi l'esportazione CSS per costruire un tema web coerente con quei colori del brand come proprietà personalizzate. Esempio 2 - Moodboard Fotografico: Estragga 8-10 colori da una foto paesaggistica per catturare l'intera gamma di toni naturali, dai blu del cielo ai verdi del fogliame fino ai toni terra e alle luci. Esporti come campione PNG per il Suo moodboard. Esempio 3 - Design UI dall'Ispirazione: Trovi una fotografia che catturi l'atmosfera desiderata per la Sua app. Estragga 5 colori e usi il generatore di armonie per creare variazioni complementari e analoghe per pulsanti, sfondi e testo. Esempio 4 - Audit di Accessibilita: Estragga la palette colori del Suo sito web esistente da uno screenshot, poi usi il verificatore di contrasto WCAG per identificare coppie di colori che non soddisfano i requisiti di accessibilità.
Consigli per una Migliore Estrazione
1. Usi immagini ad alta risoluzione quando possibile. Una risoluzione più alta fornisce più dati di pixel per l'algoritmo, producendo palette più accurate e rappresentative. Immagini a bassa risoluzione o molto compresse possono introdurre artefatti JPEG. 2. Ritagli la Sua immagine prima del caricamento se vuole concentrarsi su una regione specifica. L'estrazione da una scena completa includera colori di sfondo che potrebbero non essere rilevanti. 3. Regoli la dimensione della palette in base al Suo scopo. Inizi con 5 colori per una palette pulita. Aumenti a 8-10 se ha bisogno di catturare variazioni sottili come ombre, mezzitoni e alte luci. 4. Usi l'opzione di ordinamento HSL per identificare rapidamente le relazioni tra i colori estratti. Colori vicini in tonalità ma variabili in saturazione o luminosità creano combinazioni naturalmente armoniose. 5. Verifichi sempre i rapporti di contrasto con il verificatore WCAG integrato prima di usare colori estratti per testo e sfondi. Una bella palette e efficace solo se rimane leggibile e accessibile. 6. Esporti come proprietà CSS personalizzate per progetti web per mantenere un'unica fonte di verità per i Suoi valori di colore.
Fonti
Tutti i calcoli vengono eseguiti localmente nel tuo browser. Nessun dato viene inviato a un server.
Incorpora questo strumento
Questo strumento ti è stato utile?
Vuoi dirci di più?
0/500
Vuoi che ti ricontattiamo?
Domande frequenti
Come funziona l'estrazione dei colori?
Gli algoritmi di quantizzazione dei colori analizzano tutti i pixel e raggruppano i colori simili. I gruppi di colori più frequenti/dominanti diventano la Sua palette.
Quali formati di colore sono disponibili?
HEX (#FF5733) per web/CSS, RGB (255, 87, 51) per software di design, HSL (14°, 100%, 60%) per la teoria del colore.
Come posso esportare la palette?
Esporta come variabili CSS (incolla nel foglio di stile), dati JSON (uso programmatico) o immagine PNG (presentazioni, guide di stile).
Quali sono i buoni casi d'uso?
Crea palette per il brand da immagini di ispirazione, abbina i colori dell'interfaccia alle foto, trova colori complementari per l'arte, garantisci coerenza visiva.
La mia immagine viene caricata su un server per l'elaborazione?
No. Tutta l'estrazione dei colori avviene interamente nel Suo browser tramite l'API Canvas HTML5. La Sua immagine viene caricata in un elemento canvas locale per l'analisi dei pixel e non lascia mai il Suo dispositivo. Non vengono effettuate richieste di rete durante il processo, garantendo completa privacy.
Quali formati di immagine posso caricare?
Può caricare qualsiasi formato di immagine supportato dal Suo browser, inclusi JPEG, PNG, WebP, GIF, BMP e SVG. Per l'estrazione più accurata, le foto ad alta risoluzione e le immagini con contenuto cromatico vario funzionano meglio. Immagini molto piccole o con pochi colori distinti potrebbero produrre palette meno variate.
Qual è la differenza tra k-means e median cut?
Il clustering k-means raggruppa i pixel affinando iterativamente i centri dei cluster per minimizzare la distanza cromatica. Tende a produrre palette orientate verso i colori visivamente più dominanti. Median cut divide lo spazio colore lungo la sua dimensione più ampia nel punto mediano, creando gruppi di uguale dimensione. In genere cattura una gamma più ampia di colori, inclusi quelli meno dominanti. Entrambi gli algoritmi vengono eseguiti interamente nel Suo browser.
Cosa sono le modalità di atmosfera cromatica?
Le modalità di atmosfera cromatica filtrano la palette estratta in base alla sensazione visiva. Vibrante mostra colori altamente saturi a luminosità media. Smorzato si concentra su toni desaturati. Scuro estrae colori profondi a bassa luminosità. Chiaro evidenzia tonalità pallide ad alta luminosità. Naturale mostra tutti i colori senza filtro. È utile quando si desidera un'atmosfera specifica dalla propria immagine.
Come funziona il generatore di design system?
Il generatore di design system assegna automaticamente ruoli semantici ai colori estratti in base all'analisi di luminanza e saturazione. Identifica i migliori candidati per primario (più saturato), secondario, accento, sfondo (più chiaro), testo (massimo contrasto con lo sfondo) e colori di bordo. Può copiare il risultato come proprietà CSS personalizzate pronte all'uso.
Posso selezionare colori specifici dall'immagine?
Sì. Clicchi sul pulsante contagocce per abilitare la modalità di selezione colore. Passi il cursore sull'immagine per vedere un'anteprima ingrandita dell'area sotto il cursore. Clicchi per aggiungere quel colore esatto alla Sua palette. Può anche fare doppio clic su qualsiasi campione per modificare manualmente il valore del colore e bloccare i colori per preservarli durante la ri-estrazione.
Cos'è il formato di esportazione ASE?
ASE (Adobe Swatch Exchange) è un formato di file binario utilizzato dalle applicazioni Adobe Creative Suite, tra cui Photoshop, Illustrator e InDesign. Esportare la Sua palette come file ASE Le permette di importarla direttamente in questi strumenti di design. Il file contiene i valori RGB è il nome di ogni colore.