Generator Palet Warna

Buat palet yang harmonis berdasarkan teori warna — komplementer, triadik, analogus, dan banyak lagi

Membagikan:
Click any color swatch to copy its hex code
Copied!

Mengapa menggunakan generator palet warna?

Memilih warna yang harmonis memerlukan pengetahuan teori warna. Generator kami menggunakan matematika HSL untuk secara otomatis menghitung palet yang harmonis dari warna dasar apa pun, memungkinkan desainer dan pengembang membuat skema warna profesional dalam hitungan detik.

🎨

6 Mode Harmoni

Komplementer, triadik, analogus, komplementer split, tetradik, bayangan monokromatik

👁️

Pratinjau Swatch Warna

Klik swatch warna untuk menyalin kode hex langsung ke clipboard

📋

Ekspor Variabel CSS

Ekspor seluruh palet sebagai properti CSS khusus — tinggal tempel ke stylesheet

Buat palet dalam 3 langkah

1

Pilih warna dasar

Gunakan color picker atau masukkan kode hex untuk menetapkan warna merek atau warna awal

2

Pilih jenis harmoni

Pilih komplementer, triadik, analogus, atau harmoni lain yang sesuai dengan desain Anda

3

Salin dan gunakan

Klik swatch warna untuk menyalin kode hex, atau salin seluruh palet dengan 'Salin sebagai Variabel CSS'

Kasus Penggunaan Palet Warna

🌐

Desain Web

Buat sistem warna lengkap untuk situs web berdasarkan warna merek utama

🏢

Identitas Merek

Kembangkan palet merek profesional dengan warna primer, sekunder, dan aksen

📱

Desain UI/UX

Buat warna yang aksesibel dan konsisten secara visual untuk tombol, teks, dan latar belakang aplikasi

📊

Visualisasi Data

Hasilkan warna kategori yang berbeda untuk bagan, tabel, dan dashboard analitik

Praktik Terbaik Desain Warna

✓ Periksa kontras warna (WCAG)

Pastikan pasangan teks/latar belakang memenuhi rasio kontras WCAG AA (4,5:1 untuk teks normal).

✓ Batasi palet

Pertahankan 3-5 warna: 1 primer, 1 sekunder, 1-2 aksen, netral. Terlalu banyak warna menciptakan kebisingan visual.

✓ Pertimbangkan psikologi warna

Biru=kepercayaan/profesionalisme, hijau=pertumbuhan/sukses, merah=urgensi/energi, kuning=optimisme.

✓ Uji dalam mode gelap

Sesuaikan nilai kecerahan untuk membuat varian mode gelap. Hitam murni (#000) atau putih murni (#fff) sering tidak ideal.

❓ Pertanyaan yang Sering Diajukan

Apa itu skema warna komplementer?
Warna komplementer berada langsung berseberangan di roda warna (biru dan oranye, merah dan hijau, dll.). Menciptakan kontras tinggi dan energi visual — ideal untuk tombol CTA dan elemen aksen.
Kapan menggunakan skema warna analogus?
Skema analogus menggunakan 3 warna yang berdekatan di roda warna. Menciptakan desain yang harmonis dan tenang dengan kontras rendah — ideal untuk latar belakang, gradien, dan desain UI yang lembut.
Apa perbedaan antara HSL, RGB, dan Hex?
Ketiganya merepresentasikan warna yang sama dalam format berbeda. Hex (#6366f1) digunakan dalam CSS. RGB (99, 102, 241) menentukan merah/hijau/biru. HSL (237°, 84%, 67%) menggunakan hue, saturasi, dan kecerahan.
Bagaimana cara membuat palet warna untuk mode gelap?
Dalam mode gelap, kurangi nilai kecerahan secara signifikan (mis. L:60% → L:30%) dan tukar peran teks/latar belakang. Pertahankan nilai hue dan saturasi yang serupa, sesuaikan kecerahan untuk keterbacaan di latar belakang gelap.