# Crea una palette di colori da un’immagine > Crea una palette di colori da un’immagine o da una foto: codici HEX, RGB e HSL, contagocce e colori per l’email con il contrasto già verificato. Gratis, nel browser. Fonte: https://www.infomail.it/come-ottenere-una-palette-di-colori-da-unimmagine/ · Infomail, piattaforma italiana di email marketing di Hoplo S.r.l. · pubblicato il 12 giugno 2019 (2019-06-12), aggiornato il 21 ottobre 2026 (2026-10-21) 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](https://www.infomail.it/colori-per-lemail-marketing-come-scegliere-quelli-che-funzionano/) parte da lì. E se cerchi una base già coerente, [i template pronti](https://www.infomail.it/template-newsletter/) 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)](https://www.w3.org/TR/WCAG22/) 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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)) | almeno 4,5:1 | almeno 3:1 | | AAA ([criterio 1.4.6](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html)) | 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](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) 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](https://www.w3.org/TR/css-color-4/). 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).