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)
Che cos'è una tavolozza di colori
Questa pagina è una raccolta delle tavolozze classiche impiegate nella progettazione, presentate con i loro codici HEX. Riunisce tre insiemi: i 16 colori standard del web in uso fin dagli esordi dei CSS, i colori rappresentativi del sistema cromatico Material Design che Google ha sistematizzato, e una scala di grigi che divide dal bianco al nero in dieci gradini. Un clic sul codice di un colore che vi piace, come #2196F3, lo copia per incollarlo direttamente nel CSS o in uno strumento di progettazione.
Scegliere i colori a uno a uno a occhio lascia per lo più un guazzabuglio di toni simili e una veste che non si tiene mai del tutto. Ogni colore di questa pagina appartiene a un sistema concepito come un tutto: scegliere semplicemente lungo i numeri di chiarezza di Material Design (da 50 a 900) o i gradini di grigio (grigio al 90 %, all'80 % e così via) agevola l'assemblaggio di uno schema coerente, allineato in tinta e chiarezza. La teoria degli accostamenti — complementari, analoghi e il resto — è esposta nella sezione del glossario.
Come usare la tavolozza di colori
- Scegliere il gruppo adatto allo scopo I tre gruppi — colori standard del web, Material Design e scala di grigi — si susseguono in verticale. Scorrete fino a quello più vicino al vostro uso.
- Giudicare il colore dal campione Ogni campione compare accanto al nome del colore e al codice HEX, così circoscrivete le candidate vedendo a schermo il loro aspetto reale.
- Premere il pulsante di copia Fate clic sul pulsante di copia sotto un colore che vi piace e il codice HEX passa automaticamente negli appunti.
-
Incollare nel CSS o in uno strumento di progettazione
Incollate il codice HEX copiato direttamente in una proprietà CSS
coloro nel selettore di colore di Figma, Adobe XD e simili.
Consigli per sfruttarlo al meglio
- 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.
Quando la tavolozza di colori aiuta
Scegliere la base di uno schema per il web
Nel fissare il colore di fondo di un intero sito, prendere sfumature di una stessa tinta da una scala di chiarezza di Material Design fa sì che la ripartizione dei colori fra testata, corpo e pulsanti si componga da sé.
Colori di stato dei componenti d'interfaccia
Predisponete i colori degli stati normale, sotto il puntatore e premuto di un pulsante come chiarezze diverse di una stessa tinta — Blue 500 e Blue 700, per esempio — e renderete il mutare dello stato serbando l'unità.
Progettare il contrasto fra testo e sfondo
Scegliendo i colori di sfondo e di testo dalla scala di grigi, accostare gradini distanti dà migliore leggibilità. Per un verdetto rigoroso vale la pena un verificatore di contrasto a parte.
Uniformare i colori di presentazioni e grafici
Invece di scegliere ogni volta a occhio i colori di diapositive e grafici, riportare i nomi e i codici HEX di questa pagina come guida interna impedisce ai colori di sbandare da un documento all'altro.
Il vocabolario degli schemi cromatici
- Codice HEX
- Una notazione che esprime un colore mediante sei cifre esadecimali nella forma #RRGGBB. Rosso, verde e blu ricevono due cifre ciascuno; è la notazione più diffusa nei CSS e negli strumenti di progettazione.
- Material Design
- Il sistema di progettazione che Google ha pubblicato nel 2014. Sistematizza le tavolozze mediante numeri di chiarezza da 50 a 900 per ogni tinta, e più il numero è grande più il tono è scuro.
- Colori complementari
- Un accostamento di colori situati in posizioni opposte sul cerchio cromatico. Poiché si esaltano a vicenda, vi si ricorre per scegliere un colore d'accento quando si cerca un contrasto marcato.
- Colori analoghi
- Un accostamento di colori vicini sul cerchio cromatico. Essendo piccola la differenza di tinta, l'insieme riesce volentieri unito e pacato, e vi si ricorre spesso per scegliere il colore di fondo di un sito.
- Schema triadico
- Una tecnica che accosta tre colori nelle posizioni che dividono in tre il cerchio cromatico. Più morbida dei complementari, si bilancia con maggiore facilità degli analoghi offrendo più varietà.
- Scala di grigi
- Una serie di gradini privi di tinta, fatta soltanto di chiaro e scuro dal bianco al nero. Serve da base per regolare la differenza di chiarezza fra sfondo e testo e assicurare la leggibilità.
- HSL
- Un modo di esprimere un colore mediante tre grandezze: tinta, saturazione e luminosità. Rispetto all'HEX si presta a regolazioni intuitive, come mutare la sola luminosità mantenendo la stessa tinta.
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.