📐 Satu perangkat,
setiap tugas desain

Sistem Warna UI

Hasilkan palet token desain lengkap dari satu warna benih. Ekspor ke Tailwind, CSS, atau SCSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 Sistem Warna UI

Panduan Sistem Warna UI

Sistem warna UI adalah serangkaian varian warna yang dibangun dari satu warna benih. Ini memberikan skala terang-ke-gelap yang konsisten untuk token desain, tombol, latar belakang, dan warna teks.

Pilih warna benih dan pilih gaya (Tailwind atau Material). Alat ini menghasilkan palet 10 langkah lengkap dari terang (50) hingga gelap (900), cocok untuk sistem desain.

Pro Tips

Frequently Asked Questions

Q: Apa itu token desain?
Apa itu token desain? Token desain adalah nilai bernama yang menyimpan atribut desain seperti warna, yang digunakan secara konsisten di seluruh sistem desain.
Q: Mengapa saya membutuhkan 10 warna?
Mengapa saya membutuhkan 10 warna? Elemen UI yang berbeda memerlukan tingkat kontras yang berbeda. Skala 10 langkah memberikan fleksibilitas untuk latar belakang, batas, status hover, dan teks.
Q: Apa itu palet token desain?
Apa itu palet token desain? Palet token desain adalah kumpulan variabel warna yang sistematis (primer, sekunder, permukaan, teks) yang dihasilkan dari satu warna merek. Ini memastikan konsistensi di seluruh UI Anda.
Q: Bisakah saya mengekspor ke sistem desain selain Tailwind?
Bisakah saya mengekspor ke sistem desain selain Tailwind? Ya, alat ini mengekspor ke properti khusus CSS, variabel SCSS, dan format konfigurasi Tailwind. Salin format yang cocok dengan tumpukan Anda.
Q: Bagaimana cara menangani mode gelap dengan alat ini?
Bagaimana cara menangani mode gelap dengan alat ini? Hasilkan palet mode terang Anda terlebih dahulu, lalu gunakan warna benih yang sama dengan nilai saturasi dan kecerahan yang dikurangi untuk mode gelap. Banyak sistem desain yang membalikkan warna permukaan dan teks.