Lewati ke konten

Generator palet warna

Palet komplementer, analog, triadik, split-komplementer, dan monokromatik dari satu warna dasar, dengan perhitungan HSL yang sudah diselesaikan untuk Anda.

Cara kerja

Generator palet warna ini mengambil satu warna dasar dan langsung menghasilkan lima variasi palet berbasis teori, yaitu komplementer, analog, triadik, split-komplementer, dan monokromatik, sehingga Anda dapat menjelajahi skema warna yang harmonis tanpa perlu melakukan perhitungan HSL secara manual.

  1. Tetapkan warna dasar

    Ketik kode heksadesimal, gunakan pemilih contoh warna, atau klik Warna acak.

  2. Hasilkan palet

    Lima jenis harmoni muncul, masing-masing sebagai barisan berisi lima contoh warna.

  3. Salin yang Anda butuhkan

    Klik contoh warna mana pun untuk mendapatkan nilai heksadesimalnya, atau salin semuanya sebagai variabel CSS.

Lima jenis harmoni

Setiap palet dibuat dengan mengonversi warna dasar ke HSL (rona, saturasi, cahaya) dan menggeser rona dengan jumlah tetap di sekitar roda warna:

  • Komplementer: rona yang berseberangan langsung dengan warna dasar, berjarak 180 derajat, untuk kontras maksimum.
  • Analog: rona yang bertetangga dengan warna dasar, 15 dan 30 derajat di setiap sisi, untuk tampilan yang tenang dan kohesif.
  • Triadik: tiga rona dengan jarak 120 derajat, membentuk kombinasi yang seimbang dan semarak.
  • Split-komplementer: dua rona di sebelah warna komplementer, berjarak 150 dan 210 derajat, memberikan kontras yang hampir sama besar namun dengan ketegangan yang lebih rendah.
  • Monokromatik: rona yang sama pada lima tingkat kecerahan berbeda, selalu menjadi pilihan yang aman dan kohesif.

Menggunakan palet dalam CSS

Salin nilai heksadesimal dan tentukan sebagai properti kustom, lalu referensikan di seluruh stylesheet:

--color-primary: #14b8a6; --color-accent: #b84e14;

HSL tidak seragam secara perseptual

Palet ini dihitung sepenuhnya menggunakan perhitungan HSL dan tidak memperhitungkan keseragaman perseptual seperti ruang warna OKLCH atau CIELAB. Dua warna dengan kecerahan HSL yang sama tetap dapat terlihat berbeda tingkat terangnya. Periksa rasio kontras dengan pemeriksa aksesibilitas khusus sebelum menetapkan palet UI.

Pertanyaan yang sering diajukan

Bagaimana cara menghasilkan palet warna dari satu kode heksadesimal?

Masukkan kode heksadesimal Anda di kolom Warna dasar, misalnya #14b8a6, lalu klik Hasilkan palet. Alat ini mengonversinya ke HSL, kemudian menghitung lima jenis harmoni: komplementer, analog, triadik, komplementer terbagi, dan monokromatik, masing-masing sebagai baris berisi lima contoh warna. Klik contoh warna mana pun untuk menyalin nilai heksadesimalnya ke papan klip Anda.

Apa perbedaan antara palet warna komplementer dan komplementer terbagi?

Palet komplementer memasangkan rona dasar Anda dengan warna yang berseberangan langsung pada roda warna, berjarak 180 derajat, untuk kontras maksimal. Palet komplementer terbagi menggunakan dua rona di sebelah titik berseberangan tersebut, berjarak 150 dan 210 derajat, menghasilkan kontras yang sama hidup tetapi sedikit lebih lembut sehingga lebih mudah diseimbangkan dalam desain UI.

Bagaimana cara menggunakan palet yang dihasilkan dalam CSS?

Salin nilai heksadesimal dari contoh warna dan tentukan sebagai properti kustom CSS, misalnya --color-primary: #14b8a6; --color-accent: #b84e14;. Rujuk properti tersebut di seluruh lembar gaya Anda dengan var(--color-primary). Tombol Salin semua 5 palet menyalin setiap contoh warna dari semua jenis harmoni sekaligus, siap untuk ditempelkan ke blok :root.

Dapatkah saya memulai dari warna acak untuk mendapatkan inspirasi palet?

Ya. Klik tombol Warna acak untuk menghasilkan nilai heksadesimal acak dan segera menghitung kelima palet darinya. Ini berguna untuk eksplorasi merek saat Anda belum memikirkan warna awal.

Apa keterbatasan pembuatan palet berbasis peramban?

Perhitungan palet dilakukan murni menggunakan matematika HSL dan tidak memperhitungkan keseragaman perseptual, seperti yang dilakukan ruang warna OKLCH atau CIELAB. Warna dengan kecerahan HSL yang sama dapat terlihat berbeda secara visual dalam hal kecerahan, jadi selalu verifikasi rasio kontras dengan pemeriksa aksesibilitas khusus sebelum menyelesaikan palet UI.