Colore
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Crea combinazioni di colori più accessibili e personali che comunichino la gerarchia, lo stato e il brand del tuo prodotto. Quando si progetta per i dispositivi indossabili, il colore svolge un ruolo fondamentale nel migliorare la leggibilità, l'usabilità, l'appeal visivo e l'espressione, soprattutto su schermi più piccoli.
I seguenti principi spiegano come utilizzare il colore nei temi.
Crea da nero
Gli orologi sono progettati con uno sfondo nero, anziché con lo sfondo colorato usato dagli smartphone. Sebbene i temi scuri siano pensati per ambienti con scarsa illuminazione
e i temi chiari per la luce del giorno, le UI degli smartwatch devono funzionare senza problemi sia di giorno
che di notte. Pertanto, i token di colore per gli orologi devono essere personalizzati in modo specifico.
Nuovi ruoli di colore
Il sistema di colori di Material 3 mantiene la struttura di tre colori di accento e due colori di superficie neutri, ma introduce i colori dei contenitori nei ruoli di accento.
Questi nuovi ruoli consentono un maggiore potenziale espressivo senza interrompere la gerarchia visiva, fornendo essenzialmente variazioni di colore della superficie con una maggiore cromia.
I ruoli contenitore sono particolarmente utili per evidenziare gli stati, ad esempio i pulsanti di attivazione/disattivazione, o per fornire uno stile complementare quando l'accento principale è già utilizzato.
Significato semantico
Nelle UI degli smartwatch, i colori devono comunicare il significato in modo chiaro e intuitivo. Ad esempio, il rosso indica gli errori e il verde indica il successo, aiutando gli utenti a comprendere rapidamente le azioni o gli stati senza bisogno di spiegazioni aggiuntive. Questo uso semantico
del colore aiuta gli utenti a navigare nell'interfaccia utente e ad agire in tutta sicurezza.
Accessibilità dei colori (conformità al contrasto)
Nelle UI degli smartwatch, i colori devono comunicare il significato in modo chiaro e intuitivo. Ad esempio, il rosso indica gli errori e il verde indica il successo, aiutando gli utenti a comprendere rapidamente le azioni o gli stati senza bisogno di spiegazioni aggiuntive. Questo uso semantico
del colore aiuta gli utenti a navigare nell'interfaccia utente e ad agire in tutta sicurezza.
Novità
Sono stati apportati aggiornamenti sostanziali al sistema di design visivo e al modo in cui esaltiamo la creatività tramite gli aggiornamenti delle nostre basi di stile, dei componenti e delle librerie di design dei riquadri.
Il sistema di colori espressivi di Material 3 include le seguenti funzionalità:
- Set di relazioni di colore accessibili integrate
- Più di 28 ruoli di colore mappati ai componenti Material
- Colori tema scuro integrati per la creazione da nero
- Valori di colore disattivati migliorati
- Colori di errore aggiuntivi
- Colore di riferimento statico con colori predefiniti assegnati a ogni ruolo di colore
- Funzionalità di colore dinamico, tra cui Sistema/Quadrante e temi di colore basati su immagini
Risorse
Per scoprire di più, consulta le seguenti risorse.
Linee guida per i colori di Material Design
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-26 UTC.
[null,null,["Ultimo aggiornamento 2025-07-26 UTC."],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]