# Colore d’accento: come sceglierne uno che lavori davvero

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

L’accento è la parte più piccola di una palette e la prima che le persone notano. Ecco come sceglierne uno che spicchi sulla base, tenerlo abbastanza raro da funzionare e impostarlo in CSS.

## The short version

- Un colore d’accento è un colore a contrasto usato in piccole quantità per attirare l’attenzione sull’elemento più importante, come un pulsante, un prezzo o una parola del titolo.
- Nella regola 60 30 10 l’accento è il dieci per cento, ed è la sua rarità a renderlo efficace.
- Un buon accento si distingue dai colori di base in almeno un modo marcato: tonalità, luminosità o saturazione.
- Un accento usato per molti compiti diversi smette di segnalare qualcosa, quindi dagli un ruolo principale.
- In CSS la proprietà accent-color tinge checkbox, radio, cursori e barre di avanzamento nativi.

Un **colore d’accento** è il piccolo colore a contrasto di una palette che indica ciò che conta: il pulsante da premere, il prezzo, la parola del titolo. Per sceglierne uno che lavori davvero, parti dai colori di base e scegli qualcosa che se ne distingua chiaramente per tonalità, luminosità o saturazione, poi usalo con parsimonia. Nella nota suddivisione 60 30 10 è quel dieci per cento. Meno spesso compare, più ogni comparsa significa.

## A cosa serve un colore d’accento

Gran parte di un design è fatta di colore di base e di supporto: sfondi, pannelli, testo. L’accento è l’eccezione che dice all’occhio dove andare. Questo lo rende il colore più funzionale che hai. Su un sito segna l’azione principale; su un poster cade sulla data; in un brand diventa il dettaglio che le persone ricordano, un punto fermo colorato o una sola striscia brillante.

La [regola 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) dà le proporzioni: circa sessanta per cento di colore dominante, trenta di secondario, dieci di accento. Considera il dieci un tetto, non un obiettivo. Molti dei migliori layout ne usano molto meno.

Un post verticale che annuncia l’apertura serale il venerdì, con una piccola etichetta sopra il titolo

In un post come questo l’accento appartiene a un solo punto, come la piccola etichetta sopra il titolo, e a nessun altro.

Un post verticale a elenco intitolato Tre cose da portare per un workshop

Lo stesso principio in un post a elenco: se l’accento compare, segna solo il titolo.

## Come scegliere un colore d’accento

Tutto il lavoro è il contrasto. Guarda i tuoi colori di base e secondari e chiediti in cosa si somigliano, poi rendi l’accento diverso da loro in almeno un modo marcato.

1. **Contrasto di tonalità** Scegli dal lato opposto del [cerchio cromatico](https://gradiently.design/it/guide/color-wheel). Le palette blu notte e verde acqua accolgono accenti caldi come corallo o ambra; le palette calde accolgono blu o verde. I [colori complementari](https://gradiently.design/it/guide/complementary-colors) sono la scelta classica.
2. **Contrasto di luminosità** Su una base scura, un accento chiaro; su una base pallida, uno profondo. Una palette sommessa di grigi può accogliere un accento nero tanto quanto uno brillante.
3. **Contrasto di saturazione** Tra colori morbidi e polverosi, un colore saturo si legge come l’accento anche se ne condivide la tonalità. Una palette color argilla con un accento vermiglione puro ne è un buon esempio.
4. **Provalo alla sua dimensione reale** Un accento di solito è piccolo. Controllalo come etichetta di un pulsante o come tratto sottile di sottolineatura, non come un grande campione, perché le piccole aree di colore sembrano più scure e spente.

- Base blu notte, accento corallo: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Base sabbia, accento blu profondo: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Base bosco, accento zafferano: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Base grigio lilla, accento rosso: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Base nera, accento lime: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Base rosa cipria, accento antracite: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Sei palette disegnate più o meno al 70, 20 e 10 per cento. Ogni accento si distingue dalla base per tonalità, luminosità o entrambe.

## Dove usare l’accento e dove no

| Usalo per | Evitalo su |
| --- | --- |
| Il pulsante principale o l’invito all’azione | Pulsanti secondari e di annullamento |
| Una parola, un prezzo o una data chiave | Interi paragrafi di testo corrente |
| Stati attivi: la scheda corrente, un elemento selezionato | Ogni icona di una barra degli strumenti |
| Piccoli dettagli di brand: un filetto, un punto, un adesivo | Grandi sfondi dietro testi lunghi |
| Evidenziazioni in un grafico: la sola serie che conta | Tutte le serie di un grafico insieme |

Un accento con un compito principale mantiene il suo significato. Quando è su tutto, niente spicca.

> **Un accento non è un colore di errore** Se il tuo accento è rosso, pensa a come sta accanto ai messaggi di errore. Gli utenti potrebbero leggere un pulsante rosso come distruttivo. Alcuni brand con accenti rossi usano un rosso diverso per gli errori, oppure mostrano gli errori con un’icona e un testo oltre al colore.

Accenti brillanti come lime, giallo e menta spesso falliscono come testo su bianco. Usali come campiture con sopra testo scuro e controlla ogni abbinamento con le indicazioni sul [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility): almeno 4,5:1 per il testo corrente e 3:1 per il testo grande e le parti dell’interfaccia.

Un controllo rapido aiuta se l’accento si è infilato dappertutto. Fai uno screenshot della tua homepage o di una settimana di post, sfocalo leggermente e guarda dove compare l’accento. Se l’occhio cade su tre o quattro punti insieme, declassa a colore secondario tutti tranne il più importante. Se non cade da nessuna parte, l’accento è probabilmente troppo vicino alla base e serve più contrasto di tonalità o luminosità.

## La proprietà CSS accent-color

Sul web `accent-color` tinge in una riga i controlli di modulo nativi: checkbox, radio, cursori e barre di avanzamento. È supportata nelle versioni attuali dei principali browser; il [riferimento di MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) ha i dettagli.

```css
:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}
```

Un solo token d’accento usato per i controlli di modulo e il pulsante principale, con una tonalità più profonda per i link di testo così superano il contrasto su bianco.

I browser possono regolare il colore del segno di spunta o del cursore dentro un controllo per mantenerlo leggibile sul tuo accento, quindi prova sia accenti chiari sia scuri. Per il resto dei colori di un sito, vedi [schema colori del sito web](https://gradiently.design/it/guide/website-color-scheme).

## Accenti su sfumature e fotografie

Su uno sfondo ricco, un accento ha più concorrenza. Prendilo fuori dalla famiglia di colori dello sfondo: un accento caldo su una sfumatura fredda, o un quasi bianco su una colorata. In Gradiently l’inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark stesso, così le parole restano leggibili mentre lo sfondo si muove, e il tuo accento deve svolgere solo il suo compito. Per saperne di più sulle palette costruite attorno a un solo colore forte, vedi [palette di colori tech](https://gradiently.design/it/guide/tech-color-palettes).

## FAQ

### Che cos’è un colore d’accento nel design?

Un colore a contrasto usato in piccole quantità per attirare l’attenzione sull’elemento più importante, come un pulsante, una parola chiave o un prezzo.

### Quanto di un design dovrebbe essere colore d’accento?

Al massimo circa il dieci per cento, seguendo la regola 60 30 10. Molti design forti ne usano molto meno.

### Come scelgo un colore d’accento per la mia palette?

Fa’ in modo che si distingua chiaramente dai colori di base per tonalità, luminosità o saturazione, poi provalo alla piccola dimensione in cui comparirà davvero.

### Cosa fa accent-color in CSS?

Imposta la tinta di checkbox, radio, cursori e barre di avanzamento nativi, così i controlli di modulo si adattano al tuo brand senza stili personalizzati.

### Un brand può avere più di un colore d’accento?

Può, ma ognuno dovrebbe avere un compito distinto, come uno per le azioni e uno per le evidenziazioni. Due accenti con lo stesso compito si annullano a vicenda.