Generatore di palette colori da immagine
Trascini una foto, uno screenshot o un logo e ottenga i colori dominanti con la loro quota nell’immagine. Prelevi pixel esatti con il contagocce, esporti la palette per il codice e verifichi quali coppie di colori sono leggibili.
Le serve un’interfaccia bella da vedere e facile da leggere?
Progettiamo e sviluppiamo siti e app con un sistema di colori coerente: palette del brand, contrasto accessibile, design token condivisi da designer e sviluppatori. Ci racconti il Suo progetto e riceva una stima.
Grazie! Ti risponderemo entro un giorno lavorativo.
In breve: carichi qualsiasi immagine e lo strumento ne trova i colori principali con il clustering k-means, mostra quanta parte dell’immagine copre ciascun colore e Le permette di prelevare pixel esatti con il contagocce. Esporti la palette in HEX, RGB, HSL, variabili CSS, configurazione Tailwind o JSON, poi verifichi il contrasto di due colori qualsiasi secondo le WCAG 2.2. Tutto avviene nel browser, l’immagine non viene caricata.
Come ottenere una palette di colori da un’immagine
- Aggiunga un’immagine. Trascini un file JPG, PNG, WebP, GIF o AVIF sulla pagina, lo scelga dal dispositivo o incolli uno screenshot con Ctrl+V. Non ha un’immagine a portata di mano? Prema «Prova con una foto di esempio».
- Scelga il numero di colori. Cinque o sei colori danno una palette di brand compatta, da otto a dieci conservano toni secondari e accenti. L’elenco è ordinato per quota nell’immagine; passi a «dal chiaro allo scuro» per vederlo come una scala.
- Prelevi i colori esatti. Clicchi in un punto qualsiasi dell’immagine per leggere il pixel sotto il cursore e aggiungerlo alla palette. Da tastiera, porti il focus sull’immagine, sposti il marcatore con le frecce e prema Invio.
- Verifichi il contrasto. Lo strumento qui sotto mostra quali coppie della palette superano il livello AA delle WCAG per il testo normale. Clicchi una coppia o imposti qualsiasi colore di testo e di sfondo.
- Esporti. Scelga HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 o JSON, poi copi il codice o lo scarichi come file.
Come vengono trovati i colori
L’immagine viene ridotta a 256 pixel sul lato lungo, poi i colori vengono raggruppati nello spazio colore CIELAB, dove le distanze corrispondono a quanto due colori appaiono diversi a una persona. Lo strumento esegue il clustering k-means con punti iniziali k-means++ e un seed casuale fisso. Per questo la stessa immagine dà sempre la stessa palette, e un grande colore di sfondo non assorbe accenti piccoli ma vivaci. Il valore mostrato per ogni colore è la media dei pixel reali del suo gruppo, non un colore «più vicino» arrotondato.
| Impostazione | Quando usarla |
|---|---|
| 5–6 colori | Palette di brand da un logo o da una foto chiave, mood board, temi per presentazioni |
| 7–8 colori | Temi per siti e app: sfondo, superfici, testo, accenti primari e secondari |
| 9–10 colori | Illustrazioni e foto ricche di dettagli, punti di gradiente, visualizzazione dei dati |
| Contagocce | Colore esatto di un pulsante, di un logo o di un testo in uno screenshot |
Formati di esportazione per designer e sviluppatori
Gli elenchi HEX, RGB e HSL si incollano direttamente in Figma, Sketch o in qualsiasi campo colore. CSS fornisce proprietà personalizzate in :root, pronte per un file di design token. Tailwind v3 aggiunge un gruppo di colori palette a tailwind.config.js, così può scrivere bg-palette-1. Tailwind v4 usa il nuovo blocco @theme con le variabili --color-palette-1. JSON conserva HEX, RGB, HSL e la quota di ogni colore nell’immagine per script e documentazione.
Verifica del contrasto secondo le WCAG 2.2
Il contrasto tra colori è il rapporto tra la luminanza relativa di due colori, da 1:1 a 21:1. Il criterio di successo 1.4.3 delle WCAG 2.2 (livello AA) richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande, cioè 24 px normale o circa 18,7 px grassetto. Il livello AAA (criterio 1.4.6) alza la soglia a 7:1 e 4,5:1. Il criterio 1.4.11 richiede 3:1 per icone, bordi dei campi e altri elementi dell’interfaccia. Lo strumento usa la formula esatta dello standard e non arrotonda il rapporto per eccesso, quindi 4,49:1 risulta non superato.
Le palette di brand raramente superano questi controlli così come sono: accenti chiari su bianco e blu di tono medio con testo bianco sono i problemi più comuni. Se sta costruendo un design system o riprogettando un prodotto, il nostro team può aiutarLa con il design e lo sviluppo di siti e web app. Per un controllo rapido delle pagine esistenti, provi la scansione di accessibilità.
Domande frequenti
Come ottengo la palette di colori di un’immagine?
Carichi o incolli l’immagine in questa pagina. Lo strumento trova da 5 a 10 colori dominanti, mostra i loro codici HEX e la loro quota nell’immagine. Clicchi un colore per copiarne il codice HEX o esporti l’intera palette in CSS, Tailwind o JSON.
Come trovo il codice HEX di un colore in un’immagine?
Clicchi il punto dell’immagine con il contagocce. Lo strumento mostra i valori HEX, RGB e HSL di quel pixel esatto, e può copiare il codice o aggiungere il colore alla palette. Su smartphone tocchi l’immagine; da tastiera sposti il marcatore con le frecce e prema Invio.
La mia immagine viene caricata su un server?
No. L’immagine viene disegnata su un canvas nel Suo browser e i colori vengono calcolati in un Web Worker sul Suo dispositivo. Nulla viene inviato al nostro server e l’immagine non viene salvata da nessuna parte dopo la chiusura della pagina.
Perché la palette è sempre la stessa?
Il clustering usa un seed casuale fisso, quindi la stessa immagine con lo stesso numero di colori restituisce sempre la stessa palette. Così può condividerla con il team o ricrearla in seguito senza sorprese.
Quale rapporto di contrasto serve per il testo?
Per il livello AA delle WCAG 2.2: almeno 4,5:1 per il testo normale e 3:1 per il testo grande (24 px, o circa 18,7 px in grassetto). Per il livello AAA: 7:1 e 4,5:1. Icone, bordi dei campi e indicatori di focus richiedono almeno 3:1 rispetto allo sfondo.
Posso usare la palette in Tailwind CSS?
Sì. Scelga «Tailwind v3» per ottenere un gruppo di colori per tailwind.config.js, oppure «Tailwind v4» per un blocco @theme con le variabili --color-palette-*. Dopo può usare classi come bg-palette-1 e text-palette-2.
Quali formati di immagine sono supportati?
JPG, PNG, WebP, GIF, AVIF e BMP, fino a 50 MB. I pixel trasparenti vengono ignorati, quindi un logo su sfondo trasparente dà solo i colori del logo. Per ottenere i colori da un SVG, lo converta prima in PNG.