Ottieni una palette di colori da qualsiasi immagine, con verifica del contrasto

Come vengono scelti i colori

Lo strumento genera una piccola copia della tua immagine, al massimo 160 pixel sul lato più lungo, e conta ogni pixel che non è trasparente. Poi raggruppa i pixel simili con il clustering k-means e riporta il colore medio di ogni gruppo, partendo dal più grande. La percentuale su ogni campione indica quanta parte dell'immagine copre quel gruppo.

Il punto di partenza è fisso anziché casuale: inizia con il colore più comune, poi continua ad aggiungere il colore più lontano da quelli che ha già. Così la stessa immagine dà sempre la stessa palette, e un piccolo dettaglio brillante, come un logo rosso su una scatola bianca, ottiene il suo campione invece di essere mediato nello sfondo.

Chiedi da 5 a 8 colori. Uno scatto di prodotto su uno sfondo semplice di solito ne richiede 5 o 6. Una foto lifestyle affollata rende meglio con 8. Se l'immagine ha meno colori distinti di quelli richiesti, lo strumento lo segnala e mostra quelli che ha trovato.

Leggere la matrice di contrasto

Ogni colore è abbinato a ogni altro, oltre al bianco e al nero pieni, e ogni cella mostra il rapporto di contrasto per il testo nel colore della riga su uno sfondo nel colore della colonna. Il rapporto segue la definizione WCAG: (L1 + 0.05) / (L2 + 0.05), dove L1 e L2 sono la luminanza relativa del colore più chiaro e di quello più scuro. Va da 1:1 (lo stesso colore due volte) a 21:1 (nero su bianco).

Le etichette sono le soglie fissate da WCAG:

• AA: almeno 4.5:1 per il testo normale e 3:1 per il testo grande (Criterio di successo 1.4.3).
• AAA: almeno 7:1 per il testo normale e 4.5:1 per il testo grande (Criterio di successo 1.4.6).
• Testo grande significa almeno 18 punti, oppure 14 punti in grassetto (definizione di scala grande di WCAG).

Una cella contrassegnata come AA large va bene per un titolo grande ma è troppo tenue per una didascalia. La spiegazione del 1.4.3 di W3C dice anche che il rapporto non va arrotondato, quindi 4.499:1 non soddisfa 4.5:1. Lo strumento valuta il numero esatto e lo mostra tagliato a due decimali, mai arrotondato per eccesso.

Un esempio svolto

Supponiamo che la foto ti dia un blu navy #1a3c6e e un crema #fdf6e3. La luminanza relativa del navy risulta circa 0.046 e quella del crema circa 0.923. Il rapporto è (0.923 + 0.05) / (0.046 + 0.05), cioè circa 10.1:1 con questi valori arrotondati e 10.16:1 con quelli esatti. Supera il livello AAA per ogni testo, quindi il testo navy su un'end card crema è sicuro a qualsiasi dimensione. Metti un arancione medio come #e07a2e sullo stesso crema e il rapporto scende a 2.78:1, che non basta nemmeno per il testo grande. Riserva l'arancione per un pulsante con testo nero sopra (6.99:1, che è AA ma poco sotto AAA), o per una forma senza parole.

Usare l'esportazione

L'esportazione CSS è un blocco :root di proprietà personalizzate, --color-1 per il colore che copre la maggior parte dell'immagine e così via a scendere. Il JSON contiene per ogni colore il valore hex, RGB, HSL e la sua quota dell'immagine, facile da incollare in un file di design token o da passare a uno script. Rinomina le variabili una volta che sai quale colore è lo sfondo, quale il testo e quale l'accento.

Cosa non fa questo strumento

Non sa quali colori sono quelli del tuo brand. La foto del tuo prodotto su un tavolo di legno includerà il tavolo. Ritaglia prima il prodotto o la confezione se vuoi solo i suoi colori. Non può nemmeno dirti i colori esatti di stampa: i numeri sono i pixel nel file, dopo la tua fotocamera e qualsiasi modifica, quindi confrontali con la tua guida del brand prima di pubblicarli. E valuta solo il contrasto del testo. WCAG ha regole separate per icone ed elementi dell'interfaccia, che questa matrice non valuta.

Se preferisci non farlo a mano

Hermoso è il marketing con il pilota automatico: analizza gli annunci che già funzionano nel tuo mercato, crea annunci immagine e video in linea con il brand, programma i post e gestisce campagne a pagamento sui tuoi account pubblicitari. Quando aggiungi il tuo brand dal tuo sito web, impara i tuoi prodotti, il logo e la palette, e puoi impostare i colori di didascalie ed end card con codici hex. Funziona nella web app, oppure dentro Claude, ChatGPT e Cursor tramite il suo server MCP.

Strumenti gratuiti: Guida alle dimensioni social · Generatore di griglie Instagram · Generatore Open Graph

Domande frequenti

Come ottengo una palette di colori da una foto?

Carica la foto nello strumento e scegli quanti colori vuoi, da 5 a 8. Raggruppa i pixel simili e mostra il colore medio di ogni gruppo in HEX, RGB e HSL, dal più grande, con un pulsante di copia su ciascuno.

Quale rapporto di contrasto mi serve per il testo?

Il livello AA delle WCAG 2.2 richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA richiede 7:1 e 4,5:1. Il testo grande è di almeno 18 punti, o 14 punti in grassetto.

4,49:1 è abbastanza vicino per superare AA?

No. Il W3C afferma che il rapporto calcolato non va arrotondato quando viene confrontato con una soglia, quindi 4,499:1 non raggiunge 4,5:1. Lo strumento valuta il numero esatto.

Perché ottengo la stessa palette ogni volta?

Il clustering parte da un punto fisso, il colore più comune, e poi aggiunge il colore più lontano da quelli già scelti. Non c'è un punto di partenza casuale, quindi una stessa immagine dà sempre una stessa risposta.

La mia immagine viene caricata?

No. Viene letta dal lettore di file del tuo browser e conteggiata in un canvas sul tuo dispositivo. Nulla viene inviato da nessuna parte né archiviato.