Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
System kolorów Expressive w Material 3 na Wear OS wykorzystuje 3 poziomy akcentów (główny, dodatkowy i terciarny) dla kluczowych komponentów oraz 2 poziomy neutralnych powierzchni. Każda rola oferuje zakres wartości o spójnym kontraście, co umożliwia tworzenie wyrazistych, a jednocześnie przystępnych kombinacji kolorów, które zapewniają spójne wrażenia niezależnie od motywu.
Przykład motywu kolorystycznego z rolami
Czym są role kolorów?
Role kolorów są jak „liczby” na płótnie do malowania według numerów. To element łączący elementy interfejsu i określający, jaki kolor ma być użyty w danym miejscu.
Role kolorów są mapowane na komponenty Material Design: tych ról kolorów używasz niezależnie od tego, czy korzystasz ze stałego schematu bazowego czy koloru dynamicznego. Jeśli produkt zawiera komponenty niestandardowe, trzeba je odpowiednio przypisać do tego zestawu ról kolorów.
Rola kolorów ułatwia dostępność: system kolorów opiera się na bardziej dostępnych zestawieniach kolorów. Te pary kolorów zapewniają kontrast kolorów co najmniej 3:1.
Role kolorów są tokenizowane: role są implementowane w projektowaniu i kodzie za pomocą tokenów. Token projektowania to małe, wielokrotnie użyteczne rozwiązanie projektowe, które jest częścią stylu wizualnego systemu projektowania.
Warunki
Oto kluczowe terminy, które zobaczysz w nazwach ról kolorów:
Powierzchnia: rola używana w przypadku tła i dużych obszarów o małej mocy przekazu.
Podstawowy, dodatkowy, trzeciorzędny: role koloru akcentu używane do podkreślania lub odsuwania na dalszy plan elementów pierwszego planu.
Kontener:role używane jako kolor wypełnienia elementów pierwszego planu, np. przycisków. Nie należy ich używać do tekstu ani ikon.
Wł.: role zaczynające się od tego słowa wskazują kolor tekstu lub ikony na tle koloru pary nadrzędnej. Na przykład w przypadku koloru podstawowego używanego do tekstu i ikon na tle koloru podstawowego.
Wariant: role kończące się tym terminem oferują alternatywę o mniejszym znaczeniu w porównaniu z parą bez wariantu. Na przykład wariant obrysu to mniej wyróżniona wersja koloru obrysu.
Role główne
Główne role są używane w przypadku kluczowych komponentów w interfejsie, takich jak przyciski Edge Wrapping, wyróżnione przyciski, stany aktywne i ikony w przyciskach o tonalnym stylu.
Główny
Główny
Na urządzeniu głównym
Używaj roli głównej do najważniejszych działań w interfejsie, takich jak główne przyciski lub wezwania do działania. Kolor powinien się wyróżniać i być od razu rozpoznawalny, aby kierować użytkownika do kluczowych interakcji.
Primary-Dim
Podstawowy – przyciemniony
Na urządzeniu głównym
Role przyciemnienia są zwykle używane w przypadku elementów, które muszą się wizualnie różnić od głównego działania, ale nie wymagają natychmiastowej uwagi użytkownika ani interakcji.
Primary-Container
Primary-Container
W kontenerze głównym
Użyj kontenera głównego do elementów tła, takich jak karty czy modale, aby wyróżnić sekcje lub wybrane stany. Pomaga on zwrócić uwagę na ważne treści lub trwające działania w interfejsie.
Role dodatkowe
Dodatkowe role są używane w przypadku kluczowych komponentów w interfejsie, które nie są tak ważne jak główna rola, ale mimo to muszą się wyróżniać. Elementy podstawowe i dodatkowe można stosować razem w projektach, aby uzyskać różnicowanie i skupić uwagę odbiorców.
Dodatkowy
Secondary
W ramach umowy dodatkowej
Używaj roli dodatkowej do obsługi działań w obszarach o gęstym interfejsie, takich jak dodatkowe przyciski lub uzupełniające działania. Utrzymuje widoczność bez przysłaniania elementów głównych w złożonych układach.
Secondary-Dim
Wymiar dodatkowy
Secondary
Rola Drugorzędne przyciemnienie zapewnia stonowany kontrast dla elementów biernych w obszarach o dużym zagęszczeniu elementów. Uzupełnia on kolor dodatkowy, nadając mu subtelną głębię, a jednocześnie nie zaburza przejrzystości interfejsu i ułatwia użytkownikom nawigację.
Secondary-Container
Secondary-Container
On-Secondary-Container
Stosuj element Secondary-Container do organizowania elementów dodatkowych w gęstych układach. Tworzy strukturę i oddzielenie, dzięki czemu treści dodatkowe są widoczne, ale nie dominują.
Role trzeciego poziomu
Trzeciotne role są używane do kontrastowych akcentów, aby zrównoważyć kolory podstawowe i dodatkowe lub zwrócić uwagę na element, np. pole wprowadzania danych.
Pomocnicze role mogą też wskazywać, kiedy treści się zmieniają lub powinny się wyróżniać, na przykład gdy osiągnięto cel.
Tertiary
Tertiary
Na poziomie trzeciorzędowym
Rola trzeciorzędna służy do zwrócenia uwagi na kluczowe elementy. Role trzeciego stopnia są szczególnie skuteczne w przypadku komponentów, które muszą się wyróżniać, takich jak plakietki, naklejki czy specjalne elementy akcji.
Tertiary-Dim
Tertiary-Dim
Tertiary
Używaj roli przyciemnienia w trzecim planie w przypadku przycisków lub działań związanych z działaniami na trzecim poziomie, które nie wymagają natychmiastowego skupienia uwagi.
Tertiary-Container
Tertiary-Container
Kontenery trzeciego poziomu
Zastosuj kontener trzeciorzędowy w przypadku teł, które grupują treści związane z trzecim poziomem, takie jak kolekcje plakietek lub naklejek. Podkreśla elementy trzeciego rzędu, zachowując równowagę i strukturę interfejsu.
Role semantyczne
Czerwony kolor jest używany do wskazywania krytycznych problemów, takich jak błąd, usunięcie i wszystko, co jest związane z awarią. Ma ona na celu zwrócenie natychmiastowej uwagi na problemy lub ostrzeżenia, aby użytkownicy mogli szybko zidentyfikować obszary, które wymagają korekty.
Kolor czerwony (błąd) powinien być wystarczająco kontrastowy na tle, aby spełniać standardy ułatwień dostępu, a także wyraźnie widoczny i odróżnialny od innych kolorów stanu, takich jak ostrzeżenia czy komunikaty o udanym wykonaniu.
Błąd
Błąd
W przypadku błędu
Czerwony kolor semantyczny z lekko zabarwionym tłem, który wskazuje na usuwanie, zamykanie lub odrzucanie działań, takich jak przesuwanie w dół, aby wyświetlić. Dodano jako alternatywa dla kontenera, która jest nieco mniej alarmująca i pilna niż kolor błędu.
Błąd-wymiar
Error-Dim
On-Error
Semantyczny, ale nieco przyciemniony czerwony, który wskazuje na błędy o wysokim priorytecie lub działania awaryjne, takie jak alerty bezpieczeństwa, nieudane nakładki dialogowe lub przyciski zatrzymania.
Error-Container
Error-Container
Kontenery On-Error
mniej widoczny kolor kontenera w przypadku komponentów używających stanu błędu; Może też wskazywać aktywny stan błędu, który jest mniej interaktywny niż stan wypełniony, na przykład aktywny przycisk lub karta udostępniania w stanie alarmowym lub w dialogu nakładki w przypadku błędu.
Kontenery i wysokość na powierzchni
Pojemniki powierzchni odgrywają kluczową rolę w określaniu głębi i wypukłości w interfejsie. Zapewniają strukturę i hierarchię za pomocą kolorów, pomagając w odróżnianiu elementów na podstawie ich znaczenia i interakcji.
Surface-Container-Low
Surface-Container-Low
Na powierzchni
Wariant na powierzchni
Idealne rozwiązanie dla rozszerzonego kontenera, który musi znajdować się pod kontenerem powierzchniowym, np. jako rozszerzona karta w powiadomieniu. Można ich też używać w przypadku kart nieinterakcyjnych, w których przypadku treści nadal korzystają z ograniczenia.
Powierzchnia – kontener
Powierzchnia-kontener
Na powierzchni
Wariant na powierzchni
Domyślny kolor kontenera dla większości elementów. Zapewnia neutralne, umiarkowane wzniesienie, dzięki czemu nadaje się do ogólnych komponentów interfejsu.
Surface-Container-High
Surface-Container-High
Na powierzchni
Wariant na powierzchni
Idealne rozwiązanie dla elementów o wysokiej mocy sygnału, które muszą znajdować się na górze lub w połączeniu z kontenerem powierzchni. Ten kolor pomaga skupić uwagę na najważniejszych obszarach interfejsu.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[null,null,["Ostatnia aktualizacja: 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"]]
