Generator Palet Warna (5 skema dari satu warna dasar)
Pilih warna dasar, pilih skema teori warna, dan dapatkan palet yang terkoordinasi. Klik swatch untuk menyalin nilai hex individual, atau salin semua sekaligus untuk digunakan dalam alat desain dan variabel CSS.
Palet yang dihasilkan
- #3BDFF6
- #3B82F6
- #513BF6
Cara kerjanya
Lima skema teori warna
Komplementer: dua warna di ujung berlawanan roda warna (180° terpisah). Kontras tinggi, hidup. Digunakan untuk aksen, tombol call-to-action, dan menciptakan titik fokus.
Analogus: tiga warna berdekatan pada roda (terpisah 30°). Harmonis dan menyenangkan, kontras rendah. Umum di alam; bagus untuk latar belakang dan permukaan UI.
Triadik: tiga warna berjarak sama (terpisah 120°). Hidup dan seimbang. Digunakan dalam desain yang ceria atau energik.
Tetradik (persegi panjang): empat warna membentuk persegi panjang (terpisah 90°). Palet kaya tetapi lebih sulit diseimbangkan — biasanya gunakan satu sebagai dominan dan yang lain sebagai aksen.
Monokromatik: nada, tint, dan bayangan dari satu hue tunggal. Canggih dan terpadu. Umum dalam desain minimalis dan branding perusahaan.
Memilih warna awal
Warna merek: sebagian besar proyek dimulai dari logo atau warna merek yang sudah ada. Uji sebagai dasar di semua 5 skema untuk menemukan yang paling cocok untuk desain Anda.
Inspirasi: pilih warna dari fotografi, seni, atau alam. Warna cerah (saturasi tinggi, kecerahan sedang) bekerja paling baik sebagai dasar; warna yang sangat pucat atau sangat gelap menghasilkan palet yang pudar.
Aksesibilitas: pastikan palet akhir Anda memiliki cukup kontras untuk teks. Gunakan contrast checker kami untuk memverifikasi pasangan foreground/background memenuhi WCAG AA (4,5:1 untuk teks normal).
Menggunakan palet
Variabel CSS: definisikan warna palet sebagai variabel :root (--color-primary, --color-accent, dll.) sehingga Anda dapat menukar tema dengan mengubah satu lokasi.
Alat desain: tempel nilai hex ke pustaka warna Figma, Sketch, atau Adobe XD. Sebagian besar alat menerima hex secara langsung; beberapa juga menerima HSL atau warna CSS bernama.
Batasi penggunaan: bahkan dengan 5 warna, desain nyata biasanya menggunakan 2-3 secara menonjol dan sisanya secara hemat. Aturan 60-30-10 (60% dominan, 30% sekunder, 10% aksen) adalah keseimbangan awal yang berguna.
Pertanyaan umum
›Skema mana yang harus saya gunakan?
Analogus adalah pilihan paling aman untuk sebagian besar desain — tiga warna terdekat menciptakan harmoni tanpa monoton. Komplementer bekerja baik untuk penekanan (tombol CTA). Monokromatik terbaik untuk merek minimal/canggih. Triadik untuk nuansa ceria/energik.
›Bisakah saya mendapatkan lebih dari 5 warna?
Tidak dari alat ini — kami menghasilkan skema warna kanonik 2-5 warna. Untuk palet yang lebih besar, gunakan output analogus dan buat bayangan monokromatik dari masing-masing (gabungkan skema).
›Apakah algoritma menggunakan ruang warna seragam perseptual?
Kami menggunakan matematika HSL, yang cepat dan dapat diprediksi. Untuk hasil seragam perseptual (lebih baik untuk palet yang disetel aksesibilitas), alat canggih menggunakan OKLCH atau CIELAB. HSL cukup untuk sebagian besar pekerjaan desain.
›Apakah palet saya akan aksesibel?
Tidak secara otomatis. Skema teori warna menjamin harmoni estetika, bukan kontras untuk teks. Selalu periksa kombinasi teks-di-latar-belakang dengan contrast checker kami sebelum meluncurkan.
›Bisakah saya menyimpan palet favorit saya?
Belum — salin kode hex ke sistem desain atau catatan Anda. URL palet yang dapat di-bookmark ada dalam roadmap.
›Bagaimana dengan palet Material Design atau Tailwind?
Ini adalah sistem yang dikurasi sebelumnya. Buat skema dasar di sini, kemudian cari warna Material/Tailwind yang serupa. Beberapa aplikasi mengekspor kode hex yang langsung kompatibel dengan sistem ini.
›Mengapa palet saya terlihat 'datar'?
Jika warna dasar Anda sangat pucat (kecerahan tinggi) atau sangat gelap (kecerahan rendah), palet yang dihasilkan memiliki rentang dinamis yang terbatas. Pilih dasar dengan kecerahan sedang (40-60%) dan saturasi tinggi (70%+) untuk hasil yang hidup.
›Apakah data meninggalkan browser saya?
Tidak. Semua perhitungan berjalan secara lokal; tidak ada yang dikirim ke server.
Alat terkait
Terakhir diperbarui: