Tavolozza colori Material Design

Tutte le 19 famiglie di colori con codici HEX, variabili CSS e verifica del contrasto. Fai clic su un colore per copiare.

Scarica CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Testo bianco {{ whiteContrast.toFixed(1) }}:1
Testo nero {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Cos’è il sistema di colori Material Design?

Il sistema di colori Material Design di Google include 19 famiglie di colori, ciascuna con 10 tonalità principali (50, 100–900) e fino a 4 tonalità di accento (A100–A700). Fornisce un linguaggio cromatico coerente per siti web e app.

Come usare i colori Material Design in CSS?

Scarica il file CSS con tutte le variabili e includilo nel tuo progetto. Poi usa i colori tramite CSS Custom Properties come var(--color-md-teal-500). Puoi anche usare i codici HEX direttamente.

Consigli per la scelta dei colori

  • Scegli un colore primario (es. Teal 500) e un colore di accento da un’altra famiglia.
  • Usa tonalità più chiare (50–200) per gli sfondi e più scure (700–900) per il testo.
  • Assicurati di avere un contrasto sufficiente (almeno 4.5:1) tra testo e sfondo per l’accessibilità.
  • La tonalità 500 è la rappresentazione standard di ogni famiglia di colori e ideale come colore primario.