Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Das Farb-Framework „Material 3 Expressive“ verwendet dynamische Farbthemen, die auf zwei Startfarben basieren, die dem HCT-Farbsystem (Hue, Chroma und Tone) zugeordnet sind.
Wichtige Begriffe
Farbrolle
Ähnlich wie die „Zahlen“ auf einem Malen-nach-Zahlen-Canvas werden bestimmten UI-Elementen Farbrollen zugewiesen. Sie haben Namen wie „primary“, „on primary“ und „primary container“. Die gleiche Farbrolle wird sowohl für das helle als auch für das dunkle Design verwendet. Alle Rollen mit Farbcode ansehen
HCT
HCT steht für Farbton, Farbsättigung und Farbton.
Farben mit Farbton, Farbsättigung und Farbton (HCT) definieren
HCT-Farbgenerator, der eine Reihe von Farbpaletten aus einer Startfarbe erstellt, um ein dreidimensionales Farbmodell zu erstellen, das Farben anhand ihrer Farbton (Farbe), Chroma (Sättigung) und Ton (Helligkeit) definiert
Es gibt drei Hauptakzentfarben: Primär-, Sekundär- und Tertiärfarben. Neutrale Farbtöne wie verschiedene Grautöne mit einem Hauch von Primärfarbe eignen sich aufgrund ihrer monochromen Natur ideal als Containerfarben für Rich-Content.
Farbton
Der Farbton ist die Wahrnehmung einer Farbe wie Rot, Orange, Gelb, Grün, Blau und Violett. Der Farbton wird durch eine Zahl zwischen 0 und 360 quantifiziert und ist ein kreisförmiges Spektrum (die Werte 0 und 360 haben denselben Farbton).
Chroma
Die Chroma gibt an, wie bunt oder neutral (grau, schwarz oder weiß) eine Farbe erscheint. Die Farbsättigung wird durch eine Zahl quantifiziert, die von 0 (völlig grau, schwarz oder weiß) bis unendlich (sehr lebhaft) reicht. Die Farbsättigungswerte in HCT betragen jedoch maximal etwa 120.
Aufgrund biologischer und Bildschirmrendering-Einschränkungen haben unterschiedliche Farbtöne und unterschiedliche Töne unterschiedliche maximale Chromawerte.
Tonfall
Der Farbton gibt an, wie hell oder dunkel eine Farbe ist. Der Farbton wird manchmal auch als Leuchtkraft bezeichnet. Der Farbton wird durch eine Zahl zwischen 0 (reines Schwarz, keine Leuchtkraft) und 100 (reines Weiß, vollständige Leuchtkraft) quantifiziert.
Der Farbton ist entscheidend für die visuelle Barrierefreiheit, da er den Kontrast bestimmt. Farben mit einem größeren Farbtonunterschied erzeugen einen höheren Kontrast, während Farben mit einem geringeren Unterschied einen niedrigeren Kontrast erzeugen.
Dynamische Farben (Farbthemen)
Wear OS implementiert ein Designsystem, das den Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG)-AAA entspricht und aus zwei ausgewählten Grundfarben abgeleitet ist. Insbesondere dienen diese Grundfarben als Grundlage für primäre und sekundäre Paletten. Anhand dieser beiden Anfangsfarben generiert das System eine umfassende Farbpalette, die primäre, sekundäre, tertiäre und Oberflächenpaletten umfasst. Anschließend wird dieses generierte Design auf Wear OS-Komponenten, System-UI-Elemente, Kacheln und Apps angewendet.
Für jedes Zifferblatt werden zwei Startfarben definiert, die für die Primär- und Tertiärpaletten verwendet werden.Diese Samen werden einem Algorithmus unterzogen, der fünf Tonbereiche ergibt. Bestimmte Töne (basierend auf der Leuchtkraft) werden in die vordefinierten Rollen eingefügt, die aus einem Schema bestehen. Farben werden über Design-Tokens einem Schema zugeordnet.Jedes Design-Token wird dann auf die System-UI, Kacheln und Apps angewendet, für die die dynamische Farbgebung aktiviert wurde.
Je nach Bedarf können Sie entweder eine bestimmte Startfarbe oder eine Markenfarbe verwenden, um die dynamische Farbe abzuleiten.
Aus der Samenfarbe
Mit der dynamischen Farbfunktion wird automatisch ein barrierefreies Farbschema basierend auf einer bestimmten Startfarbe erstellt.
Da die Benutzeroberfläche eine beliebige Anzahl verschiedener Quellfarben haben kann, ist es am besten, zuerst das Basisfarbschema zu verwenden, damit Sie sicherstellen können, dass die richtigen Farbrollen den richtigen Komponenten in Ihrem Produkt zugeordnet sind. Mit dem Material Theme Builder können Sie sehen, wie Ihre UI-Modelle in verschiedenen Quellfarben aussehen, und die Einstellungen nach Bedarf anpassen.
Farbvorlage (aus den Startfarben des Zifferblatts)
Farbdesign auf eine Kachel angewendet
Farbdesign auf einem App-Bildschirm
Von der Markenfarbe
Ähnlich wie bei Material 3 Expressive werden in Wear OS Farben für personalisierte Inhalte mit dynamischen und barrierefreien Farbausdrücken verwendet. Bei Wear OS wird nur das dunkle Design verwendet, da die Benutzeroberfläche des Wearables auf einem schwarzen Hintergrund basiert. Da Wear OS auf Touchbildschirmen ausgeführt wird, ist die Farbpalette auch eingeschränkter, da nicht so viele Hover- und Fokusstatus erforderlich sind. Mit den Wear OS-spezifischen Tools zum Erstellen von Farbthemen können Sie ein benutzerdefiniertes Design für Ihre Marke erstellen und die vollständigen Referenzpaletten und zugewiesenen Farbrollen generieren, die Material Design-Tokens unterstützen und nahtlos mit den Komponenten der System-UI zusammenarbeiten.
Farbvorlage (aus den Startfarben des Artworks)
Farbdesign auf eine Kachel angewendet
Farbdesign auf einem App-Bildschirm
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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"]]
