Estrarre una palette di colori da un’immagine per marchio e presentazioni

Per estrarre una palette di colori da un’immagine, apra Selettore colori e tavolozza e aggiunga l’immagine — un logo, una foto di prodotto, una ripresa della Sua vetrina. Lo strumento trova i colori dominanti dell’immagine (da tre a sedici, sei di default), indica ciascuno in HEX, RGB, HSL, HSV, OKLCH e CMYK approssimativo ed esporta la palette come variabili CSS, JSON, file di campioni .ase per i programmi di grafica e immagine dei campioni.

La palette è solo l’inizio. Questo articolo mostra come estrarla, quale notazione del colore usare dove, come mantenere leggibile un testo nei Suoi colori, perché lo stesso colore appare diverso sullo schermo e sulla carta e come usare la palette in altri strumenti.

Come estrarre una palette di colori da un’immagine

1. 1

   Scegliere una buona immagine di partenza

   Un’immagine per elaborazione. Un logo o una grafica a tinte piatte dà valori esatti; una foto dà i colori che la dominano, spesso proprio ciò che serve per un’atmosfera o il tema di una presentazione. Per un’immagine animata viene usato il primo fotogramma.

2. 2

   Impostare il numero di colori e l’ordine

   Scelga quanti colori estrarre e come ordinarli: Prima i più frequenti, Da chiaro a scuro o Per tonalità. Meno colori danno una palette più calma; un numero maggiore mostra le sfumature.

3. 3

   Rilevare colori esatti dove conta

   La palette raggruppa i pixel simili: i suoi colori sono rappresentativi, non presi da un punto preciso. Con il contagocce legge invece il valore esatto di qualsiasi pixel — utile per il blu preciso di un logo.

4. 4

   Scegliere i file da creare

   In File da creare: variabili CSS (.css), JSON (.json), un file di scambio dei campioni (.ase) e un’immagine dei campioni (.png). Con un prefisso per i nomi delle variabili CSS, per esempio marchio, ottiene --marchio-1, --marchio-2 e così via.

5. 5

   Copiare o scaricare

   Copi un singolo valore, oppure scarichi i file e li passi a chi realizza il Suo sito, le slide o gli stampati.

HEX, RGB, HSL e altro: quale valore di colore usare dove

Tutti i valori si riferiscono allo spazio colore sRGB, lo spazio comune del web. Se una foto usa un profilo più ampio, viene prima convertita in sRGB e i colori molto saturi vengono tagliati; il rapporto dello strumento lo segnala.

Verificare il contrasto prima di usare la palette per il testo

Una palette tratta da una bella foto ha spesso diversi toni medi che stanno bene insieme ma si leggono male l’uno sull’altro. Le Linee guida per l’accessibilità dei contenuti web (WCAG) 2.2 fissano al livello AA rapporti di contrasto minimi: 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni (almeno 18 punti, o 14 punti in grassetto). Componenti dell’interfaccia e grafici necessari alla comprensione richiedono 3:1 rispetto ai colori adiacenti. Il testo che fa parte di un logo non ha requisiti di contrasto.

Selettore colori e tavolozza fornisce valori esatti, ma non calcola i rapporti di contrasto. Inserisca i valori HEX di un colore del testo e del suo sfondo in un verificatore di contrasto prima di scegliere una coppia. Alcune regole pratiche:

• Abbinare gli estremi per il testo corrente. Il colore più scuro della palette sul più chiaro è di solito la scelta più sicura.
• Tenere i toni medi vivaci per gli accenti — grandi titoli, pulsanti (dopo una verifica del contrasto), linee e icone.
• Ordinare da chiaro a scuro per vedere a colpo d’occhio quali colori possono portare testo e quali vanno sullo sfondo.
• Verificare in entrambe le direzioni se il Suo sito o le slide hanno una versione scura: un testo chiaro su un colore scuro è una coppia a sé.

Schermo e stampa: perché lo stesso colore appare diverso

Gli schermi mescolano luce rossa, verde e blu; le stampanti depositano inchiostri ciano, magenta, giallo e nero sulla carta. I due non possono riprodurre esattamente la stessa gamma di colori, ed entrambi variano — da uno schermo all’altro, da una carta patinata a una non patinata. Un blu di marca luminoso sul monitor può risultare più spento in stampa. Quanti pixel servono per la stampa è un’altra questione, trattata in pixel, DPI e dimensione di stampa.

• I valori CMYK sono approssimativi. Derivano da una formula semplice senza profilo d’inchiostro o di carta. Li usi come punto di partenza, non come specifica di stampa; SchweizerIMG non crea file CMYK.
• Definire i colori di marca una volta per mezzo. Fissi un valore HEX per lo schermo e faccia stabilire i valori di stampa corrispondenti dalla Sua tipografia o dalla Sua grafica, con una prova di stampa.
• Annotare i valori. Conservi il file CSS o JSON esportato con i documenti del marchio, così ogni nuova presentazione e ogni pagina web usano gli stessi colori.

Usare la palette in Estendi area, Aggiungi bordo e Filigrana

I campi colore degli strumenti di SchweizerIMG accettano valori HEX, quindi una palette passa direttamente nelle Sue immagini:

• *Estendi area* — colore di riempimento: portare foto di prodotti o del team su un quadrato o su proporzioni fisse nel Suo colore di marca invece che in bianco. Il flusso per un intero negozio è in preparare le foto dei prodotti per il negozio online.
• *Aggiungi bordo* — colore del bordo, colore tra le linee di una cornice doppia e colore della didascalia di una cornice polaroid: una cornice uniforme per i post sui social o una presentazione.
• *Filigrana* — colore del testo, del contorno e dell’ombra: un segno nel Suo colore di marca, leggibile su foto chiare e scure. Cosa protegge una filigrana e cosa no è spiegato in cosa protegge una filigrana.

Sono strumenti di trasformazione e di modifica; la palette stessa si trova tra gli strumenti di analisi. Un risultato può passare da uno strumento al successivo senza download intermedio — veda concatenare gli strumenti.

Le agenzie estraggono spesso palette da materiale non ancora pubblico: il nuovo logo di una cliente, il visual di una campagna, foto di prodotti prima del lancio. SchweizerIMG legge l’immagine nel Suo browser; non viene mai inviata né conservata da noi, e per ogni elaborazione il nostro server riceve solo lo strumento e l’esito. Maggiori informazioni nella pagina sulla sicurezza e in strumenti per immagini per agenzie di marketing e web.

Domande frequenti

Quanti colori dovrebbe avere una palette di marca?

Non esiste un numero fisso. Molti marchi lavorano con uno o due colori principali, un colore d’accento e alcuni toni neutri. Estragga più colori del necessario — fino a sedici — e tenga quelli che portano il marchio; gli altri servono per sfondi e grafici.

Perché un colore della palette è diverso dal pixel che ho scelto?

La palette raggruppa i pixel simili e dà un colore rappresentativo per ogni gruppo, ponderato secondo la parte dell’immagine che copre. Il contagocce legge un singolo pixel in modo esatto. Se un’immagine non ha più colori distinti di quelli richiesti — un logo a tinte piatte, per esempio –, la palette contiene esattamente quei colori.

Posso importare la palette in un programma di grafica o di presentazione?

Molti programmi di grafica importano i file di campioni .ase. Per le slide, l’immagine dei campioni (.png) è il riferimento più rapido, e il valore HEX di ogni colore si può digitare nel campo colore del programma. Il file CSS è per i siti web, il file JSON per gli sviluppatori.

I valori CMYK sono pronti per la stampa?

No. Sono approssimazioni non calibrate, senza profilo d’inchiostro o di carta. Per la stampa chieda alla Sua tipografia o alla Sua grafica i valori adatti alla carta e al procedimento di stampa.

Provi con il Suo logo: inizi dal Suo primo strumento, veda nella pagina dei prezzi quali piani includono Selettore colori e tavolozza, oppure crei un account.