Generator Palet Warna

Cara menggunakan generator palet warna

1. Pilih Warna dasar dengan kotak warna, atau ketik kode apa pun di Kode warna dasar (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), nama warna CSS…).
2. Pilih Harmoni: Komplementer, Analog, Triadik, Komplementer terpisah, Tetradik (persegi panjang), Persegi, atau Monokromatik.
3. Pilih Roda warna: HSL (klasik) atau OKLCH (perseptual). Palet diperbarui setiap kali Anda mengubah opsi; Buat palet juga menyegarkannya.
4. Salin satu warna dengan tombol Salin di bawah contoh warnanya, atau pilih format di Ekspor sebagai (Daftar HEX, Variabel CSS, Variabel SCSS, Array JSON, atau Warna Tailwind) lalu gunakan Salin atau Unduh untuk seluruh palet.

Setiap contoh warna menampilkan kode HEX-nya dalam hitam atau putih, mana yang kontrasnya lebih baik, beserta posisinya terhadap warna dasar (misalnya +120°).

Jenis-jenis harmoni warna

Harmoni warna adalah sudut-sudut tetap pada roda warna. Mulai dari rona dasar Anda, alat ini memutar rona dan mempertahankan saturasi serta kecerahan warna dasar.

• Komplementer (0°, 180°): warna yang berseberangan. Kontras maksimal, cocok untuk tombol ajakan bertindak (call to action) di samping warna utama brand.
• Analog (−60°, −30°, 0°, +30°, +60°): warna-warna yang bertetangga di roda. Kombinasi yang tenang dan alami, cocok untuk latar belakang dan ilustrasi.
• Triadik (0°, 120°, 240°): tiga rona dengan jarak sama. Hidup dan seimbang; biasanya satu warna mendominasi dan dua lainnya menjadi aksen.
• Komplementer terpisah (0°, 150°, 210°): dua tetangga dari warna komplementer. Kontras kuat dengan ketegangan lebih rendah daripada pasangan komplementer murni.
• Tetradik (persegi panjang) (0°, 60°, 180°, 240°): dua pasang warna komplementer. Palet yang kaya, tetapi membutuhkan satu warna dominan agar tetap padu.
• Persegi (0°, 90°, 180°, 270°): empat rona dengan jarak sama.
• Monokromatik: satu rona dalam lima tingkat kecerahan, dari gelap ke terang. Ideal untuk status UI, grafik, dan desain yang halus.

Roda HSL atau OKLCH?

Roda HSL (klasik) adalah roda tradisional yang dipakai sebagian besar aplikasi desain dan tutorial. Kelemahannya, sudut yang sama tidak terlihat sama terang: kuning di 60° tampak jauh lebih terang daripada biru di 240° dengan nilai kecerahan HSL yang sama.

Roda OKLCH (perseptual) memutar rona dalam model warna Oklab, yang dirancang agar kecerahan terlihat konsisten. Palet yang dibuat dengannya memiliki warna dengan bobot visual yang mirip, sehingga membantu kontras yang aksesibel. Beberapa warna hasil putaran bisa berada di luar jangkauan layar; alat ini lalu sedikit menurunkan kromanya agar tetap bisa ditampilkan.

Menggunakan palet yang diekspor

Variabel CSS menghasilkan blok :root dengan --color-1, --color-2… yang bisa Anda tempel ke stylesheet. Variabel SCSS menghasilkan baris $color-1: …;, Array JSON menghasilkan daftar string HEX untuk skrip, dan Warna Tailwind menghasilkan objek colors dengan kunci 100, 200, 300… untuk ditempel ke konfigurasi Tailwind Anda.

Sebelum dipublikasikan, periksa kontras teks: harmoni menjamin rona yang enak dilihat, bukan teks yang mudah dibaca. Gunakan warna netral gelap atau terang untuk teks isi, dan simpan warna palet yang jenuh untuk aksen, tombol, dan grafik.