Crea una palette di colori da un’immagine

Lo strumento qui sopra crea una palette di colori da qualsiasi immagine: una foto di prodotto, lo scatto di una campagna, il logo che ti ha mandato il cliente, lo screenshot di un sito. Ti dà i colori dominanti con i codici HEX, RGB e HSL, un contagocce per trovare il colore esatto di un punto della foto e una proposta di colori per la tua email, con il contrasto già misurato.

Funziona tutto nel tuo browser: l’immagine non viene caricata su nessun server e non lascia il tuo computer.

Come si usa

1. Carica l’immagine. Trascinala nel riquadro, sceglila con «Scegli un’immagine» oppure incollala con Ctrl+V (⌘+V su Mac) dopo averla copiata, per esempio da uno screenshot. Dal telefono la scegli dalla galleria. Vanno bene i formati che il browser sa aprire, come JPG, PNG, WebP e GIF.
2. Leggi la palette. Trovi da 5 a 8 colori, li scegli tu dal menu «Colori», in ordine di presenza: accanto a ognuno c’è la parte dell’immagine che occupa. Un clic su un colore copia il suo codice HEX.
3. Prendi un colore preciso. Clicca un punto dell’immagine: il contagocce ti dà il colore di quel pixel, che puoi copiare o aggiungere alla palette.
4. Scegli i colori dell’email. Lo strumento propone sfondo, testo e pulsante presi dalla palette e misura il contrasto; l’anteprima mostra una piccola email con quei colori. Puoi cambiarli uno per uno.
5. Porta via i colori. «Copia i codici HEX» copia la lista dei colori, «Copia come variabili CSS» la copia pronta per un foglio di stile.

Si usa anche da tastiera: il tasto Tab passa da un controllo all’altro, sulla foto le frecce spostano il mirino del contagocce (con Maiusc fa passi più lunghi) e Invio prende il colore.

Come trovare il colore di una foto

Se ti serve il colore di un punto preciso, la tinta di un logo o il rosso di una confezione, usa il contagocce: clicca quel punto e ottieni il codice del pixel.

La palette fa un lavoro diverso. Raggruppa i pixel simili e per ogni gruppo calcola il colore medio: è per questo che un colore della palette può non coincidere con nessun punto preciso della foto. Una foto ha sfumature, ombre e rumore, e il colore che percepiamo come «il blu del cielo» è la media di migliaia di blu leggermente diversi.

Per lo stesso motivo, quando prendi un colore con il contagocce su una foto conviene cliccare in una zona piena, lontano dai bordi e dai riflessi. Su un logo o su una grafica a tinte piatte, invece, ogni punto della stessa area ha lo stesso colore.

Nelle immagini con le parti trasparenti, come molti loghi in PNG, lo strumento ignora i pixel trasparenti: la palette contiene solo i colori del disegno.

Come scegliere i colori di una newsletter

Una palette estratta da una foto ha quasi sempre più colori di quanti ne servano in un’email. Il lavoro vero è sceglierne pochi e dare a ognuno un compito.

• Lo sfondo è il colore che si vede di più. Funziona bene il più chiaro della palette, o il bianco: lascia respirare le immagini e fa leggere il testo.
• Il testo è il colore più scuro. Non deve per forza essere nero: un blu notte o un marrone scuro presi dalla foto legano il testo alle immagini, purché il contrasto con lo sfondo resti alto.
• Il pulsante è il colore più vivace. Usane uno solo per tutta l’email, sempre lo stesso: chi legge impara subito dove si clicca.

Se il colore del marchio è chiaro o poco saturo, spesso non basta per il testo. In quel caso usalo per superfici più ampie, come una fascia in testata o lo sfondo di un riquadro, e tieni il testo scuro.

Se vuoi approfondire il significato dei colori e i loro effetti sui lettori, la guida sui colori per l’email marketing parte da lì. E se cerchi una base già coerente, i template pronti hanno la palette già impostata: cambi i colori con quelli estratti qui e sei a posto.

Contrasto e leggibilità

Il contrasto tra testo e sfondo si misura con un rapporto che va da 1:1, due colori identici, a 21:1, il nero sul bianco. Lo definiscono le Linee guida per l’accessibilità dei contenuti web (WCAG 2.2) del W3C, a partire dalla luminanza relativa dei due colori, ed è lo stesso calcolo che usa lo strumento.

Le soglie delle WCAG per il testo sono queste:

Livello	Testo normale	Testo grande
AA (criterio 1.4.3)	almeno 4,5:1	almeno 3:1
AAA (criterio 1.4.6)	almeno 7:1	almeno 4,5:1

Per le WCAG il testo è «grande» da 18 punti in su, oppure da 14 punti se è in grassetto: secondo le note del W3C equivalgono a circa 24 e 18,5 pixel. Il testo di un pulsante a 16 pixel, anche in grassetto, è quindi testo normale e chiede 4,5:1.

Tre precisazioni utili, sempre dalle pagine del W3C:

• Le soglie non si arrotondano. Un rapporto di 4,499:1 non raggiunge 4,5:1. Per questo lo strumento mostra il valore troncato, non arrotondato.
• Il colore del marchio non fa eccezione. Sono esclusi dal requisito i loghi e il testo decorativo, non il testo che ha poco contrasto perché segue le linee guida grafiche dell’azienda.
• Il bordo del pulsante non è obbligatorio. Il criterio 1.4.11 chiede un contrasto di 3:1 per i componenti grafici, ma un pulsante con un testo leggibile è già riconoscibile come tale. Lo strumento ti mostra comunque il contrasto tra pulsante e sfondo: sopra 3:1 il pulsante si nota prima.

Un’email con un buon contrasto si legge meglio per tutti: per chi vede poco, per chi la apre sul telefono sotto il sole, per chi la scorre di fretta.

Domande frequenti

Lo strumento è gratuito? Serve registrarsi?

È gratuito e non serve nessun account. Puoi usarlo tutte le volte che vuoi.

L’immagine viene caricata da qualche parte?

No. Lo strumento apre l’immagine nel tuo browser e fa tutti i calcoli lì: l’immagine non viene inviata a nessun server, nemmeno al nostro. Le statistiche del sito registrano solo che una palette è stata estratta o copiata, senza l’immagine e senza i colori.

Perché il colore della palette è diverso da quello che vedo in un punto?

Perché la palette è fatta di medie: ogni colore riassume un gruppo di pixel simili. Se ti serve il colore esatto di un punto usa il contagocce, cliccando sull’immagine.

Quanti colori conviene usare in una newsletter?

Di solito ne bastano tre con un compito ciascuno: sfondo, testo e pulsante. Puoi aggiungerne un quarto per i dettagli, come i separatori o lo sfondo di un riquadro. Oltre, l’email rischia di sembrare disordinata.

Che differenza c’è tra HEX, RGB e HSL?

Sono tre modi di scrivere lo stesso colore, tutti previsti dal CSS. RGB indica quanto rosso, verde e blu ci sono, da 0 a 255. HEX scrive gli stessi tre valori in esadecimale, preceduti da #: è il formato che si incolla di solito nei campi colore degli editor. HSL descrive il colore con la tinta in gradi, la saturazione e la luminosità in percentuale, ed è comodo quando vuoi una versione più chiara o più scura dello stesso colore.

Posso prendere i colori di un logo o di un sito web?

Sì. Per un logo carica il file dell’immagine. Per un sito fai uno screenshot della pagina, copialo negli appunti e incollalo nello strumento con Ctrl+V (⌘+V su Mac).