Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il sistema di colori espressivi di Wear Material 3 utilizza tre livelli di accento (principale, secondario, terziario) per i componenti chiave e due livelli di superficie neutri. Ogni ruolo offre una gamma di valori con un contrasto coerente, consentendo combinazioni di colori espressive ma accessibili per un'esperienza unificata in qualsiasi tema.
Un esempio di tema a colori con ruoli.
Che cosa sono i ruoli di colore?
I ruoli di colore sono come i "numeri" in una tela da colorare. Sono il tessuto connettivo tra gli elementi dell'interfaccia utente e il colore da utilizzare.
I ruoli di colore sono mappati ai componenti di Material:li utilizzerai indipendentemente dall'utilizzo dello schema di riferimento statico o del colore dinamico. Se il tuo prodotto contiene componenti personalizzati, questi dovranno essere mappati correttamente a questo insieme di ruoli di colore.
I ruoli di colore supportano l'accessibilità: il sistema di colori si basa su abbinamenti di colori più accessibili. Queste coppie di colori forniscono un minimo di 3:1 di
contrasto di colore.
I ruoli dei colori sono tokenizzati: i ruoli vengono implementati nel design e nel codice tramite token. Un token di design rappresenta una piccola decisione di design riutilizzabile che fa parte dello stile visivo di un sistema di design.
Termini essenziali
Di seguito sono riportati i termini chiave che vedrai nei nomi dei ruoli di colore:
Superficie:un ruolo utilizzato per gli sfondi e le aree ampie e poco accentuate dello schermo.
Principale, secondario, terziario:i ruoli dei colori di contrasto utilizzati per enfatizzare o attenuare gli elementi in primo piano.
Contenitore:i ruoli utilizzati come colore di riempimento per gli elementi in primo piano, come i pulsanti. Non devono essere utilizzati per testo o icone.
On:i ruoli che iniziano con questo termine indicano un colore per il testo o le icone sopra il colore principale accoppiato. Ad esempio, su principale viene utilizzato per il testo e le icone rispetto al colore di riempimento principale.
Variante: i ruoli che terminano con questo termine offrono un'alternativa meno enfatizzata rispetto alla coppia non variante. Ad esempio, la variante del contorno è una versione meno accentuata del colore del contorno.
Ruoli principali
I ruoli principali vengono utilizzati per i componenti chiave dell'interfaccia utente, ad esempio i pulsanti con bordi arrotondati, i pulsanti in evidenza, gli stati attivi e le icone negli stili dei pulsanti tonali.
Principale
Principale
Su principale
Utilizza il ruolo Principale per le azioni più importanti nell'interfaccia utente, come i pulsanti o gli inviti all'azione principali. Questo colore deve risaltare ed essere immediatamente riconoscibile per indirizzare l'utente verso le interazioni chiave.
Primary-Dim
Primary-Dim
Su principale
I ruoli di attenuazione vengono in genere utilizzati per gli elementi che devono essere visivamente distinti dall'azione principale, ma che non richiedono l'attenzione o l'interazione immediata dell'utente.
Primary-Container
Primary-Container
On-Primary-Container
Applica il contenitore principale per gli elementi di sfondo, come schede o finestre modali, per evidenziare sezioni o stati selezionati. Aiutano a attirare l'attenzione su contenuti importanti o attività in corso all'interno dell'interfaccia utente.
Ruoli secondari
I ruoli secondari vengono utilizzati per i componenti chiave dell'interfaccia utente, che non sono importanti quanto il ruolo principale, ma devono comunque risaltare. I colori principali e secondari possono essere utilizzati insieme nei layout per creare differenziazione e mettere in evidenza gli elementi.
Secondario
Secondario
On-Secondary
Utilizza il ruolo Secondario per supportare le azioni in aree con un'interfaccia utente complessa, ad esempio pulsanti secondari o azioni complementari. Mantiene la visibilità senza mettere in ombra gli elementi principali in layout complessi.
Secondario-Dim
Secondaria-Dim
Secondario
Il ruolo Secondario-Sbiadito offre un contrasto attenuato per gli elementi passivi nelle aree con elevata densità. Completa il colore secondario aggiungendo una sottile profondità, mantenendo l'UI pulita e aiutando gli utenti a navigare.
Secondary-Container
Secondary-Container
On-Secondary-Container
Applica Contenitore secondario per organizzare gli elementi secondari in layout fitti.
Crea struttura e separazione, garantendo che i contenuti secondari siano distinguibili, ma non dominanti.
Ruoli terziari
I ruoli terziari vengono utilizzati per gli accenti a contrasto per bilanciare i colori primari e secondari o attirare l'attenzione su un elemento, ad esempio un campo di immissione.
I ruoli terziari possono anche essere utili per indicare quando i contenuti cambiano o devono essere messi in evidenza, ad esempio quando viene raggiunto un obiettivo.
Terziario
Terziario
Terziario
Il ruolo Terziario viene utilizzato per attirare l'attenzione sugli elementi chiave. I ruoli terziari
sono particolarmente efficaci per i componenti che devono risaltare, come
badge, adesivi o elementi di azioni speciali.
Tertiary-Dim
Tertiary-Dim
Terziario
Utilizza il ruolo Dim terziario per i pulsanti o le azioni correlate alle azioni terziarie, ma che non richiedono l'attenzione immediata.
Contenitore terziario
Contenitore terziario
On-Tertiary-Container
Applica Contenitore terziario per gli sfondi che raggruppano contenuti correlati terziari, come collezioni di badge o adesivi. Mette in evidenza gli elementi terziari, mantenendo al contempo l'equilibrio e la struttura dell'interfaccia utente.
Ruoli semantici
Errore-Rosso viene utilizzato per indicare problemi critici come errori, eliminazioni e qualsiasi elemento correlato a situazioni di emergenza. È progettato per attirare immediatamente l'attenzione su problemi o avvertimenti, in modo che gli utenti possano identificare rapidamente le aree che richiedono un intervento correttivo.
Il tono di Rosso-errore deve mantenere un contrasto sufficiente con gli sfondi per soddisfare gli standard di accessibilità, assicurandosi che sia chiaramente visibile e distinguibile da altri colori di stato come avvisi o messaggi di successo.
Errore
Errore
On-Error
Un rosso semantico, ma leggermente tinto dal tema, che indica azioni di rimozione, eliminazione, chiusura o dismissione, come Scorri per visualizzare. È stato aggiunto come alternativa al contenitore
che è leggermente meno allarmante e urgente del colore di attenuazione degli errori.
Error-Dim
Error-Dim
On-Error
Un rosso semantico, ma leggermente tinto dal tema, che indica errori di alta priorità o azioni di emergenza, come avvisi di sicurezza, overlay di finestre di dialogo non riusciti o pulsanti di interruzione.
Error-Container
Error-Container
On-Error-Container
Colore del contenitore meno in evidenza, per i componenti che utilizzano lo stato di errore. Può anche indicare uno stato di errore attivo che sembra meno interattivo di uno stato compilato, ad esempio un pulsante o una scheda di condivisione di emergenza attivi o una finestra di dialogo in overlay non riuscita.
Contenitori di superficie ed elevazione
I contenitori di superficie sono fondamentali per definire la profondità e l'elevazione all'interno dell'interfaccia utente, fornendo struttura e gerarchia tramite il colore e contribuendo a differenziare i componenti in base alla loro importanza e interazione.
Surface-Container-Low
Surface-Container-Low
Sulla superficie
On-Surface-Variant
Ottimo per un contenitore espanso che deve trovarsi sotto Surface-Container, ad esempio una scheda espansa nella notifica. Può essere utilizzato anche per le schede non interattive, in cui i contenuti beneficiano comunque del contenimento.
Surface-Container
Surface-Container
Sulla superficie
On-Surface-Variant
Il colore del contenitore predefinito per la maggior parte degli elementi. Fornisce un'elevazione neutra e moderata, il che la rende adatta per i componenti dell'interfaccia utente generale.
Superficie-Contenitore-Alto
Surface-Container-High
Su una superficie
On-Surface-Variant
Ideale per componenti ad alta enfasi che devono essere posizionati sopra o in combinazione con Surface-Container. Questo colore aiuta a mettere in evidenza e a creare gerarchia nelle aree critiche dell'interfaccia utente.
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-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Color roles and tokens\n\nThe Wear Material 3 Expressive color system employs three accent layers\n(primary, secondary, tertiary) for key components and two neutral surface\nlayers. Each role offers a range of values with consistent contrast, enabling\nexpressive yet accessible color combinations for a unified experience across any\ntheme.\nAn example of a color theme with roles.\n\nWhat are color roles?\n---------------------\n\nColor roles are like the \"numbers\" in a paint-by-number canvas. They're the\nconnective tissue between elements of the UI and what color goes where.\n\n- **Color roles are mapped to Material components:** You'll use these color roles whether you're using the static baseline scheme or dynamic color. If your product contains custom components, they'll need to be properly mapped to this set of color roles.\n- **Color roles support accessibility:** The color system is built on more accessible color pairings. These color pairs provide a minimum of 3:1 color contrast.\n- **Color roles are tokenized:** Roles are implemented in design and code through tokens. A design token represents a small, reusable design decision that's part of a design system's visual style.\n\nEssential terms\n---------------\n\nHere are key terms you'll see in the names of color roles:\n\n- **Surface:** A role used for backgrounds and large, low-emphasis areas of the screen.\n- **Primary, Secondary, Tertiary:** Accent color roles used to emphasize or de-emphasize foreground elements.\n- **Container:** Roles used as a fill color for foreground elements like buttons. They shouldn't be used for text or icons.\n- **On:** Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.\n- **Variant:** Roles ending with this term offer a lower-emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.\n\nPrimary roles\n-------------\n\n\nPrimary roles are used for key components across the UI, such as the Edge\nHugging buttons, prominent buttons, active states, and icons on the tonal button\nstyles. \n\n\u003cbr /\u003e\n\n\n**Primary**\n\n1. Primary\n2. On-Primary\n\nUse the Primary role for the most important actions in the UI, like primary\nbuttons or calls to action. This color should stand out and be instantly\nrecognizable to guide the user toward key interactions. \n\n**Primary-Dim**\n\n1. Primary-Dim\n2. On-Primary\n\nDim roles are typically used for elements that need to be visually distinct from\nthe primary action but don't require immediate user attention or interaction. \n\n**Primary-Container**\n\n1. Primary-Container\n2. On-Primary-Container\n\nApply Primary Container for background elements like cards or modals to\nhighlight sections or selected states. It helps draw attention to important\ncontent or ongoing activities within the UI.\n\n\u003cbr /\u003e\n\nSecondary roles\n---------------\n\n\nSecondary roles are used for key components across the UI, which are not as\nimportant as the primary role, but still need to stand out. Primary and\nsecondary can be used together in layouts to create differentiation and focus. \n\n\u003cbr /\u003e\n\n\n**Secondary**\n\n1. Secondary\n2. On-Secondary\n\nUse the Secondary role for supporting actions in areas with dense UI, such as\nsecondary buttons or complementary actions. It maintains visibility without\novershadowing primary elements in complex layouts. \n\n**Secondary-Dim**\n\n1. Secondary-Dim\n2. Secondary\n\nThe Secondary-Dim role offers a muted contrast for passive elements in dense\nareas. It complements the secondary color while adding subtle depth, keeping the\nUI clean and helping users navigate. \n\n**Secondary-Container**\n\n1. Secondary-Container\n2. On-Secondary-Container\n\nApply Secondary-Container for organizing secondary elements in dense layouts. It\ncreates structure and separation, ensuring secondary content is distinguishable\nbut not dominant.\n\n\u003cbr /\u003e\n\nTertiary roles\n--------------\n\n\nTertiary roles are used for contrasting accents to balance primary and secondary\ncolors or bring heightened attention to an element such as an input field.\nTertiary roles can also help indicate when content changes or should stand out,\nsuch as a goal being reached. \n\n\u003cbr /\u003e\n\n\n**Tertiary**\n\n1. Tertiary\n2. On-Tertiary\n\nThe Tertiary role is used for drawing attention to key elements. Tertiary roles\nare particularly effective for components that need to stand out, such as\nbadges, stickers, or special action elements. \n\n**Tertiary-Dim**\n\n1. Tertiary-Dim\n2. Tertiary\n\nUse the Tertiary Dim role for buttons or actions that are related to tertiary\nactions yet don't require immediate focus. \n\n**Tertiary-Container**\n\n1. Tertiary-Container\n2. On-Tertiary-Container\n\nApply Tertiary-Container for backgrounds that group tertiary-related content,\nlike collections of badges or stickers. It emphasizes tertiary elements while\nmaintaining balance and structure in the UI.\n\n\u003cbr /\u003e\n\nSemantic roles\n--------------\n\n\nError-Red is used to indicate critical issues as error, delete, and anything\nrelated to emergency. It is designed to draw immediate attention to problems or\nwarnings, ensuring users can quickly identify areas that need corrective action.\nThe tone of Error-Red should maintain sufficient contrast against backgrounds to\nmeet accessibility standards, ensuring it is clearly visible and is\ndistinguishable from other status colors like warnings or success messages. \n\n\u003cbr /\u003e\n\n\n**Error**\n\n1. Error\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates remove, delete, close\nor dismiss actions, such as Swipe to Reveal. Added as a container alternative\nthat is slightly less alarming and urgent than the error-dim color. \n\n**Error-Dim**\n\n1. Error-Dim\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates high priority errors\nor emergency actions, such as safety alerts, failed dialog overlays or stop\nbuttons. \n\n**Error-Container**\n\n1. Error-Container\n2. On-Error-Container\n\nLess prominent container color, for components using the error state. Can also\nindicate an active error state which feels less interactive than a filled state,\nsuch as an active emergency sharing button or card, or on a failed overlay\ndialog.\n\n\u003cbr /\u003e\n\nSurface containers and elevation\n--------------------------------\n\n\nSurface containers are key in defining depth and elevation within the UI,\nproviding structure and hierarchy through color, helping to differentiate\ncomponents based on their importance and interaction. \n\n\u003cbr /\u003e\n\n\n**Surface-Container-Low**\n\n1. Surface-Container-Low\n2. On-Surface\n3. On-Surface-Variant\n\nGreat for an expanded container that needs to sit below Surface-Container, such\nas an expanded card in the Notification. Can also be used for non-interactive\ncards, where content still benefits from containment. \n\n**Surface-Container**\n\n1. Surface-Container\n2. On-Surface\n3. On-Surface-Variant\n\nThe default container color for most elements. It provides a neutral, moderate\nelevation, making it suitable for general UI components. \n\n**Surface-Container-High**\n\n1. Surface-Container-High\n2. On-Surface\n3. On-Surface-Variant\n\nIdeal for high-emphasis components that need to sit on top of, or in combination\nwith Surface-Container. This color helps bring focus and hierarchy to critical\nareas in the UI.\n\n\u003cbr /\u003e"]]
