Framework warna Ekspresif Material 3 menggunakan tema warna dinamis, berdasarkan dua warna seed yang dipetakan pada sistem warna HCT (Hue, Chroma, dan Tone).
Istilah penting
- Peran warna
- Seperti "angka" pada kanvas gambar menurut angka, peran warna ditetapkan ke elemen UI tertentu. Peristiwa ini memiliki nama seperti primary, on primary, dan primary container. Peran warna yang sama digunakan untuk tema terang dan gelap. Lihat semua peran warna
- HCT
- HCT adalah singkatan dari hue, chroma, dan tone.
Menentukan warna dengan hue, chroma, dan tone (HCT)
Generator warna HCT membuat kumpulan palet warna dari satu warna awal untuk membuat model warna tiga dimensi yang menentukan warna berdasarkan hue (warna), kroma (saturasi), dan tone (kecerahan)
Ada tiga warna aksen utama: primer, sekunder, dan tersier. Nuansa netral, seperti berbagai nuansa abu-abu dengan sedikit warna primer, ideal untuk digunakan sebagai warna penampung untuk konten kaya karena sifat monokromatiknya.
Corak warna
Hue adalah persepsi warna, seperti merah, oranye, kuning, hijau, biru, dan violet. Hue diukur dengan angka yang berkisar antara 0-360 dan merupakan spektrum melingkar (nilai 0 dan 360 memiliki hue yang sama).
Chroma
Kroma adalah seberapa berwarna atau netral (abu-abu, hitam, atau putih) warna tersebut. Kroma diukur dengan angka yang berkisar dari 0 (sepenuhnya abu-abu, hitam, atau putih) hingga tak terbatas (paling cerah), meskipun nilai kroma di HCT mencapai maksimum sekitar 120.
Karena batasan rendering layar dan biologis, warna dan nada yang berbeda akan memiliki nilai kromatik maksimum yang berbeda.
Nuansa
Nada adalah seberapa terang atau gelap warna tersebut. Nada terkadang juga disebut sebagai luminance. Nada diukur dengan angka yang berkisar dari 0 (hitam murni, tidak ada luminans) hingga 100 (putih murni, luminans lengkap).
Nuansa sangat penting untuk aksesibilitas visual karena menentukan kontras. Warna dengan perbedaan rona yang lebih besar akan menghasilkan kontras yang lebih tinggi, sedangkan warna dengan perbedaan yang lebih kecil akan menghasilkan kontras yang lebih rendah.
Warna dinamis (tema warna)
Wear OS menerapkan sistem tema yang mematuhi Panduan Aksesibilitas Konten Web (WCAG)-AAA, yang berasal dari dua warna awal yang ditetapkan. Secara khusus, warna benih ini berfungsi sebagai dasar untuk palet primer dan tersier. Dengan menggunakan dua warna awal ini, sistem akan menghasilkan palet warna komprehensif yang mencakup palet primer, sekunder, tersier, dan permukaan. Selanjutnya, tema yang dihasilkan ini diterapkan di seluruh komponen Wear OS, elemen UI Sistem, kartu, dan aplikasi.
Bergantung pada preferensi Anda, Anda dapat menggunakan warna seed tertentu atau warna merek untuk mendapatkan warna dinamis.
Dari warna seed
Warna dinamis akan otomatis membuat skema warna yang mudah diakses berdasarkan warna seed tertentu.
Karena UI dapat berakhir dengan sejumlah warna sumber yang berbeda, sebaiknya desain awal menggunakan skema warna dasar sehingga Anda dapat memastikan peran warna yang tepat dipetakan ke komponen yang tepat dalam produk Anda. Gunakan Material Theme Builder untuk melihat tampilan tiruan UI Anda di berbagai warna sumber dan sesuaikan setelan sesuai kebutuhan.
Palet warna (dari warna awal tampilan jam)
Tema warna yang diterapkan ke Kartu
Tema warna yang diterapkan ke layar aplikasi
Dari warna brand
Serupa dengan cara Material 3 Expressive memperlakukan peran warna, Wear OS menerapkan warna ke pengalaman individual dengan ekspresi warna yang dinamis dan mudah diakses. Wear OS hanya menggunakan tema gelap karena antarmuka perangkat wearable dibuat dengan latar belakang hitam. Sebagai platform yang berjalan di perangkat sentuh, Wear OS juga memiliki palet warna yang lebih terbatas karena tidak memerlukan banyak status pengarahan kursor dan fokus. Gunakan alat pembuatan tema warna khusus Wear OS untuk membuat tema kustom seputar merek Anda dan membuat palet referensi lengkap serta peran warna yang ditetapkan yang mendukung token Desain Material dan dibuat agar berfungsi secara lancar dengan komponen UI sistem.
Palet warna (dari warna awal karya seni)
Tema warna yang diterapkan ke Kartu
Tema warna yang diterapkan ke layar aplikasi