Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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.
Setiap Tampilan jam menentukan dua warna awal, yang digunakan untuk palet primer dan tertier.Seed ini dimasukkan ke dalam algoritma yang menjadi lima rentang
tonal, nada tertentu (berdasarkan luminans) dimasukkan ke dalam peran
standar yang terdiri dari skema. Warna dipetakan ke skema melalui token desain.Setiap token desain kemudian diterapkan ke SysUI, kartu, dan aplikasi
yang telah memilih untuk menggunakan warna dinamis.
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
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 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"]]
