Konverter warna

Tiga cara menulis warna yang sama

Layar mencampur setiap warna dari cahaya merah, hijau, dan biru, dan HEX, RGB, serta HSL hanyalah tiga notasi untuk 16,7 juta kombinasi yang sama di ruang warna sRGB. Mana yang Anda butuhkan tergantung ke mana nilai itu akan dipakai.

• HEX, seperti #2563eb: tiga pasang digit heksadesimal untuk merah, hijau, dan biru, masing-masing dari 00 hingga ff (0 hingga 255). Ringkas dan mudah disalin, ini adalah default di alat desain, panduan merek, dan sebagian besar CSS.
• RGB, seperti rgb(37, 99, 235): tiga kanal yang sama dalam bentuk desimal. Berguna saat kode bekerja langsung dengan angka, seperti menggambar di canvas, pemrosesan gambar, resource warna Android, atau Pillow di Python.
• HSL, seperti hsl(221, 83%, 53%): hue, saturasi, dan lightness. Satu-satunya dari ketiganya yang bisa diatur manusia dengan nalar, sehingga menjadi favorit untuk membangun palet dan tema.

Bentuk HEX pendek #36f adalah singkatan dari #3366ff, di mana setiap digit digandakan. Ini hanya berlaku jika kedua digit di setiap pasangan sama.

Membaca nilai HSL

HSL menggambarkan warna seperti cara orang membicarakannya:

• Hue adalah posisi pada roda warna dalam derajat: 0 merah, 60 kuning, 120 hijau, 180 cyan, 240 biru, 300 magenta, dan 360 kembali ke merah.
• Saturasi berkisar dari 0%, abu-abu netral, hingga 100%, versi paling cerah dari hue tersebut.
• Lightness berkisar dari 0%, selalu hitam, melalui 50%, warna murni, hingga 100%, selalu putih.

Inilah yang membuat HSL praktis untuk design system. Tetapkan hue dan saturasi, lalu turunkan lightness bertahap dari 95% ke 15%, dan Anda mendapat skala dari warna muda ke warna tua untuk tombol, latar belakang, dan border. Putar hue 180 derajat untuk aksen komplementer, atau 30 derajat ke salah satu arah untuk warna analog.

Satu keterbatasan: lightness HSL adalah rata-rata matematis, bukan seberapa terang warna terlihat. Kuning dengan lightness 50% terlihat jauh lebih terang daripada biru 50%, jadi warna dengan L yang sama bisa punya kontras yang sangat berbeda terhadap teks putih. Selalu periksa kontras pada pasangan warna yang sebenarnya.

Apa yang diterima konverter ini

Tempel atau ketik di kolom, atau pilih dengan swatch warna, dan baris HEX, RGB, serta HSL diperbarui bersamaan dengan pratinjau besar. Masukan yang diterima:

• #rgb, #rgba, #rrggbb, dan #rrggbbaa, dengan atau tanpa #.
• 148 nama warna CSS, seperti tomato atau rebeccapurple.
• rgb(37, 99, 235) dan rgba(37, 99, 235, 0.5), atau sintaks modern berpemisah spasi rgb(37 99 235 / 50%). Kanal bisa berupa desimal atau persentase.
• hsl(221, 83%, 53%), hsla(…), dan hsl(221.5 83% 53%). Hue bisa memakai deg, turn, rad, atau grad; tanda persen opsional.
• Tiga angka polos: 37, 99, 235 atau 37 99 235.

Nilai di luar rentang dipangkas: rgb(300, 0, 0) menjadi merah 255. Hue 360 atau lebih, maupun hue negatif, berputar mengelilingi roda. Kanal desimal dibulatkan ke bilangan bulat.

Alfa, baik dalam HEX 4 atau 8 digit, rgba(), hsla(), maupun setelah /, dibaca tetapi diabaikan, jadi hasilnya selalu sepenuhnya opak.

Slider R, G, dan B di bawah hasil mengubah satu kanal sekaligus. Berguna untuk menggeser warna sedikit lebih hangat atau lebih dingin sambil melihat pratinjau dan ketiga notasi diperbarui.

Mengapa nilai bergeser satu saat dikonversi balik

Konversi antara HSL dan RGB melibatkan pecahan, dan setiap hasil di sini dibulatkan ke bilangan bulat, sebagaimana CSS biasanya ditulis. HSL punya lebih sedikit kombinasi bilangan bulat daripada RGB, kira-kira 3,6 juta berbanding 16,7 juta, sehingga beberapa warna RGB berbagi satu nilai HSL yang sama setelah dibulatkan.

Contohnya, #2563eb dikonversi menjadi hsl(221, 83%, 53%), tetapi mengetik HSL itu kembali menghasilkan #2463eb: merah bernilai 36, bukan 37. Perbedaannya tidak terlihat mata, tetapi penting jika panduan merek menetapkan nilai HEX yang persis. Jadikan nilai HEX atau RGB sebagai acuan utama, dan gunakan HSL untuk mengeksplorasi variasi, bukan untuk menyimpan warna resmi.

Menggunakan hasilnya

• Di CSS, ketiga string hasil bisa ditempel apa adanya. Custom property seperti --brand: #2563eb; adalah cara paling rapi untuk memakainya ulang.
• Untuk ikon situs, tetapkan dulu warna merek di sini, terapkan ke logo di alat desain Anda, lalu ubah logo menjadi set ikon lengkap dengan pembuat favicon.
• Untuk QR code bermerek, pertahankan kontras yang kuat: warna depan gelap dengan lightness sekitar 20–30% di atas putih terpindai dengan andal, sedangkan warna terang atau bersaturasi rendah sering gagal. Pembuat QR code memungkinkan Anda mengujinya.
• Warna cetak adalah urusan lain. Layar memakai RGB, printer memakai CMYK, dan biru terang di layar mungkin tidak bisa direproduksi dengan tinta. Mintalah proof ke percetakan jika ketepatan warna penting.

Semua konversi terjadi di browser Anda.