Warna
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Buat skema warna pribadi yang lebih mudah diakses dan menyampaikan hierarki, status, dan merek produk Anda. Saat mendesain untuk perangkat wearable, warna memainkan peran penting
dalam meningkatkan keterbacaan, kegunaan, daya tarik visual, dan ekspresi,
terutama di layar yang lebih kecil.
Prinsip berikut menjelaskan cara menggunakan warna di seluruh tema.
Membuat dari hitam
Smartwatch didesain dengan latar belakang hitam, bukan latar belakang berwarna
yang digunakan perangkat ponsel. Meskipun tema gelap ditujukan untuk lingkungan dengan pencahayaan kurang
dan tema terang untuk siang hari, UI smartwatch harus berfungsi dengan lancar baik
siang maupun malam hari. Oleh karena itu, token warna untuk smartwatch harus disesuaikan secara khusus.
Peran warna baru
Sistem warna Material 3 mempertahankan struktur tiga warna aksen dan dua
warna permukaan netral, tetapi memperkenalkan warna penampung dalam peran aksen.
Peran baru ini memungkinkan potensi ekspresif yang lebih besar tanpa mengganggu hierarki
visual, yang pada dasarnya memberikan variasi warna permukaan dengan peningkatan kromatik.
Peran penampung sangat berguna untuk menandai status, seperti tombol
tombol, atau untuk memberikan gaya pelengkap saat aksen utama
sudah digunakan.
Makna semantik
Di UI smartwatch, warna harus menyampaikan makna dengan jelas dan intuitif. Misalnya, warna merah menunjukkan error dan hijau menunjukkan keberhasilan, sehingga membantu pengguna memahami tindakan atau status dengan cepat
tanpa memerlukan penjelasan tambahan. Penggunaan warna
semantik ini membantu pengguna menavigasi UI Anda dan mengambil tindakan dengan percaya diri.
Aksesibilitas warna (kepatuhan kontras)
Di UI smartwatch, warna harus menyampaikan makna dengan jelas dan intuitif. Misalnya, merah menunjukkan error dan hijau menandakan keberhasilan, sehingga membantu pengguna memahami tindakan atau status dengan cepat
tanpa memerlukan penjelasan tambahan. Penggunaan warna
semantik ini membantu pengguna menavigasi UI Anda dan mengambil tindakan dengan percaya diri.
Yang baru
Ada pembaruan yang signifikan pada sistem desain visual dan cara kami meningkatkan
ekspresi di seluruh update pada fondasi gaya, komponen, dan library desain
kartu kami.
Sistem warna Ekspresif Material 3 mencakup fitur berikut:
- Kumpulan bawaan hubungan warna yang mudah diakses
- Lebih dari 28 peran warna yang dipetakan ke komponen Material
- Warna tema gelap bawaan untuk mem-build dari hitam
- Nilai warna yang dinonaktifkan ditingkatkan
- Warna error tambahan
- Warna dasar statis dengan warna default yang ditetapkan ke setiap peran warna
- Fitur warna dinamis, termasuk Tampilan jam/Sistem, dan tema warna
berbasis gambar
Referensi
Untuk mempelajari lebih lanjut, lihat referensi berikut.
Pedoman warna Desain Material
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-26 UTC.
[null,null,["Terakhir diperbarui pada 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"]]
