Referensi Warna Material Design
Referensi yang dapat dicari dari semua token warna Material Design 3 (Material You) - 37 peran warna dengan nilai tema terang dan gelap, 6 palet tonal dengan 13 langkah tone masing-masing, dan nama variabel CSS untuk setiap token. Klik sampel atau nilai HEX mana pun untuk menyalinnya. Tanpa pendaftaran.
Searchable reference of all Material Design 3 (Material You) color tokens - dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime - these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
Mengapa menggunakan Referensi Warna Material Design kami?
- Referensi token Material Design 3 lengkap: semua peran warna Material Design 3 - primary, secondary, tertiary, error, surface, background, outline, shadow, dan scrim - dengan nilai tema terang dan gelap. Termasuk semua 6 palet tonal dengan 13 langkah tone masing-masing.
- Pencarian instan & filter peran: cari berdasarkan nama token, nama variabel CSS, nilai HEX, atau deskripsi. Filter berdasarkan peran warna untuk fokus pada token yang Anda butuhkan. Hasil diperbarui seketika pada setiap penekanan tombol.
- Nilai tema terang & gelap: beralih antara nilai tema terang dan gelap dengan satu klik. Setiap peran warna menampilkan nilai token yang benar untuk kedua tema - penting untuk membangun antarmuka Material You yang adaptif.
- 100 % gratis - tanpa pendaftaran: sepenuhnya gratis, tanpa akun, tanpa tingkat premium, tanpa batas penggunaan, dan tanpa iklan yang menghalangi antarmuka. Rujuk warna Material Design 3 sebanyak yang Anda butuhkan.
Kasus penggunaan umum Referensi Warna Material Design
- Pengembangan aplikasi Android: pengembang Android menggunakan referensi warna Material Design untuk menerapkan peran warna yang benar di Jetpack Compose dan tata letak XML. Referensi ini menampilkan nilai tema terang dan gelap untuk setiap token, menghilangkan kebutuhan mencarinya di dokumentasi resmi.
- Pengembangan Flutter & lintas platform: pengembang Flutter menggunakan referensi warna Material Design untuk mengonfigurasi ColorScheme di ThemeData mereka. Nilai palet tonal langsung memetakan ke sistem warna Material 3 Flutter, memudahkan penerapan warna merek kustom.
- Implementasi web Material Design: pengembang web yang menerapkan Material Design 3 dengan Material Web Components menggunakan nama variabel CSS dari referensi ini untuk mengganti token tema bawaan dan menerapkan warna merek kustom.
- Penyiapan sistem desain di Figma: desainer yang menyiapkan Material Design 3 di Figma menggunakan referensi warna untuk mengisi gaya dan variabel warna mereka. Nilai palet tonal menyediakan kumpulan sampel lengkap yang dibutuhkan untuk sistem desain Material You.
- Warna dinamis Material You: pengembang yang menerapkan warna dinamis Material You menggunakan nilai token dasar sebagai cadangan ketika palet yang dihasilkan dari wallpaper pengguna tidak tersedia. Referensi ini menyediakan semua nilai dasar untuk tema terang dan gelap.
- Verifikasi aksesibilitas & kontras: insinyur aksesibilitas menggunakan referensi warna Material Design untuk memverifikasi bahwa pasangan peran warna (misalnya Primary + On Primary) memenuhi persyaratan kontras WCAG. Peran on-color dirancang khusus untuk memastikan kontras yang terbaca.
Apa itu Material Design 3 (Material You)?
Material Design 3 (juga disebut Material You) adalah sistem desain terbaru Google, diperkenalkan pada 2021 bersama Android 12. Sistem warnanya dibangun di atas warna dinamis - kemampuan menghasilkan palet warna lengkap dari wallpaper pengguna saat runtime. Sistem ini mendefinisikan serangkaian peran warna (token semantik seperti «Primary», «On Primary», «Surface») yang memetakan ke tone tertentu dari palet tonal. Pemisahan peran dari nilai ini memungkinkan seluruh UI beradaptasi dengan merek atau warna apa pun yang dihasilkan pengguna sambil mempertahankan kontras dan aksesibilitas yang konsisten. Referensi warna Material Design kami menyediakan semua nilai token dasar untuk tema terang dan gelap.
Bagaimana sistem warna Material Design 3 bekerja
- Palet tonal: Material Design 3 menghasilkan enam palet tonal dari warna benih - Primary, Secondary, Tertiary, Error, Neutral, dan Neutral Variant. Setiap palet berisi 13 tone dari 0 (hitam) hingga 100 (putih), menyediakan rentang nilai kecerahan yang lengkap.
- Peran warna: peran warna adalah token semantik yang memetakan ke tone tertentu dari palet tonal. Misalnya, «Primary» memetakan ke tone 40 di tema terang dan tone 80 di tema gelap. «On Primary» memetakan ke tone 100 di terang dan tone 20 di gelap.
- Warna dinamis: di Android 12+, Material You menghasilkan palet tonal kustom dari wallpaper pengguna. Peran warna kemudian memetakan ke posisi tone yang sama di palet kustom, menghasilkan UI yang sepenuhnya dipersonalisasi. Nilai dasar di halaman ini adalah cadangan ketika warna dinamis tidak tersedia.
Kelompok peran warna utama
- Primary / On Primary / Primary Container: warna merek utama dan variannya. Primary digunakan untuk aksi utama dan elemen bertekanan tinggi. Primary Container digunakan untuk tombol tonal terisi dan status terpilih.
- Secondary & Tertiary: warna pendukung untuk komponen yang kurang menonjol dan aksen yang kontras. Secondary digunakan untuk chip dan aksi alternatif; Tertiary memberikan aksen ketiga untuk keseimbangan visual.
- Surface & Background: warna netral yang digunakan untuk latar kartu, sheet, dialog, dan latar aplikasi. Material Design 3 memperkenalkan beberapa tingkat kontainer surface (lowest, low, default, high, highest) untuk pewarnaan berbasis elevasi.
- Outline & Outline Variant: warna batas untuk kolom teks, pembatas, dan cincin fokus. Outline digunakan untuk batas yang menonjol; Outline Variant untuk pembatas dekoratif yang halus.
Penggunaan variabel CSS
Material Web Components (implementasi web resmi Material Design 3) menggunakan properti kustom CSS dengan awalan --md-sys-color- untuk semua token warna. Anda dapat mengganti token mana pun dengan menetapkan variabel CSS di stylesheet Anda: :root { --md-sys-color-primary: #warna-anda; }. Referensi ini menyediakan nama variabel CSS yang tepat untuk setiap token, sehingga mudah untuk disalin dan ditempelkan ke implementasi Anda.
Pertanyaan yang Sering Diajukan
Material Design 3 adalah sistem desain terbaru Google dengan warna dinamis yang menghasilkan palet dari wallpaper pengguna. Referensi ini menyediakan semua nilai token dasar untuk tema terang dan gelap.
Palet tonal adalah 13 tone warna (0-100) dari warna benih. Peran warna adalah token semantik yang memetakan ke tone tertentu - misalnya «Primary» memetakan ke tone 40 di terang dan tone 80 di gelap.
Material Web Components menggunakan awalan --md-sys-color-. Misalnya, Primary adalah --md-sys-color-primary. Referensi ini menunjukkan nama variabel CSS yang tepat untuk setiap token.
Gunakan ColorScheme.fromSeed() atau tentukan setiap peran secara manual di ColorScheme(). Konversikan HEX ke Color Flutter menggunakan Color(0xFF + hex tanpa #).
Gunakan dynamicColorScheme() untuk Material You atau buat ColorScheme kustom dengan nilai token. Konversikan HEX ke Color Compose menggunakan Color(0xFF6750A4).
Setiap peran menggunakan nilai tone berbeda per tema - Primary adalah tone 40 di terang dan tone 80 di gelap. Beralih antar tema di referensi ini untuk melihat nilai yang benar.
Warna dinamis menghasilkan palet kustom dari wallpaper pengguna di Android 12+. Nilai dasar di sini adalah cadangan ketika warna dinamis tidak tersedia.
Ya. Ini adalah nilai palet dasar resmi Material Design 3 dari m3.material.io, menggunakan warna benih ungu bawaan (#6750A4).
Ya. 100 % gratis tanpa pendaftaran, tanpa tingkat premium, tanpa kuota penggunaan, dan tanpa iklan yang menghalangi antarmuka.