Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Das Wear Material 3 Expressive-Farbsystem verwendet drei Akzentschichten (primär, sekundär, tertiär) für wichtige Komponenten und zwei neutrale Oberflächenschichten. Jede Rolle bietet eine Reihe von Werten mit einem einheitlichen Kontrast, was ausdrucksstarke, aber barrierefreie Farbkombinationen für eine einheitliche Darstellung bei jedem Thema ermöglicht.
Beispiel für ein Farbdesign mit Rollen
Was sind Farbrollen?
Farbrollen sind wie die „Zahlen“ in einem Malen-nach-Zahlen-Canvas. Sie sind das Bindeglied zwischen den Elementen der Benutzeroberfläche und bestimmen, welche Farbe wo hingehört.
Farbrollen werden Materialkomponenten zugeordnet:Sie verwenden diese Farbrollen unabhängig davon, ob Sie das statische Baseline-Schema oder dynamische Farben verwenden. Wenn Ihr Produkt benutzerdefinierte Komponenten enthält, müssen diese diesen Farbrollen korrekt zugeordnet werden.
Farbrollen unterstützen die Barrierefreiheit:Das Farbsystem basiert auf barrierefreieren Farbkombinationen. Diese Farbpaare bieten einen Farbkontrast von mindestens 3:1.
Farbrollen werden tokenisiert:Rollen werden im Design und im Code durch Tokens implementiert. Ein Design-Token repräsentiert eine kleine, wiederverwendbare Designentscheidung, die Teil des visuellen Stils eines Designsystems ist.
Wichtige Begriffe
Hier sind die wichtigsten Begriffe, die in den Namen von Farbrollen vorkommen:
Fläche:Eine Rolle, die für Hintergründe und große, weniger hervorgehobene Bereiche des Bildschirms verwendet wird.
Primär, Sekundär, Tertiär:Rollen für Akzentfarben, mit denen Vordergrundelemente hervorgehoben oder weniger betont werden.
Container:Rollen, die als Füllungsfarbe für Vordergrundelemente wie Schaltflächen verwendet werden. Sie sollten nicht für Text oder Symbole verwendet werden.
An:Rollen, die mit diesem Begriff beginnen, geben eine Farbe für Text oder Symbole an, die über der übergeordneten Farbe liegt. „On primary“ wird beispielsweise für Text und Symbole auf der primären Füllfarbe verwendet.
Variante:Rollen, die auf diesen Begriff enden, sind eine weniger betonte Alternative zu ihrem nicht variantenbezogenen Paar. Die Konturvariante ist beispielsweise eine weniger betonte Version der Konturfarbe.
Hauptrollen
Primäre Rollen werden für wichtige Komponenten in der gesamten Benutzeroberfläche verwendet, z. B. für Schaltflächen mit Randabstand, gut sichtbare Schaltflächen, aktive Status und Symbole in den tonalen Schaltflächenstilen.
Primär
Primär
On-Primary
Verwenden Sie die Rolle „Primär“ für die wichtigsten Aktionen in der Benutzeroberfläche, z. B. primäre Schaltflächen oder Calls-to-Action. Diese Farbe sollte auffallen und sofort erkennbar sein, um die Nutzer zu wichtigen Interaktionen zu leiten.
Primary-Dim
Primary-Dim
On-Primary
Dimmen wird in der Regel für Elemente verwendet, die sich visuell von der primären Aktion abheben müssen, aber nicht sofort die Aufmerksamkeit oder Interaktion der Nutzer erfordern.
Primary-Container
Primary-Container
On-Primary-Container
Wenden Sie „Primärer Container“ auf Hintergrundelemente wie Karten oder Modalfenster an, um Abschnitte oder ausgewählte Status hervorzuheben. Sie hilft, die Aufmerksamkeit auf wichtige Inhalte oder laufende Aktivitäten auf der Benutzeroberfläche zu lenken.
Sekundäre Rollen
Sekundäre Rollen werden für wichtige Komponenten in der gesamten Benutzeroberfläche verwendet, die nicht so wichtig wie die primäre Rolle sind, aber dennoch hervorstechen müssen. Primäre und sekundäre Schriftarten können in Layouts zusammen verwendet werden, um Unterschiede zu schaffen und den Fokus zu setzen.
Sekundär
Zweiter Track
On-Secondary
Verwenden Sie die Rolle „Sekundär“, um Aktionen in Bereichen mit einer dichten Benutzeroberfläche zu unterstützen, z. B. sekundäre Schaltflächen oder ergänzende Aktionen. Sie sorgt für Sichtbarkeit, ohne die primären Elemente in komplexen Layouts zu überschatten.
Secondary-Dim
Sekundäre-Dim
Zweiter Track
Die Rolle „Secondary-Dim“ bietet einen gedämpften Kontrast für passive Elemente in dichten Bereichen. Sie ergänzt die Sekundärfarbe und verleiht dem Design subtile Tiefe. So bleibt die Benutzeroberfläche übersichtlich und Nutzer können sich leichter zurechtfinden.
Secondary-Container
Sekundärer Container
On-Secondary-Container
Verwenden Sie Sekundärcontainer, um sekundäre Elemente in dichten Layouts zu organisieren. Sie schaffen Struktur und Trennung, damit sekundäre Inhalte sich abheben, aber nicht dominant sind.
Tertiäre Rollen
Tertiäre Rollen werden für kontrastierende Akzente verwendet, um Primär- und Sekundärfarben auszubalancieren oder die Aufmerksamkeit auf ein Element wie ein Eingabefeld zu lenken.
Tertiäre Rollen können auch angeben, wann sich Inhalte ändern oder hervorgehoben werden sollen, z. B. wenn ein Ziel erreicht wird.
Tertiär
Dritter Track
On-Tertiary
Die Rolle „Terziär“ wird verwendet, um die Aufmerksamkeit auf wichtige Elemente zu lenken. Tertiäre Rollen sind besonders effektiv für Komponenten, die sich abheben sollen, z. B. Logos, Sticker oder spezielle Aktionselemente.
Tertiary-Dim
Tertiär-Dim
Dritter Track
Verwenden Sie die Rolle „Drittrangig abdunkeln“ für Schaltflächen oder Aktionen, die sich auf drittrangige Aktionen beziehen, aber nicht sofort den Fokus erfordern.
Tertiärer Container
Tertiärer Container
On-Tertiary-Container
Verwenden Sie tertiäre Container für Hintergründe, in denen sekundäre Inhalte gruppiert werden, z. B. Sammlungen von Logos oder Stickern. Es betont tertiäre Elemente und behält gleichzeitig Balance und Struktur in der Benutzeroberfläche bei.
Semantische Rollen
Rot (Fehler) wird für kritische Probleme wie Fehler, Löschen und alles im Zusammenhang mit einem Notfall verwendet. Sie soll sofort die Aufmerksamkeit auf Probleme oder Warnungen lenken, damit Nutzer schnell Bereiche erkennen können, in denen Korrekturmaßnahmen erforderlich sind.
Der Farbton von „Fehlerrot“ sollte einen ausreichenden Kontrast zu Hintergründen haben, um die Standards für Barrierefreiheit zu erfüllen. So ist er gut sichtbar und von anderen Statusfarben wie Warnungen oder Erfolgsmeldungen zu unterscheiden.
Fehler
Fehler
On-Error
Ein semantisches, aber leicht thematisch getöntes Rot, das Aktionen wie „Entfernen“, „Löschen“, „Schließen“ oder „Schließen“ angibt, z. B. „Wischen, um zu enthüllen“. Als Containeralternative hinzugefügt, die etwas weniger alarmierend und dringlich ist als die Farbe für Fehler.
Error-Dim
Error-Dim
On-Error
Ein semantisches, aber leicht thematisch getöntes Rot, das auf Fehler mit hoher Priorität oder Notfallaktionen hinweist, z. B. Sicherheitswarnungen, fehlgeschlagene Dialogfeld-Overlays oder Stopp-Schaltflächen.
Fehlercontainer
Fehler-Container
On-Error-Container
Weniger auffällige Containerfarbe für Komponenten, die den Fehlerstatus verwenden. Kann auch einen aktiven Fehlerstatus anzeigen, der weniger interaktiv ist als ein gefüllter Status, z. B. eine aktive Schaltfläche oder Karte für die Notfallfreigabe oder ein fehlgeschlagener Overlay-Dialog.
Oberflächencontainer und Höhen
Oberflächencontainer sind entscheidend für die Definition von Tiefe und Höhe innerhalb der Benutzeroberfläche. Sie sorgen durch Farbe für Struktur und Hierarchie und helfen, Komponenten anhand ihrer Wichtigkeit und Interaktion zu unterscheiden.
Surface-Container-Low
Surface-Container-Low
Auf der Oberfläche
Variante auf der Oberfläche
Ideal für einen erweiterten Container, der sich unter dem Surface-Container befinden muss, z. B. eine erweiterte Karte in der Benachrichtigung. Kann auch für nicht interaktive Karten verwendet werden, bei denen Inhalte von Begrenzungen profitieren.
Surface-Container
Surface-Container
Auf der Oberfläche
Variante auf der Oberfläche
Die Standardcontainerfarbe für die meisten Elemente. Er bietet eine neutrale, mäßige Erhebung und eignet sich daher für allgemeine UI-Komponenten.
Surface-Container-High
Surface-Container-High
Auf der Oberfläche
Variante auf der Oberfläche
Ideal für Komponenten mit hoher Betonung, die auf oder in Kombination mit Surface-Containern platziert werden müssen. Diese Farbe hilft, wichtige Bereiche in der Benutzeroberfläche hervorzuheben und eine Hierarchie zu schaffen.
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 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"]]
