Raccolta di palette di colori — colori web standard e Material Design pronti da copiare
Elenco delle palette di uso più comune nel design — colori web standard, sistema cromatico Material Design, scale di grigi — con il relativo codice HEX. Basta un clic per copiarlo.
Colori web standard (colori di base)
Palette di Material Design
Scala di grigi (colori neutri)
Consigli per l'uso
- Premendo il pulsante «Copia» sotto un campione, il codice HEX (per esempio #F44336) finisce immediatamente negli appunti.
- Potete incollarlo così com'è nei CSS oppure in strumenti di design come Figma e Adobe XD.
- I colori di Material Design sono organizzati come «nome del colore + numero di tonalità» (per esempio Red 500): più alto è il numero, più scura è la tinta.
- La scala di grigi è un ottimo punto di riferimento quando volete uniformare le gradazioni dell'interfaccia: colore del testo, sfondi, bordi.
- Se non sapete da dove partire, provate le combinazioni fra i sedici colori web di base: portano quasi sempre a un risultato ben leggibile.
Domande frequenti
color: #F44336;. La stessa notazione è accettata dalla quasi totalità degli strumenti di design e dei linguaggi di programmazione.
A proposito — perché i progettisti evitano i colori «scelti a sensazione»
«Material Design», presentato da Google nel 2014, non era una semplice guida di stile ma un sistema di progettazione pensato per unificare colore, tipografia, movimento e impaginazione sotto regole coerenti. La palette in particolare è costruita in modo sistematico: prevedendo per ogni tonalità (Red, Blue, Green e le altre) numeri di luminosità da 50 a 900, permette ai progettisti di comporre un insieme coerente senza affidarsi al solo istinto.
Scegliendo un colore diverso ogni volta, in un'applicazione finiscono per accumularsi tinte simili ma leggermente diverse, e l'insieme perde unità. Attingere a una palette già sistematizzata mantiene la coerenza e consente inoltre di rappresentare in modo naturale i diversi stati di un pulsante — normale, al passaggio del mouse, premuto — semplicemente variando la luminosità della stessa tonalità.
Il modo di indicare i colori nei CSS si è ampliato più volte nel tempo. Nei CSS1 del 1996 esistevano soltanto sedici nomi di colore di base e i codici esadecimali; oggi si possono usare anche spazi cromatici più vicini alla percezione umana come HSL, HWB e LAB. Eppure nella pratica il codice HEX resta il più diffuso e continua a essere il linguaggio comune fra chi progetta e chi sviluppa.