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.
Khung màu Expressive (Biểu cảm) của Material 3 sử dụng giao diện màu động, dựa trên hai màu hạt nhân được ánh xạ trên hệ thống màu HCT (Hue, Chroma và Tone – Sắc độ, Độ đậm nhạt và Tông màu).
Các thuật ngữ thiết yếu
Vai trò của màu
Giống như "số" trên canvas vẽ theo số, vai trò màu được chỉ định cho các phần tử giao diện người dùng cụ thể. Các vùng chứa này có tên như vùng chứa chính, trên vùng chứa chính và vùng chứa chính. Cùng một vai trò màu sắc được sử dụng cho cả giao diện sáng và tối. Xem tất cả vai trò màu
HCT
HCT là viết tắt của hue (tông màu), chroma (độ sắc) và tone (tông).
Xác định màu bằng sắc độ, độ sắc và tông màu (HCT)
Trình tạo màu HCT tạo một bộ bảng màu từ một màu hạt giống để tạo mô hình màu ba chiều xác định màu dựa trên sắc độ (màu), sắc độ (độ bão hoà) và sắc độ (độ sáng)
Có 3 màu nhấn chính: màu chính, màu phụ và màu thứ ba. Các sắc thái trung tính, chẳng hạn như nhiều tông màu xám với một chút màu chính, là màu lý tưởng để sử dụng làm màu vùng chứa cho nội dung đa dạng thức do bản chất đơn sắc của chúng.
Sắc độ
Sắc độ là cảm nhận về một màu, chẳng hạn như đỏ, cam, vàng, xanh lục, xanh dương và màu tím. Độ sắc được định lượng bằng một số từ 0 đến 360 và là một quang phổ hình tròn (giá trị 0 và 360 có cùng độ sắc).
Sắc độ
Độ sắc độ là mức độ rực rỡ hoặc trung tính (xám, đen hoặc trắng) của một màu. Độ sắc độ được định lượng bằng một con số từ 0 (hoàn toàn xám, đen hoặc trắng) đến vô cực (sắc nét nhất), mặc dù các giá trị sắc độ trong HCT cao nhất là khoảng 120.
Do các giới hạn về sinh học và khả năng kết xuất màn hình, các sắc thái và tông màu khác nhau sẽ có các giá trị sắc độ tối đa khác nhau.
Giọng điệu
Tông màu là độ sáng hoặc độ tối của màu sắc. Đôi khi, sắc độ còn được gọi là độ sáng. Độ đậm nhạt được định lượng bằng một con số từ 0 (đen thuần tuý, không có độ chói) đến 100 (trắng thuần tuý, độ chói hoàn toàn).
Tông màu rất quan trọng đối với khả năng hỗ trợ tiếp cận hình ảnh vì tông màu quyết định độ tương phản. Màu sắc có sự khác biệt lớn về tông màu sẽ tạo ra độ tương phản cao hơn, trong khi những màu có sự khác biệt nhỏ sẽ tạo ra độ tương phản thấp hơn.
Màu động (giao diện màu)
Wear OS triển khai một hệ thống giao diện tuân thủ Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG)-AAA, bắt nguồn từ hai màu hạt được chỉ định. Cụ thể, các màu hạt giống này đóng vai trò là cơ sở cho bảng màu chính và bảng màu thứ ba. Bằng cách sử dụng hai màu ban đầu này, hệ thống sẽ tạo một bảng màu toàn diện bao gồm bảng màu chính, phụ, thứ ba và bảng màu bề mặt. Sau đó, giao diện được tạo này sẽ được áp dụng trên các thành phần Wear OS, thành phần Giao diện người dùng hệ thống, thẻ thông tin và ứng dụng.
Mỗi mặt đồng hồ xác định hai màu hạt giống, được dùng cho bảng màu chính và bảng màu phụ.Những hạt giống này được đưa vào một thuật toán để trở thành 5 dải màu, các tông màu cụ thể (dựa trên độ sáng) được đưa vào các vai trò được xác định trước bao gồm một giao thức. Màu sắc được liên kết với một bảng phối màu thông qua mã thông báo thiết kế.Sau đó, mỗi mã thông báo thiết kế sẽ được áp dụng cho SysUI, thẻ thông tin và ứng dụng đã chọn sử dụng màu động.
Tuỳ thuộc vào lựa chọn ưu tiên, bạn có thể sử dụng một màu hạt giống cụ thể hoặc màu thương hiệu để lấy màu động.
Từ màu hạt giống
Màu động sẽ tự động tạo một bảng phối màu hỗ trợ tiếp cận dựa trên một màu hạt giống cụ thể.
Vì giao diện người dùng có thể kết thúc bằng bất kỳ số lượng màu nguồn nào, nên tốt nhất bạn nên thiết kế ban đầu bằng bảng phối màu cơ sở để đảm bảo các vai trò màu sắc phù hợp được liên kết với các thành phần phù hợp trong sản phẩm. Sử dụng Material Theme Builder (Trình tạo giao diện Material) để xem giao diện người dùng mô phỏng của bạn trông như thế nào trên một loạt màu nguồn và điều chỉnh chế độ cài đặt nếu cần.
Bảng màu (từ màu ban đầu của mặt đồng hồ)
Giao diện màu được áp dụng cho Thẻ thông tin
Giao diện màu được áp dụng cho màn hình ứng dụng
Từ màu sắc của thương hiệu
Tương tự như cách Material 3 Expressive xử lý các vai trò của màu sắc, Wear OS áp dụng màu sắc cho các trải nghiệm cá nhân bằng cách thể hiện màu sắc linh động và dễ tiếp cận. Wear OS chỉ sử dụng giao diện tối vì giao diện thiết bị đeo được tạo trên nền đen. Là một nền tảng chạy trên thiết bị cảm ứng, Wear OS cũng có bảng màu hạn chế hơn vì không yêu cầu nhiều trạng thái di chuột và tiêu điểm. Sử dụng các công cụ tạo giao diện màu dành riêng cho Wear OS để tạo giao diện tuỳ chỉnh cho thương hiệu của bạn, đồng thời tạo bảng tham chiếu đầy đủ và vai trò màu được chỉ định hỗ trợ mã thông báo Material Design, đồng thời được tạo để hoạt động liền mạch với các thành phần giao diện người dùng hệ thống.
Bảng màu (từ màu hạt giống của hình minh hoạ)
Giao diện màu được áp dụng cho Thẻ thông tin
Giao diện màu được áp dụng cho màn hình ứng 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 system\n\nThe Material 3 Expressive color framework uses dynamic color theming, based on\ntwo seed colors mapped on the HCT (Hue, Chroma and Tone) color system.\n\nEssential terms\n---------------\n\nColor role\n: Like the \"numbers\" on a paint-by-number canvas, color roles are assigned to\n specific UI elements. They have names like primary, on primary, and primary\n container. The same color role is used for both light and dark themes. See all\n color roles\n\nHCT\n: HCT stands for hue, chroma, and tone.\n\nDefine colors with hue, chroma, and tone (HCT)\n----------------------------------------------\n\nHCT color generator creating a set of color palettes from one seed color to\ncreates a three-dimensional color model that defines colors based on their hue\n(color), chroma (saturation), and tone (lightness)\n\nThere are three main accents colors: primary, secondary and tertiary. Neutral\nshades, such as various tones of gray with a hint of primary color, are ideal\nfor use as container colors for rich content due to their monochromatic nature.\n\n### Hue\n\n\nHue is the perception of a color, such as red, orange, yellow, green, blue, and\nviolet. Hue is quantified by a number ranging from 0-360 and is a circular\nspectrum (values 0 and 360 are the same hue). \n\n\u003cbr /\u003e\n\n### Chroma\n\n\nChroma is how colorful or neutral (gray, black or white) a color appears. Chroma\nis quantified by a number ranging from 0 (completely gray, black or white) to\ninfinity (most vibrant), though chroma values in HCT top out at roughly 120.\n\nBecause of biological and screen rendering limitations, different hues and\ndifferent tones will have different maximal chroma values. \n\n\u003cbr /\u003e\n\n### Tone\n\n\nTone is how light or dark a color appears. Tone is sometimes also referred to as\n*luminance*. Tone is quantified by a number ranging from 0 (pure black, no\nluminance) to 100 (pure white, complete luminance).\n\nTone is crucial for visual accessibility because it determines contrast. Colors\nwith a greater difference in tone create higher contrast, while those with a\nsmaller difference create lower contrast. \n\n\u003cbr /\u003e\n\nDynamic color (color theming)\n-----------------------------\n\nWear OS implements a theming system compliant with [Web Content Accessibility\nGuidelines (WCAG)-AAA](https://www.w3.org/TR/WCAG22/#contrast-enhanced), derived from two designated *seed\ncolors*. Specifically, these seed colors serve as the basis for primary and\ntertiary palettes. Using these two initial colors, the system generates a\ncomprehensive color palette encompassing primary, secondary, tertiary, and\nsurface palettes. Subsequently, this generated theme is applied across Wear OS\ncomponents, System UI elements, tiles, and apps.\nEach Watch face defines two seed colors, used for primary and tertiary palettes.\n\n\u003cbr /\u003e\n\nThese seeds are put through an algorithm that becomes five tonal ranges, specific tones (based on luminance) are slotted into the predefined roles that consist of a scheme. Colors are mapped to a scheme through design tokens.\n\n\u003cbr /\u003e\n\nEach design token is then applied to the SysUI, tiles and apps that have opted in to using dynamic color.\n\n\u003cbr /\u003e\n\nDepending on your preference, you can use either a specific seed color or a\nbrand color to derive your dynamic color.\n\n### From seed color\n\nDynamic color will automatically create an accessible color scheme based on a\nspecific seed color.\n\nBecause the UI could end up with any number of different source colors, it's\nbest to initially design using the baseline color scheme so you can ensure the\nright color roles are mapped to the right components in your product. Use the\nMaterial Theme Builder to see how your UI mocks look across a range of source\ncolors and adjust settings as needed.\n\n\nColor palette (from Watch face seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### From brand color\n\nSimilar to the way Material 3 Expressive treats color roles, Wear OS applies\ncolor to individualized experiences with dynamic and accessible color\nexpression. Wear OS uses only the dark theme because the wearable interface is\nbuilt on a black background. Being a platform that runs on touch devices, Wear\nOS also has a more limited color palette as it doesn't require as many hover and\nfocus states. Use the Wear OS-specific color theme building tools to build a\ncustom theme around your brand and generate the full reference palettes and\nassigned color roles that support Material Design tokens and are built to work\nseamlessly with system UI components.\n\n\nColor palette (from artwork seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e"]]
