Generator Palet Warna - Buat Skema Warna yang Harmonis

Apa itu generator palet warna?

Generator palet warna adalah alat yang membuat sekumpulan warna yang serasi dari satu warna awal, yang disebut warna primer. Generator palet warna ini menerima warna primer dan jenis harmoni, lalu menghitung warna lainnya dalam palet menggunakan aturan teori warna. Empat jenis harmoni yang didukungnya adalah komplementer, analog, triadik, dan monokromatik.

Cara alat ini membuat palet

Alat ini mengonversi warna primer dari kode heksadesimal (seperti #3B82F6) ke model warna HSL. HSL mendeskripsikan warna dengan tiga angka:

• Rona: posisi warna pada roda warna berukuran 360 derajat (0° adalah merah, 120° adalah hijau, 240° adalah biru).
• Saturasi: tingkat kepekatan warna, dari 0% (abu-abu) hingga 100% (warna murni).
• Kecerahan: seberapa dekat warna dengan hitam atau putih, dari 0% (hitam) hingga 100% (putih).

Setiap jenis harmoni menggeser rona, kecerahan, atau keduanya, lalu mengonversi hasilnya kembali ke kode heksadesimal.

Cara menghitung warna komplementer

Rumus:

$h' = (h + 180) \bmod 360$

dengan h adalah rona warna primer dalam derajat dan h′ adalah rona baru. Langkah mod mengembalikan hasil yang melewati satu putaran penuh ke roda warna.

Saturasi dan kecerahan tetap sama.

Contoh perhitungan: Biru murni, #0000FF, memiliki rona 240°, saturasi 100%, dan kecerahan 50%. Menambahkan 180° menghasilkan rona 60°. Dengan mengonversi rona 60° kembali ke kode heksadesimal, pada saturasi dan kecerahan yang sama, dihasilkan #FFFF00, yaitu kuning. Jadi, alat ini memasangkan biru dengan kuning, bukan dengan oranye.

Hal ini dapat membingungkan karena pelajaran seni sering mengajarkan roda warna yang berbeda, yaitu roda pigmen RYB (merah-kuning-biru), yang menganggap lawan biru adalah oranye. Alat ini menggunakan roda HSL berbasis RGB yang digunakan oleh layar, sehingga pasangan komplementernya berbeda dari roda pencampuran cat.

Cara menghitung warna analog

Warna analog berada di dekat warna primer pada roda warna. Alat ini menghasilkan dua rona yang berjarak 30° dan dua rona yang berjarak 60° dari rona primer, semuanya dengan saturasi dan kecerahan yang sama.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

dengan h adalah rona warna primer.

Contoh perhitungan: Biru, #0000FF (rona 240°), menghasilkan rona 270° (#8000FF), rona 210° (#0080FF), rona 300° (#FF00FF), dan rona 180° (#00FFFF). Bersama warna primer, palet ini memiliki lima warna.

Cara menghitung warna triadik

Warna triadik berjarak 120° satu sama lain pada roda warna, membentuk tiga serangkai yang berjarak sama dengan warna primer.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Contoh perhitungan: Merah, #FF0000 (rona 0°), menghasilkan rona 120° (#00FF00, hijau) dan rona 240° (#0000FF, biru). Ketiga warna tersebut adalah merah, hijau, dan biru, yaitu tiga rona yang sama-sama digunakan sebagai warna primer pada layar digital.

Cara menghitung warna monokromatik

Warna monokromatik mempertahankan rona dan saturasi yang sama, serta hanya mengubah kecerahan. Alat ini menggeser kecerahan sebesar 15 dan 30 poin persentase ke masing-masing arah, dengan batas antara 5% dan 95%.

$l \pm 15, \qquad l \pm 30$

dengan l adalah kecerahan warna primer, dalam poin persentase.

Contoh perhitungan: Biru, #0000FF (kecerahan 50%), menghasilkan kecerahan 65% (#4D4DFF), kecerahan 35% (#0000B3), kecerahan 80% (#9999FF), dan kecerahan 20% (#000066).

Karena batas 5% dan 95%, warna primer yang sudah sangat terang atau sangat gelap dapat mencapai batas yang sama dua kali. Hitam, #000000, menghasilkan kecerahan 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D), dan 5% lagi (#0D0D0D), sehingga satu warna terulang.

Menggunakan alat ini

1. Pilih warna primer dengan pemilih warna, atau ketik kode heksadesimal seperti #3B82F6.
2. Pilih jenis harmoni: komplementer, analog, triadik, atau monokromatik.
3. Baca palet yang dihasilkan. Setiap contoh warna menampilkan kode heksadesimalnya pada sebuah tombol.
4. Klik tombol tersebut untuk menyalin kode heksadesimal, atau gunakan "Salin Semua Warna" untuk menyalin seluruh palet sekaligus.

Memeriksa kontras untuk aksesibilitas

Setiap contoh warna menampilkan dua lencana kecil: satu untuk kontras terhadap putih dan satu untuk kontras terhadap hitam. Alat ini menghitung rasio kontras menggunakan rumus WCAG (Pedoman Aksesibilitas Konten Web):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

dengan C adalah rasio kontras.

L1 adalah luminans relatif warna yang lebih terang, sedangkan L2 adalah luminans relatif warna yang lebih gelap. Luminans berasal dari nilai merah, hijau, dan biru warna tersebut. Lencana bertuliskan "AA" ketika rasionya 4,5 atau lebih tinggi, yang merupakan batas minimum WCAG untuk teks berukuran normal. Lencana bertuliskan "!" ketika rasionya di bawah 4,5. Arahkan kursor ke lencana untuk melihat rasio yang tepat. Teks hitam pada latar belakang putih memiliki rasio 21, nilai tertinggi yang mungkin.

Alat ini menggunakan aturan kontras yang sama untuk memilih warna tombol salin pada setiap contoh warna. Alat ini membandingkan warna contoh dengan hitam dan putih, lalu memilih warna yang lebih mudah dibaca. Pergantian terjadi pada luminans relatif sekitar 0,179, yaitu titik ketika kedua rasio sama.

Pertanyaan yang sering diajukan

Apa itu generator palet warna? Ini adalah alat yang menghasilkan sekumpulan warna yang serasi, dimulai dari satu warna primer dan aturan harmoni yang dipilih.

Mengapa alat ini memasangkan biru dengan kuning, bukan oranye, untuk warna komplementer? Alat ini memutar rona sebesar 180° pada roda HSL, yang didasarkan pada cara layar mencampurkan cahaya merah, hijau, dan biru. Roda cat merah-kuning-biru yang diajarkan dalam pelajaran seni menghasilkan pasangan komplementer yang berbeda karena mencampurkan pigmen, bukan cahaya.

Berapa banyak warna yang dihasilkan setiap jenis harmoni? Komplementer menghasilkan total 2 warna (termasuk warna primer). Triadik menghasilkan 3. Analog menghasilkan 5. Monokromatik menghasilkan 5.

Model warna apa yang digunakan alat ini secara internal? HSL (rona, saturasi, kecerahan). Alat ini mengonversi kode heksadesimal masukan ke HSL, melakukan perhitungan, lalu mengonversi hasilnya kembali ke heksadesimal.

Apakah alat ini memeriksa apakah warna dapat diakses? Ya. Setiap contoh warna menunjukkan apakah kontrasnya terhadap putih dan hitam cukup untuk memenuhi standar WCAG AA bagi teks normal, yang memerlukan rasio setidaknya 4,5.

Dapatkah saya menggunakan lebih dari satu jenis harmoni untuk sebuah proyek? Ya. Banyak desain menggabungkan beberapa jenis harmoni, misalnya set analog untuk warna utama dan satu warna komplementer untuk tombol atau sorotan.

Format warna

Alat ini menulis setiap warna yang dihasilkan sebagai kode heksadesimal enam digit yang diawali tanda # (misalnya #ff0000 untuk merah). Kode heksadesimal secara langsung memetakan nilai merah, hijau, dan biru dari 0 hingga 255 masing-masing. Warna primer ditampilkan persis seperti saat dimasukkan, sehingga bentuk singkat tiga digit seperti #F00 tetap dalam bentuk singkat. Kode tiga digit berarti warna yang sama dengan bentuk enam digit: setiap digit digandakan, sehingga #F00 adalah #FF0000. HSL adalah cara alternatif untuk mendeskripsikan warna yang sama menggunakan rona, saturasi, dan kecerahan, bukan jumlah merah, hijau, dan biru.