Apa itu Pemilih Warna Material Design?

Material Design Color Picker menyediakan palet warna Material Design lengkap dengan semua warna primer dan varian shade-nya (50 hingga 900). Klik swatch mana pun untuk menyalin nilai dalam HEX, RGB, atau HSL, lalu periksa aksesibilitas dengan pemeriksa kontras WCAG bawaan.

Palet ini mencakup 19 warna utama (Red sampai Brown) dengan tingkat 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 dan aksen A100, A200, A400, A700 jika Google menetapkannya. Tiap kotak menampilkan nilai HEX yang tepat, dan panel warna terpilih membantu menyusun palet proyek lalu menyalin atau mengunduhnya.

Cara menggunakan

1. Jelajahi grid warna yang menampilkan semua warna primer Material Design — Red, Pink, Purple, Deep Purple, Indigo, Blue, dan lainnya.
2. Klik warna primer untuk membuka varian shade dari yang paling terang (50) hingga paling gelap (900), termasuk shade aksen (A100–A700).
3. Klik shade mana pun untuk menyalin nilainya dalam format pilihan Anda (HEX, RGB, atau HSL), tambahkan shade ke panel Selected Colors, lalu unduh palet sebagai CSS, SCSS, konfigurasi Tailwind, atau JSON untuk proyek Anda.

Kapan menggunakan

• Memilih warna utama, kontainer yang lebih terang, dan hover yang lebih gelap dari rona yang sama.
• Menyamakan antarmuka Android atau Flutter dengan palet resmi Google tanpa menebak HEX.
• Menyusun palet yang konsisten untuk slide presentasi atau aset pemasaran.

Hasil

Anda sedang membangun dashboard dan memerlukan warna Material Design 'Indigo 500' (#3F51B5) yang tepat untuk warna tombol utama dan 'Indigo 50' (#E8EAF6) untuk latar belakang hover.

FAQ

Apa beda tingkat utama dan tingkat aksen (A)?

Tingkat 50–900 adalah variasi terang-gelap dari warna yang sama, cocok untuk latar, permukaan, dan teks. A100–A700 punya saturasi lebih tinggi dan Google merekomendasikannya untuk elemen aksi seperti tombol dan label.

Kenapa beberapa warna tidak punya aksen?

Brown dan Grey memang sengaja berdesaturasi, jadi Google tidak pernah merilis varian A untuk keduanya. Alat ini mengikuti spesifikasi asli dan tidak mengarang nilai yang tidak ada dalam sistem.

Tingkat mana yang dipakai untuk teks isi?

Panduan Material menyarankan Grey 900 di atas latar terang dan Grey 50 atau putih di atas latar gelap. Tingkat menengah (500–600) cocok untuk teks sekunder atau ikon yang butuh kontras lebih rendah.

Apakah warna ini sama dengan Material 3 (Material You)?

Bukan. Palet ini berasal dari sistem Material Design asli yang dirilis Google pada 2014. Material 3 memakai algoritma berbeda yang menghasilkan palet tonal dinamis dari satu warna sumber.

Bagaimana memeriksa kontras antara dua tingkat?

Tambahkan kedua shade ke panel Selected Colors, lalu gulir ke Pemeriksa Kontras. Pilih satu sebagai latar depan dan satu sebagai latar belakang: panel akan menampilkan rasio WCAG beserta badge Lulus/Gagal untuk level AA dan AAA pada teks biasa dan teks besar.

Alat terkait