Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Sistem warna Ekspresif Wear Material 3 menggunakan tiga lapisan aksen
(primer, sekunder, tersier) untuk komponen utama dan dua lapisan permukaan
netral. Setiap peran menawarkan berbagai nilai dengan kontras yang konsisten, sehingga memungkinkan
kombinasi warna yang ekspresif namun mudah diakses untuk pengalaman terpadu di seluruh
tema.
Contoh tema warna dengan peran.
Apa yang dimaksud dengan peran warna?
Peran warna seperti "angka" di kanvas gambar menurut nomor. Garis-garis ini adalah
jaringan penghubung antara elemen UI dan warna yang digunakan.
Peran warna dipetakan ke komponen Material: Anda akan menggunakan peran
warna ini baik saat menggunakan skema dasar bawaan statis maupun warna dinamis. Jika
produk Anda berisi komponen kustom, komponen tersebut harus dipetakan dengan benar
ke kumpulan peran warna ini.
Peran warna mendukung aksesibilitas: Sistem warna dibuat berdasarkan
pendampingan warna yang lebih mudah diakses. Pasangan warna ini memberikan kontras warna
minimum 3:1.
Peran warna ditokenisasi: Peran diimplementasikan dalam desain dan kode
melalui token. Token desain mewakili keputusan desain kecil yang dapat digunakan kembali
dan merupakan bagian dari gaya visual sistem desain.
Istilah penting
Berikut adalah istilah kunci yang akan Anda lihat dalam nama peran warna:
Permukaan: Peran yang digunakan untuk latar belakang dan area layar yang besar dan tidak terlalu penting.
Primer, Sekunder, Tersier: Peran warna aksen yang digunakan untuk menekankan atau
menguraikan elemen latar depan.
Penampung: Peran yang digunakan sebagai warna isi untuk elemen latar depan seperti
tombol. Warna ini tidak boleh digunakan untuk teks atau ikon.
Aktif: Peran yang dimulai dengan istilah ini menunjukkan warna untuk teks atau ikon di
atas warna induk yang disambungkan. Misalnya, on primary digunakan untuk teks dan
ikon dengan warna isi utama.
Varian: Peran yang diakhiri dengan istilah ini menawarkan alternatif dengan penekanan yang lebih rendah
dari pasangan non-variannya. Misalnya, varian garis batas adalah versi warna garis batas yang kurang ditekankan.
Peran utama
Peran utama digunakan untuk komponen utama di seluruh UI, seperti tombol Tepi
yang Mengikuti, tombol yang menarik, status aktif, dan ikon pada gaya tombol
tonal.
Utama
Primer
Di Primer
Gunakan peran Utama untuk tindakan terpenting di UI, seperti tombol
utama atau pesan ajakan (CTA). Warna ini harus terlihat jelas dan langsung
dapat dikenali untuk memandu pengguna ke interaksi utama.
Primary-Dim
Primary-Dim
Di Primer
Peran dimensi biasanya digunakan untuk elemen yang perlu dibedakan secara visual dari
tindakan utama, tetapi tidak memerlukan perhatian atau interaksi pengguna secara langsung.
Primary-Container
Primary-Container
On-Primary-Container
Terapkan Penampung Utama untuk elemen latar belakang seperti kartu atau modal untuk
menandai bagian atau status yang dipilih. Hal ini membantu menarik perhatian ke konten
penting atau aktivitas yang sedang berlangsung dalam UI.
Peran sekunder
Peran sekunder digunakan untuk komponen utama di seluruh UI, yang tidak
sesentral peran utama, tetapi tetap perlu terlihat. Primer dan
sekunder dapat digunakan bersama dalam tata letak untuk menciptakan diferensiasi dan fokus.
Sekunder
Sekunder
Di Sekunder
Gunakan peran Sekunder untuk mendukung tindakan di area dengan UI yang padat, seperti
tombol sekunder atau tindakan pelengkap. Hal ini mempertahankan visibilitas tanpa
menghalangi elemen utama dalam tata letak yang kompleks.
Secondary-Dim
Secondary-Dim
Sekunder
Peran Secondary-Dim menawarkan kontras yang redup untuk elemen pasif di area
yang padat. Warna ini melengkapi warna sekunder sekaligus menambahkan kedalaman yang halus, sehingga
UI tetap bersih dan membantu pengguna menavigasi.
Secondary-Container
Secondary-Container
On-Secondary-Container
Terapkan Secondary-Container untuk mengatur elemen sekunder dalam tata letak yang padat. Hal ini
membuat struktur dan pemisahan, memastikan konten sekunder dapat dibedakan
tetapi tidak dominan.
Peran tersier
Peran tersier digunakan untuk aksen kontras guna menyeimbangkan warna primer dan sekunder
atau memberikan perhatian tinggi pada elemen seperti kolom input.
Peran tersier juga dapat membantu menunjukkan kapan konten berubah atau harus terlihat menarik,
seperti saat sasaran tercapai.
Tersier
Tersier
Tersier
Peran Tersier digunakan untuk menarik perhatian ke elemen utama. Peran tersier
sangat efektif untuk komponen yang perlu tampil beda, seperti
badge, stiker, atau elemen tindakan khusus.
Tertiary-Dim
Tertiary-Dim
Tersier
Gunakan peran Dimensi Tersier untuk tombol atau tindakan yang terkait dengan tindakan tertier, tetapi tidak memerlukan fokus langsung.
Tertiary-Container
Tertiary-Container
Di-Penampung-Tersier
Terapkan Penampung Tersier untuk latar belakang yang mengelompokkan konten terkait tersier,
seperti koleksi badge atau stiker. Desain ini menekankan elemen tersier sekaligus
mempertahankan keseimbangan dan struktur di UI.
Peran semantik
Error-Merah digunakan untuk menunjukkan masalah serius seperti error, hapus, dan apa pun
yang terkait dengan keadaan darurat. Fitur ini dirancang untuk menarik perhatian langsung ke masalah atau
peringatan, sehingga memastikan pengguna dapat dengan cepat mengidentifikasi area yang memerlukan tindakan korektif.
Nuansa Error-Red harus mempertahankan kontras yang memadai dengan latar belakang untuk
memenuhi standar aksesibilitas, memastikan warna tersebut terlihat jelas dan
dapat dibedakan dari warna status lainnya seperti peringatan atau pesan sukses.
Error
Error
Saat Error
Merah semantik, tetapi sedikit diwarnai tema, yang menunjukkan tindakan hapus, hapus, tutup,
atau tutup, seperti Geser untuk Menampilkan. Ditambahkan sebagai alternatif penampung
yang sedikit kurang mengkhawatirkan dan mendesak daripada warna error-dim.
Error-Dim
Error-Dim
Saat Error
Merah semantik, tetapi sedikit diwarnai tema, yang menunjukkan error prioritas tinggi
atau tindakan darurat, seperti pemberitahuan keselamatan, overlay dialog yang gagal, atau tombol
berhenti.
Error-Container
Error-Container
On-Error-Container
Warna penampung yang kurang mencolok, untuk komponen yang menggunakan status error. Juga dapat
menunjukkan status error aktif yang terasa kurang interaktif daripada status terisi,
seperti tombol atau kartu berbagi darurat aktif, atau pada dialog overlay
yang gagal.
Penampung dan elevasi permukaan
Penampung platform adalah kunci dalam menentukan kedalaman dan elevasi dalam UI,
memberikan struktur dan hierarki melalui warna, membantu membedakan
komponen berdasarkan kepentingan dan interaksinya.
Surface-Container-Low
Permukaan-Penampung-Rendah
Di Platform
On-Surface-Variant
Sangat cocok untuk penampung yang diperluas yang perlu berada di bawah Penampung Permukaan, seperti
kartu yang diperluas di Notifikasi. Dapat juga digunakan untuk kartu
non-interaktif, dengan konten yang masih mendapatkan manfaat dari pembatasan.
Surface-Container
Surface-Container
Di Platform
On-Surface-Variant
Warna penampung default untuk sebagian besar elemen. Komponen ini memberikan elevasi yang netral dan moderat, sehingga cocok untuk komponen UI umum.
Surface-Container-High
Permukaan-Penampung-Tinggi
Di Platform
On-Surface-Variant
Ideal untuk komponen dengan penekanan tinggi yang perlu berada di atas, atau dalam kombinasi
dengan Penampung Permukaan. Warna ini membantu memberikan fokus dan hierarki ke area kritis
di UI.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 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"]]
