Codici colore del brand: documentare hex, RGB, CMYK e Pantone

I codici colore del brand vanno in un’unica tabella nella guida di stile, con una riga per colore e una colonna per ogni supporto: hex per i siti web, RGB per schermi e video, CMYK per la stampa e un riferimento Pantone per colori spot, insegne e merchandising. Aggiungi un nome, un ruolo e gli abbinamenti di testo approvati, e chiunque, da uno sviluppatore a un produttore di insegne, può riprodurre il colore senza tirare a indovinare. La maggior parte delle incoerenze nasce da persone che inventano la propria conversione perché la guida dava loro un solo codice.

La tabella dei codici colore del brand

Ecco un esempio completo per un brand di fantasia con un primario rosso, un secondario blu, un inchiostro e due neutri. Copia la struttura; sostituisci i valori con i tuoi.

A cosa serve ogni codice colore

• Hex (#C8102E) è la scorciatoia del web per un colore RGB. Sviluppatori, Figma e la maggior parte degli strumenti di design lo richiedono. I codici colore esadecimali spiega come leggerne uno.
• RGB (200 16 46) è lo stesso colore scritto come valori di rosso, verde e blu da 0 a 255. Lo chiedono i programmi di montaggio video e alcune app. La conversione tra hex e RGB è esatta; vedi da hex a RGB.
• CMYK (0 92 77 22) è la miscela di inchiostri ciano, magenta, giallo e nero per la stampa a quattro colori. Dipende dalla macchina da stampa e dalla carta, quindi dovrebbe venire dal tuo tipografo o da una conversione con gestione del colore.
• Pantone (186 C) indica un inchiostro spot premiscelato tratto da una mazzetta fisica. È il modo più affidabile per ottenere lo stesso colore su biglietti da visita, insegne, tessuti e confezioni. Il suffisso conta: C è carta patinata, U è carta non patinata.
• Facoltativo: valori oklch o HSL aiutano i team web a costruire tinte e varianti per la modalità scura. Includili se i tuoi sviluppatori lavorano così.

Come ricavare i codici colore del tuo brand

1. 1

   Decidi il supporto principale

   Se il brand vive soprattutto sugli schermi, parti dall’hex. Se vive su confezioni, divise o insegne, parti da un campione Pantone fisico e adatta a esso il colore dello schermo.

2. 2

   Scegli di persona la corrispondenza Pantone

   Guarda una vera mazzetta Pantone alla luce del giorno, non un’anteprima su schermo. Scegli i campioni patinato e non patinato più vicini e annota entrambi.

3. 3

   Fatti dare il CMYK dal tipografo

   Invia l’hex e il riferimento Pantone e chiedi i suoi valori CMYK con gestione del colore, poi approva una prova di stampa.

4. 4

   Fissa per ultimi i valori dello schermo

   Regola l’hex perché somigli al campione stampato su alcuni schermi calibrati. Hex e RGB seguono poi esattamente l’uno dall’altro.

5. 5

   Registra gli abbinamenti approvati

   Elenca quali colori possono stare su quali, con i rapporti di contrasto, così nessuno mette testo rosso su blu navy.

Pantone o hex tratta il passaggio di corrispondenza più a fondo, compreso perché l’anteprima su schermo di un campione Pantone non è mai del tutto giusta.

Documenta abbinamenti approvati e contrasto

I codici dicono alle persone come ottenere un colore. Gli abbinamenti dicono come usarlo. Una breve tabella dei contrasti previene l’uso scorretto più comune, cioè mettere insieme due colori del brand che sembrano entrambi forti e falliscono come testo e sfondo.

Il metodo dietro quei numeri è in contrasto dei colori e accessibilità.

Condividere i codici colore con gli sviluppatori

Dai agli sviluppatori i colori come token con nome, non un PDF da ribattere. I nomi di ruolo mantengono leggibile il codice e sopravvivono a un cambio di tonalità.

:root {
  --brand-primary: #c8102e;   /* Signal red, Pantone 186 C */
  --brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
  --brand-ink: #101820;       /* Ink, Pantone Black 6 C */
  --brand-mist: #d9d9d6;      /* Mist, Pantone Cool Gray 1 C */
  --brand-paper: #f5f3ee;     /* Paper */
}

Tenere i codici dove si progetta

Una tabella dei colori in un PDF aiuta solo se la gente la apre. Metti la stessa palette dove i design si fanno davvero. In Gradiently, il kit del brand (parte di Pro) contiene le tue palette di colori accanto a loghi e font, e il Designer le usa quando impagina un design, così i codici giusti viaggiano con ogni post. Il resto della guida, dal carattere al tono di voce, è trattato in la guida di stile del brand.