Softonic

Selettore Colori Material Design

Passaggio 1 / 3 Scegli una famiglia di colori

Palette fissa Material Design del 2014 (Material Design 2). Material 3 usa invece palette tonali generate.

Scegli una famiglia di colori

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

La palette Material Design definisce 19 famiglie di colori, Rosso, Rosa, Viola fino a Grigio e Grigio Blu, ognuna con una scala da tonalità 50 (chiara) a 900 (quasi nera), più tonalità di accento opzionali A100–A700. Questo selettore dispone ogni campione in una griglia e ti consente di copiare qualsiasi valore in HEX, RGB, HSL o nome del token Material da utilizzare in Tailwind, variabili CSS, UIColor di iOS o risorse colore di Android.

Come utilizzare la palette

  1. 1

    Scansiona la griglia

    Le famiglie si estendono a sinistra; le tonalità si estendono in alto da 50 a 900.

  2. 2

    Tocca un campione

    Vedi HEX, RGB, HSL e il nome del token Material canonico (es. Indigo 500).

  3. 3

    Copia il formato di cui hai bisogno

    Un clic copia la stringa esatta: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Controlla il contrasto

    Il pannello mostra il rapporto di contrasto WCAG contro il bianco e il nero per scegliere colori di testo accessibili.

La scala delle tonalità

Tonalità Utilizzo
50 Sfondo hover, superfici chiare
100 Sfondo chip, riempimenti a bassa enfasi
200 Stati disabilitati, superfici secondarie
300 Bordo, separatori
400 Testo secondario su sfondi chiari
500 Colore predefinito / primario, la base
600 Stati interattivi (hover, premuto)
700 Intestazioni, forte enfasi
800 Testo scuro su sfondi chiari
900 Elemento con il massimo contrasto (quasi nero)
A100 Accento chiaro
A200 Accento più chiaro del predefinito
A400 Accento (spesso il “brillante” evidenziatore del marchio)
A700 Accento profondo

Famiglie nella palette Material

Rosso, Rosa, Viola, Viola Scuro, Indigo, Blu, Blu Chiaro, Ciano, Teal, Verde, Verde Chiaro, Lime, Giallo, Ambra, Arancione, Arancione Scuro, Marrone, Grigio, Grigio Blu.

Marrone, Grigio e Grigio Blu non hanno tonalità di accento, sono le famiglie neutre.

Scelta di un primario

La specifica suggerisce 500 come colore primario, 700 per la variante più scura (utilizzata nella barra di stato su Android), e un accento A200 o A400 per azioni secondarie. Questa è una convenzione, non una regola, il Material 3 moderno (colore dinamico) deriva palette da un singolo colore seme piuttosto che scegliere da scale fisse.

Punto di controllo accessibilità

  • Testo del corpo: rapporto di contrasto ≥ 4.5:1 rispetto al suo sfondo (WCAG AA).
  • Testo grande (18 pt+ grassetto o 24 pt+ normale): ≥ 3:1.
  • Componenti UI e oggetti grafici: ≥ 3:1.

La palette non è sicura per il contrasto per impostazione predefinita. Giallo 500 su bianco fallisce gravemente il WCAG. Controlla sempre il rapporto prima di spedire una combinazione, il selettore lo mostra in linea.

Formati supportati

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (sintassi moderna) o rgb(63, 81, 181) (legacy).
  • HSL: hsl(231 48% 48%).
  • Token Material: Indigo 500, utile per documenti di design e Figma.
  • Tailwind: indigo-500, inserisci direttamente in un attributo di classe se il tuo tema Tailwind utilizza la scala Material.
  • XML colore Android: <color name="indigo_500">#FF3F51B5</color>, formato ARGB.
  • UIColor iOS: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Domande frequenti

Questo strumento riproduce la palette fissa Material Design pubblicata da Google nel 2014 e poi documentata nel sito Material Design 2. Non genera le palette tonali di Material 3 da un colore seme. Usalo quando ti servono i classici campioni numerati e di accento.

Marrone, Grigio e Grigio Blu sono neutri e non partecipano alle combinazioni di colori di accento. La specifica semplicemente omette A100–A700 per loro.

La palette predefinita di Tailwind è ispirata a Material ma non identica. Se desideri colori Material esatti, estendi theme.extend.colors con i valori Material e riferiscili come material-indigo-500 nei tuoi nomi di classe.

La convenzione dice di sì, ma nulla ti impedisce di usare 700 o un accento come primario. La convenzione 500 riguarda l’avere una tonalità di base affidabile con 8 passi in entrambe le direzioni per variazione.

Strumenti correlati

Generatore di codici QR

Genera localmente nel browser un codice QR da URL, testo semplice o payload QR formattato correttamente e scaricalo come PNG.

Creatore di GIF

Trasforma una sequenza di immagini o un breve video in una GIF animata. Regola frame rate, loop e dimensioni prima dell’esportazione.

Generatore di meme

Aggiungi testo in alto e in basso a un’immagine JPG, PNG o WebP. Regola font, colore e contorno, quindi scarica il meme in PNG.

Vettorializzatore da PNG a SVG

Trasforma immagini raster PNG in tracciati SVG nel browser. Ideale per loghi, icone e disegni al tratto. Regola soglia, numero di colori e smussatura.

Ridimensionatore di immagini per social media

Ridimensiona un’immagine con preset integrati per Instagram, Facebook, X, LinkedIn, YouTube, Pinterest e TikTok. Visualizza ogni PNG e scarica i formati che ti servono.

Lavagna online

Disegna idee e organizza forme, note e immagini locali su una lavagna privata nel browser. Esporta in PNG, JPEG, SVG o JSON modificabile.