Generator Palet Warna
Pilih warna dasar dan langsung hasilkan palet warna dari terang ke gelap yang mulus, siap disalin ke sistem desain Anda.
🔒 Diproses secara lokal di browser Anda
Loading…
Cara menggunakan
- Ketik kode heksadesimal di kolom "Warna Dasar", atau klik pemilih warna (swatch) untuk memilih warna secara visual.
- Segera setelah warna yang valid dikenali, palet lengkap dari warna-warna tersebut akan otomatis muncul di bawahnya — tanpa perlu menekan tombol apa pun.
- Palet berkisar dari warna yang sangat terang hingga sangat gelap, semuanya berbagi rona (hue) yang sama dengan warna dasar Anda.
- Klik swatch mana pun untuk menyalin kode heksanya ke clipboard — konfirmasi singkat "Tersalin!" akan memberi tahu Anda bahwa itu berhasil.
Fitur
- Menghasilkan skala 9 langkah terang ke gelap yang mulus dari warna dasar apa pun
- Mempertahankan rona (hue) dan saturasi yang sama di setiap langkah, seperti skala warna bawaan Tailwind
- Menyertakan warna dasar Anda yang persis dalam palet, bukan hanya perkiraan
- Salin sekali klik untuk kode heksa dari swatch mana pun
- 100% berjalan di sisi klien — warna Anda tidak pernah meninggalkan browser
Pertanyaan yang sering diajukan
Apakah alat ini mengirim warna saya ke suatu tempat?
Tidak. Seluruh palet dihasilkan dengan perhitungan JavaScript sederhana langsung di browser Anda — tidak pernah diunggah atau dikirim ke server mana pun.
Bagaimana cara warna-warna ini dihitung?
Alat ini mengonversi warna dasar Anda ke HSL, lalu mempertahankan rona dan saturasi tetap sambil mengubah tingkat kecerahan secara merata dari sangat terang hingga sangat gelap. Warna dasar Anda yang persis ditempatkan di tengah skala.
Bisakah saya menggunakan palet ini di Tailwind atau sistem desain lain?
Bisa. Palet ini mengikuti konsep yang sama dengan skala warna 50/100/.../900 milik Tailwind — gradasi terang ke gelap dari satu rona — sehingga Anda dapat langsung menyalin kode heksanya ke tema atau variabel CSS Anda sendiri.
Format warna apa saja yang bisa saya masukkan?
Hanya kode heksadesimal, dengan atau tanpa tanda # di depan, baik bentuk singkat 3 digit (seperti #abc) maupun 6 digit (seperti #3b82f6). Gunakan pemilih warna jika Anda lebih suka memilih secara visual.
Mengapa muncul pesan error?
Teks yang Anda masukkan tidak cocok dengan format warna heksadesimal yang dikenali. Pastikan formatnya menyerupai #3b82f6 (atau 3b82f6, atau bentuk singkat #abc).