Farbe
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Erstellen Sie barrierefreiere, persönliche Farbschemata, die die Hierarchie, den Status und die Marke Ihres Produkts kommunizieren. Beim Design von Wearables spielt Farbe eine entscheidende Rolle bei der Verbesserung der Lesbarkeit, Usability, visuellen Attraktivität und Ausdruckskraft, insbesondere auf kleineren Bildschirmen.
In den folgenden Prinzipien wird erläutert, wie Farben für verschiedene Themen verwendet werden können.
Von Schwarz aus erstellen
Smartwatches haben einen schwarzen Hintergrund anstelle des getönten Hintergrunds, der auf Smartphones verwendet wird. Dunkle Designs sind für Umgebungen mit wenig Licht und helle Designs für Tageslicht gedacht. Die Benutzeroberfläche einer Smartwatch muss jedoch sowohl bei Tag als auch bei Nacht reibungslos funktionieren. Daher müssen Farb-Tokens für Smartwatches speziell angepasst werden.
Neue Farbrollen
Das Farbsystem von Material 3 behält die Struktur von drei Akzentfarben und zwei neutralen Oberflächenfarben bei, führt aber Containerfarben in den Akzentrollen ein.
Diese neuen Rollen ermöglichen ein größeres Ausdruckspotenzial, ohne die visuelle Hierarchie zu stören. Sie bieten im Wesentlichen Oberflächenfarbvarianten mit erhöhter Farbsättigung.
Containerrollen sind besonders nützlich, um Status hervorzuheben, z. B. bei Ein-/Aus-Schaltflächen, oder um ein ergänzendes Design zu bieten, wenn der primäre Akzent bereits verwendet wird.
Semantische Bedeutung
In der Smartwatch-Benutzeroberfläche müssen Farben ihre Bedeutung klar und intuitiv vermitteln. So steht beispielsweise Rot für Fehler und Grün für Erfolg. So können Nutzer schnell Aktionen oder Status verstehen, ohne dass zusätzliche Erklärungen erforderlich sind. Diese semantische Verwendung von Farbe hilft Nutzern, sich in Ihrer Benutzeroberfläche zurechtzufinden und sicher Maßnahmen zu ergreifen.
Barrierefreie Farben (Kontrast)
In der Benutzeroberfläche einer Smartwatch müssen Farben ihre Bedeutung klar und intuitiv vermitteln. So steht beispielsweise Rot für Fehler und Grün für Erfolg. So können Nutzer schnell Aktionen oder Status verstehen, ohne dass zusätzliche Erklärungen erforderlich sind. Diese semantische Verwendung von Farbe hilft Nutzern, sich in Ihrer Benutzeroberfläche zurechtzufinden und sicher Maßnahmen zu ergreifen.
Das ist neu
Es gibt erhebliche Änderungen am visuellen Designsystem und daran, wie wir die Ausdruckskraft durch Aktualisierungen unserer Stilgrundlagen, Komponenten und Designbibliotheken für Kacheln steigern.
Das expressive Farbsystem von Material 3 umfasst die folgenden Funktionen:
- Integrierte Farbbeziehungen für Barrierefreiheit
- Über 28 Farbrollen, die Material-Komponenten zugeordnet sind
- Vordefinierte Farben für dunkle Designs, die auf Schwarz basieren
- Verbesserte Farbwerte für deaktivierte Elemente
- Zusätzliche Fehlerfarben
- Statische Baseline-Farbe mit Standardfarben, die jeder Farbrolle zugewiesen sind
- Dynamische Farbfunktionen, einschließlich System-/Zifferblatt und bildbasierte Farbthemen
Ressourcen
Weitere Informationen finden Sie in den folgenden Ressourcen.
Farbrichtlinien für Material Design
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-26 (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-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"]]
