Costruisci una palette di colori del brand a partire dalle tue foto di prodotto
Estrai i colori reali dalle foto del prodotto e della confezione, assegna a ciascuno un ruolo e verifica ogni abbinamento di testo con il contrasto WCAG prima che finisca su un annuncio, una didascalia o una end card.
Molti piccoli brand hanno un file del logo e nessuna lista di colori. I colori stanno nel prodotto stesso: il flacone, l'etichetta, la scatola, il tessuto. Quando arriva il momento di creare un annuncio, una miniatura o uno stile di didascalia, qualcuno guarda a occhio un codice esadecimale da una foto e spera che vada bene.
Puoi fare meglio in circa dieci minuti. Estrai i colori dalle foto del prodotto reale, assegna a ciascuno un ruolo e verifica quali coppie sono leggibili come testo. Il nostro estrattore di palette colori gratuito fa l'estrazione e la verifica nel tuo browser, senza caricare nulla.
Perché partire dal prodotto e non da una mood board
Le persone riconoscono il tuo prodotto dal suo aspetto sullo scaffale o in mano. Un annuncio con colori che corrispondono alla confezione sembra, a colpo d'occhio, lo stesso brand, mentre uno che si discosta sembra un'imitazione. Una palette tratta dal prodotto è anche onesta su ciò che vendi davvero, cosa che una mood board raramente è.
Funziona anche per i servizi. Se non hai un prodotto fisico, usa i tuoi screenshot migliori, la tua vetrina o le foto del team, qualunque cosa le persone già associno a te.
Passo 1: scegli e ritaglia le foto
Scegli due o tre foto pulite: il prodotto su uno sfondo neutro, la confezione frontale e uno scatto lifestyle che ti piace. Poi ritaglia con decisione. L'estrattore conta ogni pixel che gli dai, quindi una bottiglia su un tavolo di legno restituisce il tavolo come uno dei colori del brand. Ritaglia sul prodotto e sull'etichetta, e la palette sarà il prodotto.
Scatta alla luce del giorno o comunque con una luce uniforme, se puoi. Una lampada calda trasforma un packaging bianco in crema, e ogni colore che estrai porterà quella tinta.
Passo 2: estrai da cinque a otto colori
Trascina ogni foto nell'estrattore e chiedi 5 o 6 colori per uno scatto pulito di prodotto, oppure 8 per uno affollato. Raggruppa i pixel simili ed elenca la media di ciascun gruppo, dal più grande, con la quota di immagine che copre. Il punto di partenza è fisso, quindi la stessa foto dà sempre la stessa palette, e un piccolo accento brillante, come un tappo rosso su una bottiglia bianca, ottiene un proprio campione invece di essere mediato via.
Elabora tutte le foto e cerca i colori che si ripetono. Quelli sono il brand. Un colore che compare in un solo scatto è di solito lo sfondo o la luce.
Passo 3: assegna a ogni colore un ruolo
Una palette è utile solo quando ogni colore ha un ruolo. La maggior parte dei brand ne ha bisogno di quattro:
- Sfondo: il colore su cui poggia la maggior parte di un layout. Spesso il colore base della confezione, o un neutro chiaro.
- Testo: un colore scuro leggibile sullo sfondo. Il quasi nero funziona. Un colore di brand profondo funziona meglio, se supera la verifica del contrasto.
- Accento: quello vistoso, per un pulsante, un adesivo di prezzo o una sola parola evidenziata.
- Supporto: uno o due neutri per box, separatori e testo secondario.
Resisti alla tentazione di usare tutto ciò che la foto ti ha dato. Cinque colori con ruoli chiari terranno coerenti cento annunci. Dodici no.
Passo 4: verifica il contrasto prima di metterlo su qualsiasi cosa
Abbinamenti di colori che sembrano a posto su un monitor grande possono essere difficili da leggere su un telefono sotto il sole, e molto più difficili per chi ha una ridotta capacità visiva. Le Web Content Accessibility Guidelines del W3C danno un numero per questo, il rapporto di contrasto, che va da 1:1 (lo stesso colore due volte) a 21:1 (nero su bianco). Le soglie sono:
| Testo normale | Testo grande | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Il testo grande significa almeno 18 punti, o 14 punti in grassetto, secondo la definizione di WCAG. E i numeri sono limiti rigidi: la guida del W3C sul criterio 1.4.3 dice che un rapporto calcolato non va arrotondato, quindi 4,499:1 non rispetta 4,5:1.
WCAG è stato scritto per i contenuti web, non per gli annunci, ma il ragionamento vale per qualsiasi testo su uno schermo, comprese le didascalie impresse in un video e le parole su una end card.
Un esempio concreto
Supponi che la tua confezione ti dia un blu navy #1a3c6e, un crema #fdf6e3 e un arancio #e07a2e.
La formula è (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del più scuro. La luminanza relativa va da 0 per il nero a 1 per il bianco. Il navy risulta circa 0,046, il crema circa 0,923 e l'arancio circa 0,300.
- Testo navy su crema: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, circa 10,1 con questi valori arrotondati, e 10,16:1 esatto. Passa AAA a qualsiasi dimensione. È il tuo abbinamento principale.
- Testo arancio su crema: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, circa 2,78:1. Non passa nemmeno per il testo grande. L'arancio non dovrebbe portare parole su crema.
- Testo nero su arancio: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, che è 7,0 con questi valori arrotondati ma 6,99:1 esatto. Passa AA per tutto il testo ma sfiora appena AAA. Va bene per l'etichetta di un pulsante.
- Testo crema su navy: la stessa coppia della prima, quindi lo stesso 10,16:1. Invertire una coppia non cambia mai il rapporto.
Quindi i ruoli si scelgono quasi da soli: sfondo crema, testo navy, arancio come forma d'accento con parole nere sopra (navy su arancio dà solo 3,65:1, che è AA solo per testo grande). Lo strumento mostra l'intera griglia in una volta, ogni colore contro ogni altro più bianco e nero, con ogni cella valutata AAA, AA, AA grande o Fail.
Passo 5: scrivila una volta
Esporta la palette come proprietà personalizzate CSS o JSON e tienila accanto ai file del logo. Rinomina le variabili in base al ruolo una volta deciso: --brand-bg, --brand-text, --brand-accent si leggono meglio di --color-3 un mese dopo. Aggiungi una riga sotto ognuna che dica quali abbinamenti sono passati, così nessuno deve rifare la verifica.
Poi confronta i numeri con qualsiasi valore ufficiale che tu già abbia. Una foto ti dà il colore che ha visto la fotocamera, che è vicino alla confezione stampata ma non identico alla specifica dell'inchiostro. Se la tua stampatrice o il tuo grafico hanno valori esatti, questi prevalgono.
Usare la palette in annunci e post
- Didascalie e sottotitoli: il colore del testo su un box del colore di sfondo, o viceversa. Verifica prima la coppia.
- End card: il colore di sfondo con il logo e una riga nel colore del testo. L'accento può riempire la forma di un pulsante dietro una breve call to action.
- Miniature e copertine: un accento, una grande parola leggibile, molto sfondo.
- QR code sulle confezioni: un colore del brand funziona se è chiaramente più scuro della confezione. Il nostro generatore di QR code avvisa quando il contrasto è basso.
Dove si inserisce Hermoso
Hermoso è un agente di marketing basato sull'IA. Analizza gli annunci che già funzionano nel tuo mercato, crea annunci di immagine e video in linea con il brand, pubblica e programma sui tuoi account social e gestisce campagne a pagamento sui tuoi account pubblicitari. Quando aggiungi il tuo brand dal sito web, impara i tuoi prodotti, il logo e la palette. Didascalie e end card restano disattivate finché non le chiedi, e quando lo fai puoi impostare i colori del testo, del box e della end card con codici esadecimali, così le coppie che hai verificato qui sono quelle che vanno in onda. Funziona nell'app web, oppure dentro Claude, ChatGPT e Cursor tramite il suo server MCP.
Domande frequenti
Come trovo i codici esadecimali dei colori del mio prodotto?
Ritaglia una foto pulita sul prodotto o sulla confezione e trascinala in un estrattore di palette colori. Elenca i colori principali come HEX, RGB e HSL. Elabora due o tre foto e tieni i colori che si ripetono.
Quale rapporto di contrasto serve al testo?
Secondo WCAG 2.2, il livello AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande, mentre AAA richiede 7:1 e 4,5:1. Il testo grande è di almeno 18 punti, o 14 punti in grassetto.
4,49:1 basta per AA?
No. Il W3C dice che il rapporto non va arrotondato quando lo si confronta con la soglia, quindi 4,499:1 non rispetta 4,5:1.
Quanti colori dovrebbe avere una palette di brand?
Abbastanza da dare un ruolo a ciascuno: di solito uno sfondo, un colore del testo, un accento e uno o due neutri. Cinque colori con ruoli chiari tengono gli annunci più coerenti di una lista lunga.
I colori di una foto sono esatti?
No. Sono ciò che la fotocamera ha registrato sotto quella luce, vicino al prodotto ma non uguale a una specifica di stampa o di inchiostro. Se hai valori ufficiali, usa quelli.