Generatore di palette Material Design

Il generatore mantiene il colore indicato al livello 500 e calcola i livelli chiari da 50 a 400 e quelli scuri da 600 a 900. Ogni risultato viene restituito come testo #RRGGBB in maiuscolo, pronto da copiare in CSS, in un file di tema o in un sistema di token. Il calcolo è immediato, ripetibile e non dipende da servizi di rete o scelte cromatiche soggettive.

Parta da un colore di base affidabile

Inserisca un colore esadecimale di sei cifre preceduto dal cancelletto, come #3F51B5. Questo valore diventa la tonalità 500, il riferimento visivo della scala generata. Un formato rigoroso elimina le ambiguità tra notazioni abbreviate, codici con canale alfa e valori esadecimali privi di cancelletto. Prima di scegliere la base, consideri dove verrà usata più spesso. Un colore distintivo del marchio applicato ai pulsanti potrebbe richiedere contrasto sufficiente sia sulle superfici chiare sia su quelle scure, mentre un colore decorativo per grafici potrebbe dover risaltare rispetto alle serie vicine. Il generatore non modifica silenziosamente il riferimento per soddisfare obiettivi di contrasto; mantenere intatto il livello 500 rende la palette riconducibile alla scelta iniziale. I livelli con numero inferiore diventano progressivamente più chiari, quelli superiori più scuri. L'output usa valori di sei cifre in maiuscolo, pronti per proprietà CSS, file JSON di token, temi dei componenti o documentazione. Le stringhe non valide vengono rifiutate invece di essere interpretate parzialmente o per supposizione.

Comprenda come viene prodotta la scala

La palette segue le consuete etichette Material: 50, 100, 200, 300, 400, 500, 600, 700, 800 e 900. Il livello 500 coincide esattamente con la base fornita. Per il lato chiaro, ciascun canale rosso, verde e blu viene miscelato con il bianco in proporzioni fisse, con la schiaritura più intensa al livello 50. Per il lato scuro, gli stessi canali vengono miscelati con il nero e il livello 900 riceve l'oscuramento maggiore. Ogni canale viene arrotondato all'intero più vicino e riconvertito in formato esadecimale. L'interpolazione RGB fissa rende l'algoritmo trasparente e deterministico: lo stesso input produce sempre gli stessi dieci valori nello stesso ordine. Evita inoltre dipendenze nascoste da profili dello schermo, gestione cromatica del browser, API di rete o impostazioni variabili dei programmi di design. La scala risultante è una famiglia tonale pratica in stile Material, ma non implica che ogni intervallo abbia identica luminosità percepita. La vista umana reagisce diversamente alle varie tinte; in presenza di requisiti percettivi rigorosi, usi il risultato come punto di partenza stabile e lo valuti nel contesto effettivo.

Applichi la palette tutelando l'accessibilità

Associ i valori restituiti a token semantici invece di distribuire i numeri delle tonalità in tutta l'applicazione. Un tema può, per esempio, assegnare una tonalità allo sfondo interattivo, un'altra allo stato di passaggio del puntatore e una più chiara alla superficie selezionata. Conservare questa mappatura in un unico livello di token consente di regolare il sistema visivo senza modificare ogni componente. Verifichi sempre le combinazioni di primo piano e sfondo con la dimensione e il peso del carattere realmente pubblicati. Il numero della tonalità non garantisce uno specifico rapporto di contrasto e due colori di base possono produrre risultati di accessibilità molto diversi allo stesso livello. Esamini separatamente indicatori di messa a fuoco, controlli disabilitati, visualizzazioni di dati, modalità scura e impostazioni ad alto contrasto. La palette generata accelera l'esplorazione fornendo rapidamente opzioni coerenti, ma la scelta finale deve comunque considerare contesto e significato. Non usi il colore come unico segnale per errori o stati. Quando progettazione e sviluppo condividono la palette, registri insieme la base originale e i valori generati affinché le modifiche future siano riproducibili.