Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Hệ thống màu Wear Material 3 Expressive sử dụng 3 lớp điểm nhấn (chính, phụ, thứ ba) cho các thành phần chính và 2 lớp nền trung tính. Mỗi vai trò cung cấp một loạt các giá trị có độ tương phản nhất quán, cho phép kết hợp màu sắc biểu cảm nhưng dễ tiếp cận để mang lại trải nghiệm hợp nhất trên mọi giao diện.
Ví dụ về giao diện màu có vai trò.
Vai trò của màu sắc là gì?
Vai trò của màu sắc giống như "số" trong một bức tranh sơn theo số. Đây là mô liên kết giữa các thành phần của giao diện người dùng và màu sắc của các thành phần đó.
Vai trò của màu được liên kết với các thành phần Material: Bạn sẽ sử dụng các vai trò màu này cho dù đang sử dụng bảng phối màu cơ sở tĩnh hay màu động. Nếu sản phẩm của bạn chứa các thành phần tuỳ chỉnh, thì bạn cần ánh xạ đúng cách các thành phần đó đến nhóm vai trò màu này.
Vai trò của màu sắc hỗ trợ khả năng hỗ trợ tiếp cận: Hệ thống màu được xây dựng dựa trên các cặp màu dễ tiếp cận hơn. Các cặp màu này có độ tương phản màu tối thiểu là 3:1.
Vai trò của màu được mã hoá: Vai trò được triển khai trong thiết kế và mã thông qua mã thông báo. Mã hiệu thiết kế (design token) là một quyết định nhỏ về mặt thiết kế, có thể sử dụng lại và tạo nên phong cách hình ảnh của hệ thống thiết kế.
Các thuật ngữ thiết yếu
Dưới đây là các thuật ngữ chính mà bạn sẽ thấy trong tên của vai trò màu:
Surface (Mặt): Vai trò dùng cho nền và các khu vực lớn, ít được nhấn mạnh trên màn hình.
Chính, phụ, trung gian: Vai trò của màu nhấn dùng để làm nổi bật hoặc giảm bớt sự chú ý đến các thành phần trên nền trước.
Vùng chứa: Vai trò dùng làm màu tô cho các phần tử trên nền trước như nút. Bạn không nên sử dụng các màu này cho văn bản hoặc biểu tượng.
Bật: Các vai trò bắt đầu bằng thuật ngữ này cho biết màu sắc của văn bản hoặc biểu tượng trên màu mẹ được ghép nối. Ví dụ: on-primary được dùng cho văn bản và biểu tượng so với màu nền chính.
Biến thể: Các vai trò kết thúc bằng thuật ngữ này cung cấp một lựa chọn thay thế ít nhấn mạnh hơn cho cặp không phải biến thể. Ví dụ: biến thể đường viền là phiên bản màu đường viền ít được nhấn mạnh hơn.
Vai trò chính
Vai trò chính được dùng cho các thành phần chính trên giao diện người dùng, chẳng hạn như các nút Chụm cạnh, nút nổi bật, trạng thái đang hoạt động và biểu tượng trên kiểu nút theo tông màu.
Chính
Chính
Trên màu chính
Sử dụng vai trò Chính cho các thao tác quan trọng nhất trong giao diện người dùng, chẳng hạn như các nút chính hoặc lời kêu gọi hành động. Màu sắc này phải nổi bật và dễ nhận biết ngay lập tức để hướng người dùng đến các hoạt động tương tác chính.
Primary-Dim
Primary-Dim
Trên màu chính
Vai trò làm mờ thường được dùng cho các phần tử cần phân biệt rõ ràng về mặt hình ảnh với hành động chính nhưng không yêu cầu người dùng chú ý hoặc tương tác ngay lập tức.
Primary-Container
Vùng chứa chính
On-Primary-Container
Áp dụng Vùng chứa chính cho các phần tử nền như thẻ hoặc cửa sổ bật lên để làm nổi bật các phần hoặc trạng thái đã chọn. Nó giúp thu hút sự chú ý đến nội dung quan trọng hoặc các hoạt động đang diễn ra trong giao diện người dùng.
Vai trò phụ
Vai trò phụ được dùng cho các thành phần chính trên giao diện người dùng. Các thành phần này không quan trọng bằng vai trò chính nhưng vẫn cần phải nổi bật. Bạn có thể sử dụng cùng lúc màu chính và màu phụ trong bố cục để tạo sự khác biệt và tiêu điểm.
Phụ
Cấp hai
Trên màu cấp hai
Sử dụng vai trò Phụ để hỗ trợ các thao tác trong các khu vực có giao diện người dùng dày đặc, chẳng hạn như các nút phụ hoặc thao tác bổ sung. Lớp này duy trì khả năng hiển thị mà không làm lu mờ các phần tử chính trong bố cục phức tạp.
Secondary-Dim
Secondary-Dim
Cấp hai
Vai trò Secondary-Dim (Phụ – Giảm độ sáng) cung cấp độ tương phản dịu cho các phần tử thụ động ở các khu vực đông đúc. Màu này bổ sung cho màu phụ trong khi vẫn tạo chiều sâu tinh tế, giúp giao diện người dùng luôn gọn gàng và giúp người dùng điều hướng.
Secondary-Container
Vùng chứa phụ
On-Secondary-Container
Áp dụng Vùng chứa phụ để sắp xếp các phần tử phụ trong bố cục dày đặc. Lớp này tạo cấu trúc và phân tách, đảm bảo nội dung phụ có thể phân biệt được nhưng không chiếm ưu thế.
Vai trò phụ
Vai trò thứ ba được dùng cho các điểm nhấn tương phản để cân bằng màu chính và màu phụ hoặc gây sự chú ý đến một thành phần cụ thể, chẳng hạn như trường nhập.
Vai trò phụ cũng có thể giúp cho biết thời điểm nội dung thay đổi hoặc cần nổi bật, chẳng hạn như khi đạt được một mục tiêu.
Bậc 3
Tertiary
Trên cấp ba
Vai trò phụ được dùng để thu hút sự chú ý đến các thành phần chính. Vai trò phụ đặc biệt hiệu quả đối với các thành phần cần nổi bật, chẳng hạn như huy hiệu, hình dán hoặc phần tử hành động đặc biệt.
Tertiary-Dim
Tertiary-Dim
Tertiary
Sử dụng vai trò Tertiary Dim (Làm mờ cấp ba) cho các nút hoặc hành động liên quan đến hành động cấp ba nhưng không yêu cầu tiêu điểm ngay lập tức.
Vùng chứa cấp ba
Vùng chứa cấp ba
Trên vùng chứa cấp ba
Áp dụng Vùng chứa phụ cho nền nhóm nội dung liên quan đến phụ, chẳng hạn như bộ sưu tập huy hiệu hoặc hình dán. Kiểu này làm nổi bật các thành phần phụ trong khi vẫn duy trì sự cân bằng và cấu trúc trong giao diện người dùng.
Vai trò ngữ nghĩa
Error-Red (Lỗi-Đỏ) được dùng để chỉ các vấn đề nghiêm trọng như lỗi, xoá và mọi vấn đề liên quan đến trường hợp khẩn cấp. Tính năng này được thiết kế để thu hút sự chú ý ngay lập tức đến các vấn đề hoặc cảnh báo, đảm bảo người dùng có thể nhanh chóng xác định những khía cạnh cần khắc phục.
Tông màu Đỏ lỗi phải duy trì độ tương phản đủ để đáp ứng các tiêu chuẩn hỗ trợ tiếp cận, đảm bảo màu này hiển thị rõ ràng và dễ phân biệt với các màu trạng thái khác như cảnh báo hoặc thông báo thành công.
Lỗi
Lỗi
Khi xảy ra lỗi
Màu đỏ ngữ nghĩa nhưng hơi có màu sắc chủ đề, cho biết các thao tác xoá, đóng hoặc loại bỏ, chẳng hạn như Vuốt để hiển thị. Thêm làm một giải pháp thay thế vùng chứa ít đáng báo động và khẩn cấp hơn so với màu lỗi mờ.
Error-Dim
Error-Dim
Khi xảy ra lỗi
Màu đỏ ngữ nghĩa nhưng hơi có màu sắc chủ đề, cho biết lỗi có mức độ ưu tiên cao hoặc các hành động khẩn cấp, chẳng hạn như cảnh báo an toàn, lớp phủ hộp thoại không thành công hoặc nút dừng.
Error-Container
Vùng chứa lỗi
Vùng chứa On-Error
Màu vùng chứa ít nổi bật hơn, dành cho các thành phần sử dụng trạng thái lỗi. Cũng có thể cho biết trạng thái lỗi đang hoạt động có tính tương tác thấp hơn trạng thái đã điền, chẳng hạn như nút hoặc thẻ chia sẻ khẩn cấp đang hoạt động hoặc trên hộp thoại lớp phủ không thành công.
Vùng chứa bề mặt và độ nâng
Vùng chứa bề mặt đóng vai trò quan trọng trong việc xác định chiều sâu và độ cao trong giao diện người dùng, cung cấp cấu trúc và hệ phân cấp thông qua màu sắc, giúp phân biệt các thành phần dựa trên tầm quan trọng và khả năng tương tác của chúng.
Surface-Container-Low
Surface-Container-Low
Trên bề mặt
On-Surface-Variant
Rất phù hợp với vùng chứa mở rộng cần nằm bên dưới Vùng chứa bề mặt, chẳng hạn như thẻ mở rộng trong Thông báo. Cũng có thể dùng cho các thẻ không tương tác, trong đó nội dung vẫn được hưởng lợi từ tính năng chứa.
Surface-Container
Vùng chứa trên bề mặt
Trên bề mặt
On-Surface-Variant
Màu vùng chứa mặc định cho hầu hết các phần tử. Kiểu này cung cấp độ cao trung tính, vừa phải, phù hợp với các thành phần giao diện người dùng chung.
Surface-Container-High
Surface-Container-High
Trên bề mặt
On-Surface-Variant
Lý tưởng cho các thành phần có mức độ nhấn mạnh cao cần nằm ở trên cùng hoặc kết hợp với Vùng chứa bề mặt. Màu này giúp tập trung và phân cấp các khu vực quan trọng trong giao diện người dùng.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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"]]
