Kolor
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Twórz bardziej dostępne schematy kolorów, które ułatwiają zrozumienie hierarchii, stanu i marki produktu. W przypadku projektowania aplikacji na urządzenia noszące kolor odgrywa kluczową rolę w polepszeniu czytelności, użyteczności, atrakcyjności wizualnej i wyrazu, zwłaszcza na mniejszych ekranach.
W następujących zasadach znajdziesz informacje o tym, jak używać kolorów w różnych motywach.
Budowanie z czarnego
Zamiast tła zastosowanego w telefonach zegarki mają czarne tło. Chociaż motywy ciemny są przeznaczone do ciemnych pomieszczeń, a jasne do jasnych, interfejsy zegarków muszą działać płynnie zarówno w dzień, jak i w nocy. Dlatego kolorowe tokeny dla zegarków muszą być odpowiednio dopasowane.
Nowe role kolorów
System kolorów Material 3 zachowuje strukturę 3 kolorów akcentów i 2 neutralnych kolorów powierzchni, ale wprowadza kolory kontenerów w rolach akcentów.
Te nowe role umożliwiają większą ekspresję bez zakłócania hierarchii wizualnej, zapewniając w podstawie odmiany kolorów powierzchni ze zwiększoną chromatycznością.
Role kontenera są szczególnie przydatne do wyróżniania stanów, takich jak przełączniki, lub do uzupełniania stylizacji, gdy akcent główny jest już używany.
znaczenie semantyczne,
W interfejsach zegarków kolory muszą jasno i intuicyjnie przekazywać znaczenie. Na przykład kolor czerwony oznacza błędy, a zielony – powodzenie. Dzięki temu użytkownicy mogą szybko zrozumieć działania lub stany bez konieczności podawania dodatkowych wyjaśnień. Takie semantyczne użycie kolorów pomaga użytkownikom poruszać się po interfejsie i bez obaw podejmować działania.
Dostępność kolorów (zgodność z wymaganiami dotyczącymi kontrastu)
W interfejsach zegarków kolory muszą jasno i intuicyjnie przekazywać znaczenie. Na przykład kolor czerwony oznacza błędy, a zielony – powodzenie. Dzięki temu użytkownicy mogą szybko zrozumieć działania lub stany bez konieczności podawania dodatkowych wyjaśnień. Takie semantyczne użycie kolorów pomaga użytkownikom poruszać się po interfejsie i bez obaw podejmować działania.
Nowości
Wprowadziliśmy istotne zmiany w systemie projektowania wizualnego oraz w sposobie, w jaki ulepszamy możliwości wyrażania siebie poprzez aktualizacje naszych bibliotek stylów, komponentów i kafelków.
System kolorów Material 3 Expressive obejmuje te funkcje:
- Wbudowany zestaw dostępnych relacji kolorów
- Ponad 28 ról kolorów zmapowanych na komponenty Material Design
- Wbudowane kolory ciemnego motywu do tworzenia na podstawie czerni
- Ulepszone wartości kolorów wyłączonych
- Dodatkowe kolory błędów
- Statyczny kolor bazowy z domyślnymi kolorami przypisanymi do poszczególnych ról kolorów
- dynamiczne funkcje kolorów, w tym system/tarcza zegarka i motywy kolorystyczne oparte na obrazach;
Materiały
Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami.
Wskazówki dotyczące kolorów w Material Design
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-26 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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"]]
