Pemilih Warna & Generator Palet Warna

Setiap warna di layar dapat dijelaskan dengan tiga cara berbeda, dan alat ini menjaga ketiganya tetap sinkron: HEX adalah penulisan singkat yang dipakai di CSS dan alat desain, RGB menjelaskan seberapa banyak cahaya merah, hijau, dan biru yang digabung untuk menghasilkan warna, dan HSL — hue, saturation, lightness — menjelaskannya seperti cara orang biasa memikirkan warna: warna apa, seberapa pekat, dan seberapa terang atau gelap. Geser swatch warna bawaan, ketik kode HEX, atau ubah kolom R/G/B atau H/S/L secara langsung, dan semua kolom lain langsung ikut diperbarui, sehingga Anda bisa berpindah antar cara berpikir tentang warna tanpa menghitung sendiri.

Roda warna adalah dasar dari enam aturan harmoni klasik, yang semuanya dibuat otomatis dari warna dasar apa pun yang Anda pilih. Komplementer memasangkan warna dengan lawannya untuk kontras maksimum; analogus memilih warna bertetangga di roda warna untuk tampilan tenang dan padu; triadik dan tetradik menempatkan tiga atau empat warna dengan jarak merata di roda warna untuk palet yang hidup namun tetap seimbang; split-komplementer melunakkan pasangan komplementer dengan memakai dua warna di sebelah lawannya, bukan lawannya sendiri; dan monokromatik tetap pada satu rona dengan hanya mengubah kecerahan, sering kali pilihan teraman untuk UI yang membutuhkan satu warna merek konsisten dalam beberapa gradasi.

Tidak semua palet bagus berawal dari teori warna — terkadang Anda hanya ingin melihat apa yang muncul. Generator palet acak (tekan spasi, atau klik Buat) menghasilkan lima warna sekaligus dengan rona dan kecerahan yang diatur agar tidak terlihat kusam atau terlalu pastel. Klik ikon gembok pada swatch yang ingin dipertahankan, lalu buat lagi: hanya warna yang tidak dikunci yang berubah, sehingga Anda bisa menyusun palet bertahap seperti alat sejenis Coolors. Klik swatch mana pun untuk menyalin kode HEX-nya, atau gunakan tombol di bawah palet untuk menyalin seluruh set sebagai custom property CSS, variabel SCSS, cuplikan konfigurasi Tailwind, atau array JSON, atau ekspor file swatch Adobe .ase untuk Illustrator dan Photoshop. Anda juga bisa mengekstrak palet dari gambar apa pun (diproses secara lokal, tidak pernah diunggah) dan menyimpan palet favorit di browser untuk nanti.

Memilih warna yang bagus dipandang tidak sama dengan memilih warna yang bisa dipakai — teks dengan warna yang kecerahannya terlalu dekat dengan latar bisa sulit dibaca, dan Web Content Accessibility Guidelines (WCAG) menetapkan batas tertentu untuk ini: rasio kontras minimal 4.5:1 untuk teks normal agar lulus level AA, dan 7:1 untuk lulus level AAA yang lebih ketat. Pemeriksa kontras menghitung rasio persis antara warna pilihan Anda dengan teks putih maupun hitam memakai rumus luminansi relatif yang sama dengan yang ditetapkan spesifikasi WCAG, dan menandai apakah tiap kombinasi lulus, sehingga Anda bisa menemukan tombol atau judul berkontras rendah sebelum dirilis, bukan sesudahnya.