Softonic

Pemilih Warna Material Design

Langkah 1 / 3 Pilih keluarga warna

Palet tetap Material Design 2014 (Material Design 2). Material 3 menggunakan palet tonal yang dibuat secara dinamis.

Pilih keluarga warna

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Palet Material Design mencakup 19 keluarga warna, dari Merah, Merah Muda, dan Ungu hingga Abu-abu serta Biru Abu-abu, masing-masing dengan gradasi dari nuansa 50 (pucat) hingga 900 (hampir hitam), ditambah nuansa aksen opsional A100–A700. Pemilih ini menampilkan setiap sampel warna dalam bentuk kisi dan memungkinkan Anda menyalin nilai apa pun dalam format HEX, RGB, HSL, atau nama token Material untuk digunakan di Tailwind, variabel CSS, iOS UIColor, maupun sumber daya warna Android.

Cara menggunakan palet

  1. 1

    Pindai kisi

    Keluarga warna tersusun vertikal di sisi kiri; nuansa tersusun horizontal di bagian atas dari 50 hingga 900.

  2. 2

    Ketuk sebuah sampel warna

    Lihat HEX, RGB, HSL, dan nama token Material standar (misalnya Indigo 500).

  3. 3

    Salin format yang Anda butuhkan

    Sekali klik akan menyalin string yang tepat: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Periksa kontras

    Panel ini menampilkan rasio kontras WCAG terhadap warna putih dan hitam untuk memilih warna teks yang mudah diakses.

Tangga nuansa

Nuansa Penggunaan
50 Latar belakang hover, permukaan pucat
100 Latar belakang chip, isian beraksen rendah
200 Status nonaktif, permukaan sekunder
300 Batas, pemisah
400 Teks sekunder pada latar belakang terang
500 Warna default / utama, acuan dasar
600 Status interaktif (hover, ditekan)
700 Judul, penekanan kuat
800 Teks gelap pada latar belakang terang
900 Elemen dengan kontras tertinggi (hampir hitam)
A100 Aksen terang
A200 Aksen lebih terang dari default
A400 Aksen (sering menjadi sorotan merek yang “cerah”)
A700 Aksen pekat

Keluarga dalam palet Material

Merah, Merah Muda, Ungu, Ungu Tua, Nila, Biru, Biru Muda, Sian, Teal, Hijau, Hijau Muda, Limau, Kuning, Ambar, Oranye, Oranye Tua, Cokelat, Abu-abu, Biru Abu-abu.

Cokelat, Abu-abu, dan Biru Abu-abu tidak memiliki nuansa aksen, ini adalah keluarga warna netral.

Memilih warna utama

Spesifikasi menyarankan 500 sebagai warna utama, 700 untuk varian yang lebih gelap (digunakan pada bilah status di Android), serta aksen A200 atau A400 untuk tindakan sekunder. Ini adalah konvensi, bukan aturan baku, Material 3 modern (warna dinamis) menurunkan palet dari satu warna dasar tunggal alih-alih memilih dari gradasi tetap.

Titik pemeriksaan aksesibilitas

  • Teks isi: rasio kontras ≥ 4,5:1 terhadap latar belakangnya (WCAG AA).
  • Teks besar (18 pt+ tebal atau 24 pt+ biasa): ≥ 3:1.
  • Komponen UI dan objek grafis: ≥ 3:1.

Secara default, palet ini tidak aman dari sisi kontras. Kuning 500 pada latar putih gagal memenuhi WCAG dengan telak. Selalu periksa rasio sebelum menggunakan sebuah kombinasi, pemilih menampilkannya secara langsung.

Format yang didukung

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (sintaks modern) atau rgb(63, 81, 181) (lama).
  • HSL: hsl(231 48% 48%).
  • Token Material: Indigo 500, praktis untuk dokumen desain dan Figma.
  • Tailwind: indigo-500, masukkan langsung ke atribut kelas jika tema Tailwind Anda menggunakan skala Material.
  • XML warna Android: <color name="indigo_500">#FF3F51B5</color>, format ARGB.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Pertanyaan yang Sering Diajukan

Alat ini menampilkan kembali palet tetap Material Design yang diterbitkan Google pada 2014 dan kemudian didokumentasikan di situs Material Design 2. Alat ini tidak membuat palet tonal Material 3 dari warna dasar. Gunakan untuk mendapatkan tingkat warna bernomor dan warna aksen klasik.

Cokelat, Abu-abu, dan Biru Abu-abu adalah warna netral dan tidak digunakan dalam pemasangan warna aksen. Spesifikasi memang meniadakan rentang A100–A700 untuk warna-warna ini.

Palet bawaan Tailwind terinspirasi oleh Material, tetapi tidak identik. Jika Anda menginginkan warna Material yang persis, perluas theme.extend.colors dengan nilai-nilai Material dan rujuk sebagai material-indigo-500 dalam nama kelas Anda.

Menurut konvensi memang begitu, tetapi tidak ada yang menghalangi Anda menggunakan 700 atau sebuah aksen sebagai warna utama. Konvensi 500 bertujuan menyediakan nuansa dasar yang andal dengan 8 tingkatan ke masing-masing arah untuk variasi.

Alat Terkait

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Pembaca Kode QR

Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.

Generator Favicon dari Inisial dan Emoji

Buat favicon dari inisial atau satu emoji. Pilih bentuk dan latar; desain teks juga menyediakan warna karakter dan gaya font.

Generator Kode QR

Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.

Vektorisasi PNG ke SVG

Telusuri gambar raster PNG menjadi jalur SVG langsung di browser. Cocok untuk logo, ikon, dan gambar garis. Atur ambang, jumlah warna, dan penghalusan.

Editor Foto

Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.