Konverter Warna — HEX, RGB & HSL
Ubah warna apa pun antara HEX, RGB, dan HSL lalu salin kodenya seketika — alat gratis untuk desainer.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)Konversi terjadi di perangkat
Aman untuk merek yang belum diumumkan
Tanpa akun
Koneksi aman
Cara kerjanya
- 1
Masukkan warnanya
Tempel kode HEX, ketik nilai RGB, atau atur HSL — mana pun yang ada di tangan Anda.
- 2
Baca notasi lainnya
Dua sisanya diperbarui seketika, berikut contoh warna hasilnya.
- 3
Salin yang Anda butuhkan
Ambil notasi yang dipakai stylesheet, alat desain, atau dokumen merek Anda.
Mengapa memakai alat ini
Tiga notasi sekaligus
HEX, RGB, dan HSL tetap selaras begitu Anda mengubah salah satunya — tak perlu mengonversi dua kali untuk memeriksa.
Sunting di HSL, serahkan dalam HEX
HSL adalah model yang bisa Anda nalar; HEX yang masih diminta sebagian besar stylesheet dan berkas desain.
Contoh warna langsung
Warnanya digambar sambil Anda mengetik, jadi salah ketik pada string hex langsung terlihat.
Salin sekali klik
Ambil string persis yang diminta CSS, konfigurasi Tailwind, atau alat desain Anda, sudah terformat benar.
Tidak ada yang diunggah
Konversinya adalah aritmetika yang dikerjakan di browser Anda — tidak ada nilai yang dikirim ke mana pun.
Gratis tanpa akun
Tanpa pendaftaran, tanpa batas jumlah konversi, dan tanpa watermark pada apa pun.
HEX, RGB, dan HSL menggambarkan warna yang sama dengan cara berbeda
Ketiga notasi menunjuk warna layar yang sama; bedanya ada pada bagaimana angkanya disusun, dan susunan itulah yang membuat satu notasi lebih enak dipakai daripada yang lain untuk pekerjaan tertentu. HEX memampatkan tiga nilai menjadi string ringkas — `#3B82F6` berarti merah 59, hijau 130, biru 246 yang ditulis dalam basis 16. RGB menyebut ketiga kanal itu secara langsung. HSL menyusun ulang informasi yang sama menjadi rona (warna apa, sebagai sudut 0 sampai 360), saturasi (seberapa pekat, 0 sampai 100%), dan kecerahan (seberapa terang, 0 sampai 100%). Mengonversi di antara ketiganya tidak menghilangkan apa pun: `#3B82F6`, `rgb(59, 130, 246)`, dan `hsl(217, 91%, 60%)` adalah warna yang sama, hanya ditulis dengan tiga cara.
Kenapa HSL yang layak dipelajari
HEX dan RGB sulit dinalar karena mengubah warna berarti mengubah tiga angka sekaligus tanpa hubungan yang jelas dengan apa yang Anda lihat. Cerahkan biru di RGB dan Anda harus menaikkan ketiga kanalnya dengan jumlah yang harus ditebak. Di HSL, penyuntingan yang sama cukup satu angka: naikkan kecerahannya. Ingin versi lebih kalem dari warna merek? Turunkan saturasinya dan biarkan sisanya. Butuh keadaan hover yang sedikit lebih gelap dari warna dasar? Kurangi sepuluh dari kecerahan. Karena itu pula HSL adalah jalan praktis untuk membangun skala warna: kunci rona dan saturasinya, langkahkan kecerahannya, dan keluarganya tetap padu karena rancangannya, bukan karena coba-coba.
Di mana tiap notasi benar-benar dipakai
HEX mendominasi serah-terima desain: panduan merek, Figma, dan sebagian besar stylesheet masih menyebut warna sebagai kode enam digit, dan itulah format yang paling mungkin dikirim klien atau percetakan kepada Anda. RGB muncul di tempat kanalnya perlu diolah secara program, dan dalam bentuk `rgba()` ketika transparansi ikut bermain. HSL makin sering menjadi format yang ditulis tangan di CSS, justru karena orang yang merawat kodenya membaca `hsl(217, 91%, 60%)` dan langsung tahu itu biru pekat berkecerahan sedang, sedangkan `#3B82F6` tidak memberi tahu apa pun sampai dirender. Alur yang lazim adalah berpikir dalam HSL saat merancang lalu mengonversi ke HEX untuk dokumen serah-terima — persis konversi yang membuat alat ini ada.
Membaca kode HEX tanpa konverter
Kode HEX enam digit terdiri atas tiga pasang: merah, hijau, biru, masing-masing dari `00` sampai `FF` (0 sampai 255). Dua pola layak dikenali dengan mata. Ketika ketiga pasangnya sama — `#333333`, `#CCCCCC` — warnanya abu-abu netral, dan makin tinggi nilainya makin terang. Ketika satu pasang jelas mendominasi, kanal itulah warnanya: `#CC3333` terbaca merah, `#33CC33` terbaca hijau. Ini cukup untuk menangkap kesalahan yang kentara sebelum dirender, tetapi tidak cukup untuk menilai apakah dua warna berdekatan — dan di situlah mengonversi ke HSL lalu membandingkan ketiga komponennya lebih cepat daripada menatap string heksadesimal.
Mengonversi warna bukan berarti memastikan warnanya berfungsi
Konverter memberi tahu warna apa itu, bukan apakah ia terbaca di atas latarnya. Itu dua pertanyaan terpisah, dan yang kedua punya ambang, bukan pendapat: WCAG mensyaratkan rasio kontras minimal 4,5:1 untuk teks tubuh biasa. Sepasang warna bisa sangat sesuai merek dan tetap gagal di ambang itu. Kalau warna yang Anda konversi akan membawa teks — atau memang teksnya — lewatkan pasangannya ke pemeriksa kontras sebelum Anda memutuskan. Begitu pula, kalau Anda sedang menyusun satu set warna alih-alih mengonversi satu warna, pembuat palet bekerja pada hubungan antar-rona, sesuatu yang tidak ditangani konversi semata.
Alfa, transparansi, dan bentuk delapan digit
HEX maupun RGB punya varian transparan: HEX delapan digit menambahkan dua karakter alfa, dan `rgba()` menambahkan nilai keempat dari 0 sampai 1. Alat ini mengonversi bentuk pekat enam digit, yang dipakai dokumen merek, berkas desain, dan sebagian besar deklarasi stylesheet. Kalau Anda butuh transparansi, konversikan warna solidnya di sini lalu tambahkan kanal alfa di stylesheet Anda — dengan begitu warna dasarnya tetap menjadi satu-satunya sumber kebenaran dan tiap pemakaian menetapkan opasitasnya sendiri, alih-alih menanam puluhan varian setengah transparan yang nyaris serupa ke dalam palet.
Kesalahan umum yang sebaiknya dihindari
- Menyetel warna dengan mengutak-atik kanal RGB. Mencerahkan atau mengalemkan di RGB berarti mengubah tiga angka dengan jumlah yang Anda tebak. Konversikan ke HSL, ubah satu komponen yang menggambarkan keinginan Anda, lalu konversikan balik.
- Menyusun skala warna dengan memilih nada pakai mata. Melangkahkan kecerahan di HSL sambil mengunci rona dan saturasi menghasilkan keluarga yang padu; memilih kode hex satu per satu menghasilkan keluarga yang ronanya melenceng dan bagian tengahnya tampak keruh.
- Menganggap warna hasil konversi otomatis aksesibel. Konversi itu aritmetika dan tidak berkata apa pun soal keterbacaan — pasangannya tetap harus melewati 4,5:1 untuk teks tubuh, dan hanya pemeriksaan kontras yang bisa memberi tahu.
- Menyalin kode hex tanpa tanda pagar, atau dengan tanda pagar, ke kolom yang mengharapkan sebaliknya. Kedua bentuk itu lazim dan tak satu pun diterima di mana-mana; periksa apa yang diminta alat Anda alih-alih menebak.
- Berharap warna layar tercetak sama persis. HEX, RGB, dan HSL sama-sama menggambarkan cahaya yang dipancarkan layar; pencetakan memakai tinta CMYK, dan warna layar yang pekat — terutama biru dan hijau jenuh — tidak punya padanan tinta yang persis.
Perbandingan
| KeroTools | Perangkat lunak desain | Konverter di mesin pencari | |
|---|---|---|---|
| HEX, RGB, HSL sekaligus | Ketiganya, langsung | Ada | Umumnya satu per satu |
| Nilai dikirim ke server | Tidak pernah | Tidak | Sering |
| Contoh warna langsung | Ada | Ada | Kadang |
| Akun atau lisensi | Tidak keduanya | Perlu lisensi | Tidak keduanya |
| Jalan offline | Setelah muat pertama | Ya | Tidak |
| Biaya | Gratis | Berbayar | Gratis |
Fitur
Masukan dan keluaran HEX
Notasi enam digit, dengan atau tanpa tanda pagar di depan.
Masukan dan keluaran RGB
Tiga kanal dari 0 sampai 255, dalam format yang diterima CSS secara langsung.
Masukan dan keluaran HSL
Rona dalam derajat, saturasi dan kecerahan dalam persen — model yang benar-benar dipakai desainer untuk berpikir.
Pratinjau warna langsung
Sebuah contoh menampilkan nilai saat ini, jadi kesalahan tertangkap mata.
Dua arah
Sunting salah satu dari ketiganya dan dua lainnya mengikuti; tidak ada kolom sumber yang tetap.
String siap salin
Keluarannya diformat agar bisa langsung ditempel ke CSS tanpa dirapikan.
Tanpa instalasi
Tidak ada yang perlu diunduh atau dipasang — jalan langsung di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan berkas dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Mengubah serah-terima HEX dari desainer menjadi nilai HSL yang membuat stylesheet lebih mudah dirawat.
Desainer
Membaca warna merek dalam HSL untuk menyusun versi terang dan gelap yang tetap satu keluarga rona.
Tim pemasaran dan pemilik merek
Mendapatkan notasi persis yang diminta editor tema tiap platform, berangkat dari satu warna merek.
Siapa pun yang menyunting tema
Mencocokkan warna dari satu alat ke kolom yang mengharapkan format berbeda.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — tidak ada yang diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.