Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il framework di colori espressivi di Material 3 utilizza temi di colori dinamici, basati su due colori di base mappati sul sistema di colori HCT (Hue, Chroma e Tone).
Termini essenziali
Ruolo del colore
Come i "numeri" su una tela da colorare, i ruoli dei colori vengono assegnati a elementi specifici dell'interfaccia utente. Hanno nomi come principale, su principale e contenitore principale. Lo stesso ruolo di colore viene utilizzato sia per i temi chiari che per quelli scuri. Visualizza tutti i
ruoli di colore
HCT
HCT sta per tonalità, crominanza e tono.
Definire i colori con tonalità, croma e tonalità (HCT)
Il generatore di colori HCT crea un insieme di tavolozze di colori a partire da un colore di base per creare un modello di colore tridimensionale che definisce i colori in base alla loro tonalità (colore), cromia (saturazione) e tono (luminosità).
Esistono tre colori di accento principali: principale, secondario e terziario. Le tonalità neutre, come i vari toni di grigio con un tocco di colore primario, sono ideali per essere utilizzate come colori dei contenitori per i contenuti avanzati grazie alla loro natura monocromatica.
Tonalità
La tonalità è la percezione di un colore, ad esempio rosso, arancione, giallo, verde, blu e viola. La tonalità è quantificata da un numero compreso tra 0 e 360 ed è uno spettro circolare (i valori 0 e 360 hanno la stessa tonalità).
Chroma
La cromia indica quanto un colore sia vivace o neutro (grigio, nero o bianco). La croma viene quantificata da un numero compreso tra 0 (completamente grigio, nero o bianco) e infinito (il più vivace), anche se i valori di croma in HCT raggiungono un massimo di circa 120.
A causa delle limitazioni biologiche e di rendering dello schermo, tonalità e sfumature diverse avranno valori di crominanza massimi diversi.
Tono
Il tono indica quanto è chiaro o scuro un colore. A volte il tono è indicato anche come
luminosità. Il tono viene quantificato da un numero compreso tra 0 (nero puro, nessuna luminanza) e 100 (bianco puro, luminanza completa).
Il tono è fondamentale per l'accessibilità visiva perché determina il contrasto. I colori con una maggiore differenza di tonalità creano un contrasto più elevato, mentre quelli con una minore differenza creano un contrasto inferiore.
Colore dinamico (tema a colori)
Wear OS implementa un sistema di temi conforme alle linee guida per l'accessibilità dei contenuti web (WCAG)-AAA, derivato da due colori di base designati. Nello specifico, questi colori di base fungono da base per le tavolozze principali e terziarie. Utilizzando questi due colori iniziali, il sistema genera una tavolozza di colori completa che comprende tavolozze di colori principali, secondarie, terziarie e di superficie. Successivamente, questo tema generato viene applicato ai componenti, agli elementi dell'interfaccia utente di sistema, ai riquadri e alle app di Wear OS.
Ogni quadrante definisce due colori di base, utilizzati per le tavolozze primaria e terziaria.Questi semi vengono sottoposti a un algoritmo che genera cinque gamme di tonalità, i toni specifici (in base alla luminanza) vengono inseriti nei ruoli predefiniti che consistono in uno schema. I colori vengono mappati a una combinazione tramite token di design.Ogni token di design viene poi applicato a SysUI, riquadri e app che hanno attivato l'utilizzo del colore dinamico.
A seconda delle tue preferenze, puoi utilizzare un colore di base specifico o un colore del marchio per ricavare il colore dinamico.
Dal colore del seme
Il colore dinamico crea automaticamente una combinazione di colori accessibile in base a un colore di base specifico.
Poiché l'interfaccia utente potrebbe avere un numero qualsiasi di colori di origine diversi, è meglio iniziare a progettarla utilizzando la combinazione di colori di base per assicurarti che i ruoli di colore giusti siano mappati ai componenti giusti del tuo prodotto. Utilizza Material Theme Builder per vedere l'aspetto dei mock di UI in una serie di colori di origine e modificare le impostazioni in base alle esigenze.
Tavolozza dei colori (dai colori di base del quadrante)
Tema a colori applicato a un riquadro
Tema a colori applicato alla schermata di un'app
Dal colore del brand
In modo simile al modo in cui Material 3 Expressive tratta i ruoli di colore, Wear OS applica il colore a esperienze individualizzate con un'espressione di colore dinamica e accessibile. Wear OS utilizza solo il tema scuro perché l'interfaccia del dispositivo indossabile è basata su uno sfondo nero. Poiché è una piattaforma che funziona su dispositivi touch, WearOS ha anche una tavolozza di colori più limitata in quanto non richiede tanti stati di passaggio del mouse e di messa a fuoco. Utilizza gli strumenti per la creazione di temi a colori specifici per Wear OS per creare un tema personalizzato per il tuo brand e generare le tavolozze di riferimento complete e i ruoli dei colori assegnati che supportano i token Material Design e sono progettati per funzionare perfettamente con i componenti dell'interfaccia utente di sistema.
Tavolozza dei colori (dai colori di base dell'artwork)
Tema a colori applicato a un riquadro
Tema a colori applicato alla schermata di un'app
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 system\n\nThe Material 3 Expressive color framework uses dynamic color theming, based on\ntwo seed colors mapped on the HCT (Hue, Chroma and Tone) color system.\n\nEssential terms\n---------------\n\nColor role\n: Like the \"numbers\" on a paint-by-number canvas, color roles are assigned to\n specific UI elements. They have names like primary, on primary, and primary\n container. The same color role is used for both light and dark themes. See all\n color roles\n\nHCT\n: HCT stands for hue, chroma, and tone.\n\nDefine colors with hue, chroma, and tone (HCT)\n----------------------------------------------\n\nHCT color generator creating a set of color palettes from one seed color to\ncreates a three-dimensional color model that defines colors based on their hue\n(color), chroma (saturation), and tone (lightness)\n\nThere are three main accents colors: primary, secondary and tertiary. Neutral\nshades, such as various tones of gray with a hint of primary color, are ideal\nfor use as container colors for rich content due to their monochromatic nature.\n\n### Hue\n\n\nHue is the perception of a color, such as red, orange, yellow, green, blue, and\nviolet. Hue is quantified by a number ranging from 0-360 and is a circular\nspectrum (values 0 and 360 are the same hue). \n\n\u003cbr /\u003e\n\n### Chroma\n\n\nChroma is how colorful or neutral (gray, black or white) a color appears. Chroma\nis quantified by a number ranging from 0 (completely gray, black or white) to\ninfinity (most vibrant), though chroma values in HCT top out at roughly 120.\n\nBecause of biological and screen rendering limitations, different hues and\ndifferent tones will have different maximal chroma values. \n\n\u003cbr /\u003e\n\n### Tone\n\n\nTone is how light or dark a color appears. Tone is sometimes also referred to as\n*luminance*. Tone is quantified by a number ranging from 0 (pure black, no\nluminance) to 100 (pure white, complete luminance).\n\nTone is crucial for visual accessibility because it determines contrast. Colors\nwith a greater difference in tone create higher contrast, while those with a\nsmaller difference create lower contrast. \n\n\u003cbr /\u003e\n\nDynamic color (color theming)\n-----------------------------\n\nWear OS implements a theming system compliant with [Web Content Accessibility\nGuidelines (WCAG)-AAA](https://www.w3.org/TR/WCAG22/#contrast-enhanced), derived from two designated *seed\ncolors*. Specifically, these seed colors serve as the basis for primary and\ntertiary palettes. Using these two initial colors, the system generates a\ncomprehensive color palette encompassing primary, secondary, tertiary, and\nsurface palettes. Subsequently, this generated theme is applied across Wear OS\ncomponents, System UI elements, tiles, and apps.\nEach Watch face defines two seed colors, used for primary and tertiary palettes.\n\n\u003cbr /\u003e\n\nThese seeds are put through an algorithm that becomes five tonal ranges, specific tones (based on luminance) are slotted into the predefined roles that consist of a scheme. Colors are mapped to a scheme through design tokens.\n\n\u003cbr /\u003e\n\nEach design token is then applied to the SysUI, tiles and apps that have opted in to using dynamic color.\n\n\u003cbr /\u003e\n\nDepending on your preference, you can use either a specific seed color or a\nbrand color to derive your dynamic color.\n\n### From seed color\n\nDynamic color will automatically create an accessible color scheme based on a\nspecific seed color.\n\nBecause the UI could end up with any number of different source colors, it's\nbest to initially design using the baseline color scheme so you can ensure the\nright color roles are mapped to the right components in your product. Use the\nMaterial Theme Builder to see how your UI mocks look across a range of source\ncolors and adjust settings as needed.\n\n\nColor palette (from Watch face seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### From brand color\n\nSimilar to the way Material 3 Expressive treats color roles, Wear OS applies\ncolor to individualized experiences with dynamic and accessible color\nexpression. Wear OS uses only the dark theme because the wearable interface is\nbuilt on a black background. Being a platform that runs on touch devices, Wear\nOS also has a more limited color palette as it doesn't require as many hover and\nfocus states. Use the Wear OS-specific color theme building tools to build a\ncustom theme around your brand and generate the full reference palettes and\nassigned color roles that support Material Design tokens and are built to work\nseamlessly with system UI components.\n\n\nColor palette (from artwork seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e"]]
