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

[Canonical HTML page](https://gradiently.design/it/guide/brand-color-codes)

Un colore di brand è coerente solo se chiunque lo tocchi ha il codice giusto per il proprio supporto. Ecco la tabella che ogni guida di stile richiede, a cosa serve ogni codice e in che ordine ricavarli.

## The short version

- I codici colore del brand devono dare ogni colore in quattro formati: hex per il web, RGB per gli schermi, CMYK per la stampa e un riferimento Pantone per i colori spot e gli oggetti fisici.
- Ogni colore in una guida di stile ha bisogno anche di un nome, un ruolo e un elenco di abbinamenti di testo approvati con i relativi rapporti di contrasto.
- Hex e RGB descrivono esattamente lo stesso colore dello schermo, quindi si convertono con precisione, mentre i valori CMYK e Pantone richiedono una conversione con gestione del colore e una verifica stampata.
- Se il tuo brand compare soprattutto in stampa o sui prodotti, scegli prima il riferimento Pantone e adatta a esso i codici dello schermo.
- Dai ai colori nomi di ruolo, come primario o inchiostro, così la guida ha ancora senso se una tonalità cambia in seguito.

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.

| Nome e ruolo | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Rosso segnale, primario | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Blu porto, secondario | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Inchiostro, testo | `#101820` | 16 24 32 | Nero ricco dal tipografo | Black 6 C |
| Foschia, neutro | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Carta, sfondo | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Carta non stampata |

Una tabella dei colori per la guida di stile. I valori CMYK sono semplici conversioni aritmetiche mostrate a titolo d’esempio; sostituiscili con i valori che ti dà il tipografo da una conversione con gestione del colore.

- Rosso segnale: #c8102e
- Blu porto: #0047bb
- Inchiostro: #101820
- Foschia: #d9d9d6
- Carta: #f5f3ee

Gli stessi cinque colori come campioni. Una guida dovrebbe sempre mostrare il colore stesso accanto ai suoi codici, così una cifra sbagliata si nota.

## 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](https://gradiently.design/it/guide/color-codes-explained) 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](https://gradiently.design/it/guide/hex-to-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ì.

> **Non ogni colore dello schermo si può stampare** I blu, i verdi e gli arancioni molto saturi stanno fuori da ciò che l’inchiostro CMYK può riprodurre. Se un tuo colore di brand è tra questi, decidi ora se la stampa usa un inchiostro spot Pantone o una versione CMYK leggermente più spenta, e scrivilo. [RGB e CMYK](https://gradiently.design/it/guide/rgb-vs-cmyk) mostra perché.

## Come ricavare i codici colore del tuo brand

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. **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. **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. **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. **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](https://gradiently.design/it/guide/pantone-colors) 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.

| Testo | Sfondo | Contrasto | Uso |
| --- | --- | --- | --- |
| Bianco | Rosso segnale | 5,9:1 | Pulsanti, banner, qualsiasi dimensione |
| Bianco | Blu porto | 8,0:1 | Qualsiasi dimensione |
| Inchiostro | Carta | 16,1:1 | Testo del corpo |
| Rosso segnale | Carta | 5,3:1 | Titoli e link |
| Rosso segnale | Inchiostro | 3,0:1 | Solo testo display grande |

Rapporti di contrasto calcolati con la formula WCAG. Il testo del corpo richiede almeno 4,5:1, quello grande 3:1.

Il metodo dietro quei numeri è in [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility).

## 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à.

```css
: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 */
}
```

La stessa tabella come proprietà personalizzate CSS, con il riferimento Pantone tenuto in un commento per chi ne ha bisogno.

### Da evitare

- Un solo codice hex e nient’altro
- Colori chiamati «rosso 2» e «nuovo blu»
- CMYK copiato da un convertitore online
- Pantone scelto da un’anteprima su schermo

### Da fare

- Hex, RGB, CMYK e Pantone per ogni colore
- Nomi che dicono a cosa serve il colore
- CMYK dal tuo tipografo, verificato su una prova
- Pantone scelto da una mazzetta fisica

## 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](https://gradiently.design/it/guide/brand-style-guide).

## FAQ

### Quali codici colore deve includere la guida di stile di un brand?

Hex, RGB, CMYK e un riferimento Pantone per ogni colore, più un nome, un ruolo e gli abbinamenti di testo approvati con i rapporti di contrasto.

### L’hex è lo stesso dell’RGB?

Sì. L’hex è RGB scritto in base sedici, quindi `#C8102E` e 200 16 46 sono esattamente lo stesso colore.

### Come converto un colore hex in CMYK?

I convertitori online danno un punto di partenza approssimativo, ma il CMYK dipende dalla macchina da stampa e dalla carta. Chiedi al tuo tipografo una conversione con gestione del colore e approva una prova di stampa.

### Mi serve un colore Pantone per il mio brand?

Se il tuo brand compare su insegne, confezioni, abbigliamento o merchandising, sì: un riferimento Pantone è il modo più affidabile per ottenere lo stesso colore su materiali diversi.

### Cosa significa la C o la U dopo un numero Pantone?

C significa carta patinata e U carta non patinata. Lo stesso inchiostro appare diverso su ciascuna, quindi annota entrambe se stampi su entrambe.