Konverter kode warna
Masukkan warna dan salin nilai HEX, RGB, dan HSL.
#624DE3CC
Tentang Alat Ini
Alat konversi kode warna menampilkan satu warna dalam format HEX, RGB, dan HSL secara bersamaan sekaligus mengonversinya antarmoda. Anda bisa memilih warna dengan mengetiknya, memilih preset, atau menggunakan pipet warna, serta mengatur tingkat transparansi. Cocok untuk mengubah warna menjadi format kode yang Anda butuhkan untuk desain web, pekerjaan UI, CSS, dan pengeditan gambar.
Cara Menggunakan
Pilih warna
Masukkan nilai di kolom HEX, RGB, atau HSL, atau pilih warna preset. Di lingkungan yang mendukungnya, Anda juga bisa menggunakan tombol pipet warna untuk mengambil warna langsung dari layar.
Atur transparansi
Geser slider transparansi untuk mengatur opasitas warna. Pengaturan ini langsung tercermin di pratinjau di bagian atas dan di kode warna.
Periksa dan salin hasil
Periksa warna di pratinjau, lalu tekan tombol salin di samping kolom HEX, RGB, atau HSL untuk menyalin nilai yang Anda butuhkan ke papan klip.
Fitur Utama
HEX, RGB, dan HSL dalam satu alat
Masukkan warna dalam satu format dan lihat nilai HEX, RGB, serta HSL-nya sekaligus.
Pratinjau real-time dan transparansi
Pratinjau langsung terupdate saat Anda mengubah nilai warna atau transparansi, dan slider memungkinkan Anda membuat warna semi-transparan.
Pipet warna dan warna preset
Di browser yang mendukung, gunakan pipet warna untuk mengambil warna dari layar, atau klik warna preset yang umum untuk menerapkannya dengan cepat.
Salin tiap format secara terpisah
Salin nilai HEX, RGB, atau HSL secara terpisah untuk langsung digunakan di CSS, alat desain, dan dokumen.
Masukkan nilai secara langsung
Jika Anda sudah tahu kode warnanya, ketik di kolom yang tersedia untuk melihat hasil konversinya.
Pemrosesan di dalam browser
Nilai warna dan hasil konversi Anda tetap berada di browser — tidak ada yang dikirim ke server.
Kasus Penggunaan
Mengonversi kode warna CSS
Ubah warna HEX dari mockup desain menjadi RGB atau HSL untuk digunakan dalam gaya CSS.
Memindahkan warna antartools desain
Ubah warna yang sama ke format kode yang dibutuhkan setiap program saat formatnya berbeda.
Membuat latar belakang semi-transparan
Atur transparansi untuk menghasilkan warna semi-transparan bagi overlay, latar belakang, tombol, dan garis tepi.
Mengambil warna dari layar
Gunakan pipet warna untuk memilih warna yang tampil di halaman web, gambar, atau layar aplikasi dan lihat kodenya.
Mengelola warna merek
Simpan nilai HEX, RGB, dan HSL warna merek secara bersamaan untuk penggunaan yang konsisten di web, cetak, dan dokumen desain.
Pertanyaan Umum
Apa bedanya HEX, RGB, dan HSL?
HEX merepresentasikan warna dalam heksadesimal, misalnya #8AD0FF. RGB menyatakan intensitas merah, hijau, dan biru dalam bentuk angka, sedangkan HSL menggambarkan warna berdasarkan rona (hue), saturasi, dan tingkat kecerahan.
Format mana yang sebaiknya saya gunakan?
HEX sederhana dan banyak digunakan di web serta dokumen desain. RGB cocok untuk mengatur kanal warna secara langsung, dan HSL berguna untuk mengubah rona atau kecerahan secara intuitif.
Bagaimana transparansi tercermin dalam kode warna?
Nilai HEX dengan transparansi ditampilkan sebagai kode 8 digit dengan nilai alpha ditambahkan setelah kode 6 digit biasa. Misalnya, pada #8AD0FFCC dua digit terakhir menunjukkan transparansi.
Apa bedanya HEX 6 digit dan 8 digit?
HEX 6 digit hanya berisi nilai merah, hijau, dan biru. HEX 8 digit menambahkan nilai alpha di akhir untuk merepresentasikan transparansi.
Apa arti transparansi 100% dan 0%?
100% berarti sepenuhnya tidak transparan (opaque) dan 0% berarti sepenuhnya transparan. Nilai di antaranya menghasilkan warna semi-transparan yang memperlihatkan latar belakang di belakangnya.
Berapa rentang nilai RGB?
Nilai RGB menggunakan rentang 0 sampai 255 untuk masing-masing merah, hijau, dan biru. Semakin tinggi nilainya, semakin kuat komponen warna tersebut.
Apa arti nilai HSL?
H adalah rona (hue), biasanya bernilai antara 0 dan 359 derajat. S adalah saturasi dan L adalah tingkat kecerahan, keduanya dinyatakan dalam persen.
Apakah pipet warna berfungsi di semua browser?
Dukungannya tergantung pada browser dan lingkungan. Di lingkungan yang tidak mendukung, gunakan input warna atau warna preset sebagai gantinya.
Bisakah warna diedit setelah memilih preset?
Ya. Setelah memilih preset, sesuaikan nilai HEX, RGB, atau HSL atau transparansi untuk mengatur warna lebih lanjut.
Nilai apa yang disalin oleh tombol salin?
Setiap tombol salin menyalin nilai warna saat ini dalam format tersebut. Anda bisa menyalin hanya nilai HEX, RGB, atau HSL yang Anda butuhkan.
Apakah warna yang saya masukkan dikirim ke server?
Tidak. Seluruh pemrosesan dilakukan secara lokal di browser Anda. Nilai warna dan hasil konversi tidak pernah dikirim ke server.
Alat Terkait
