In breve
- 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.
In questa pagina
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 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.
In un post come questo l’accento appartiene a un solo punto, come la piccola etichetta sopra il titolo, e a nessun altro.
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. Le palette blu notte e verde acqua accolgono accenti caldi come corallo o ambra; le palette calde accolgono blu o verde. I colori complementari 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.
Dove usare l’accento e dove no
Evitalo su
Evitalo su
Evitalo su
Evitalo su
Evitalo su
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: 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 ha i dettagli.
: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 */
}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.
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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo