Palet Warna Desain Material Jelajahi palet warna Desain Material yang lengkap dengan semua nuansa dan aksen.

🎨

Warna Desain Material

Jelajahi palet warna Desain Material yang lengkap dengan semua nuansa dan aksen.

Pilih Keluarga Warna

Pilih keluarga warna seperti Merah, Biru, atau Hijau Toska.

Jelajahi Nuansa

Lihat semua nuansa dari 50 (terang) hingga 900 (tergelap) plus varian aksen.

Salin Warna

Salin kode HEX warna dengan satu klik.

Loading tool...

What Is Warna Desain Material?

Warna Desain Material adalah referensi lengkap untuk sistem warna Desain Material Google, yang menampilkan 19 keluarga warna dengan nuansa dari 50 hingga 900 plus varian aksen (A100-A700). Palet Warna Desain Material dirancang dengan hati-hati oleh Google untuk menyediakan set warna yang seimbang dan komprehensif untuk desain antarmuka pengguna. Setiap keluarga warna menawarkan rentang dari sangat terang (50) hingga sangat gelap (900), dengan nuansa aksen yang memberikan varian hidup dan jenuh untuk elemen penekanan. Palet ini dirancang dengan mempertimbangkan aksesibilitas, dengan kontras yang jelas antara nuansa yang berdekatan. Ini banyak digunakan dalam pengembangan aplikasi Android, Material UI (React), Angular Material, Flutter, dan aplikasi web yang mengikuti pedoman Desain Material. Alat ini memungkinkan Anda untuk menjelajahi oleh keluarga, melihat semua nuansa dalam strip visual, dan menyalin kode HEX warna apa pun.

Why Use Warna Desain Material?

Palet Material Design lengkap dengan semua 19 keluarga
Nuansa 50-900 plus varian aksen (A100-A700)
Pemilih keluarga warna visual dengan navigasi cepat
Strip nuansa menampilkan semua varian sekaligus
Salin satu klik untuk setiap warna

Common Use Cases

Pengembangan Android

Pilih warna Material untuk aplikasi Android yang mengikuti pedoman desain Google.

Material UI (React)

Temukan nilai warna yang tepat untuk kostumisasi tema MUI.

Pengembangan Flutter

Pilih warna Material untuk aplikasi Flutter dengan percaya diri.

Desain Web

Bangun situs web yang terinspirasi oleh Desain Material dengan palet warna resmi.

Technical Guide

Sistem warna Desain Material menggunakan konvensi penamaan yang terstruktur: Nama Keluarga + Nomor Nuansa. Setiap keluarga memiliki 10 nuansa standar (50, 100, 200...900) dan hingga 4 nuansa aksen (A100, A200, A400, A700). Nuansa standar berkembang dari sangat terang (50, cocok untuk latar belakang) hingga sangat gelap (900, cocok untuk teks). Nuansa aksen adalah varian yang jenuh dan dirancang untuk tombol aksi mengambang, elemen interaktif, dan penekanan. Tidak semua keluarga memiliki aksen - Coklat, Abu-abu, dan Biru Abu-abu tidak memiliki varian aksen karena mereka netral. Warna-warna ini dirancang menggunakan ruang warna HCT (Hue, Chroma, Tone) di Desain Material 3 (Material You), yang menyediakan ramp warna yang lebih seragam secara perseptual daripada HSL. Palet ini memastikan kontras WCAG AA antara nuansa 500 dan teks putih, serta antara nuansa yang lebih terang dan teks gelap.

Tips & Best Practices

1
Nuansa 500 adalah nuansa "primer" dari setiap keluarga - gunakan sebagai dasar
2
Nuansa 50-200 cocok untuk latar belakang dan permukaan
3
Nuansa 600-900 cocok untuk teks pada latar belakang terang
4
Nuansa aksen (A100-A700) digunakan untuk elemen penekanan seperti FABs dan tautan
5
Material Design 3 memperkenalkan warna dinamis dari wallpaper pengguna - periksa Material You untuk pembaruan

Related Tools

Konverter HEX ke RGB

Ubah kode warna HEX menjadi nilai RGB secara instan dengan pratinjau langsung.

🎨 Color Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Palet Warna Merek

Jelajahi palet warna resmi dari 50+ merek dan perusahaan teknologi populer.

🎨 Color Tools

Pencari Warna Tailwind

Temukan kelas warna CSS Tailwind yang paling dekat untuk kode HEX apa pun.

🎨 Color Tools

Warna Sistem iOS & Android

Jelajahi warna sistem untuk Antarmuka Manusia iOS dan Desain Material Android.

🎨 Color Tools

Frequently Asked Questions

Q Apakah ini palet Desain Material terbaru?

Ini mencakup palet Desain Material 2. Desain Material 3 (Material You) memperkenalkan tema warna dinamis yang menghasilkan palet dari wallpaper pengguna, tetapi palet klasik tetap menjadi acuan standar.

Q Mengapa Coklat, Abu-abu, dan Biru Abu kekurangan nuansa aksen?

Ini adalah keluarga warna netral. Aksen dirancang untuk sangat jenuh dan hidup, yang bertentangan dengan sifat warna netral.

Q Nuansa mana yang harus saya gunakan untuk tombol primer?

Nuansa 500 atau 600 biasanya digunakan untuk tombol primer dalam mode terang. Dalam mode gelap, nuansa 200 atau 300 pada permukaan gelap. Selalu verifikasi rasio kontras.

About This Tool

Warna Desain Material is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.