Konversi Kode Warna HEX, RGB, dan HSL
HSL238.7°, 83.5%, 66.7%
Nama WarnaIndigo 500
Advertisement
Google AdSense Placeholder
Mengonversi Kode Warna HEX, RGB, dan HSL
Format Warna yang Didukung Tool Ini
Konverter ini menerjemahkan warna antara tiga format yang umum dipakai di web dan desain: HEX, RGB, dan HSL. Kamu bisa memasukkan kode HEX (3 atau 6 digit) atau mengisi nilai RGB 0–255; tool lalu menampilkan pratinjau warna, nilai HSL, dan nama warna bila cocok dengan kamus bawaannya. Semua perhitungan berjalan instan di browser.
Cara Kerja Konversi dan Hasil yang Ditampilkan
- Input HEX 3 atau 6 digit, contoh #f00 dan #ff0000, dengan konversi otomatis ke RGB
- Input RGB per kanal merah, hijau, dan biru dengan rentang 0–255
- Perhitungan HSL otomatis: hue dalam derajat, saturasi dan lightness dalam persen
- Pratinjau warna real-time yang ikut berubah saat input diganti
- Nama warna (Inggris) bila HEX cocok dengan kamus warna bawaan
- Salin semua format sekaligus: HEX, RGB, HSL, dan nama warna
Kapan Perlu Mengonversi Kode Warna?
- Mendapatkan kode warna dalam tiga format dari satu warna tanpa membuka beberapa situs
- Menyamakan warna antar aplikasi desain dan kode CSS
- Memahami hubungan nilai HEX dan RGB saat melakukan tweak warna
- Membantu memilih variasi warna lewat nilai HSL tanpa menebak-nebak
Cara Menggunakan Konverter Warna
- 1Ketik kode HEX pada kolom HEX (contoh: #6366f1) atau ubah nilai R, G, B
- 2Amati pratinjau warna dan nilai HSL yang diperbarui otomatis
- 3Lihat nama warna bila tersedia di panel hasil
- 4Klik Salin Semua untuk menyalin gabungan HEX, RGB, HSL, dan nama warna
- 5Gunakan Reset untuk kembali ke warna bawaan
Memilih Format Warna untuk CSS dan Desain
- Contoh dasar: merah murni adalah HEX #ff0000, RGB 255,0,0, dan HSL 0°, 100%, 50%
- HEX 3 digit adalah bentuk singkat: #f00 sama dengan #ff0000, #0af sama dengan #00aaff
- Di CSS, pilih format sesuai kebutuhan: HEX untuk nilai statis, dan hsl() atau rgb() bila ingin mengubah transparansi lewat fungsi warna
- Hue HSL berada pada rentang 0–360 derajat, sehingga memudahkan mencari warna senada dengan mengubah satu angkanya
Pertanyaan Umum
HEX adalah kode warna berbasis heksadesimal seperti #FF0000 untuk merah. RGB menyatakan warna dari intensitas merah, hijau, dan biru 0–255, misalnya rgb(255,0,0). HSL menyatakan hue (0–360°), saturasi, dan lightness dalam persen, misalnya hsl(0°, 100%, 50%) — lebih intuitif untuk membuat variasi warna.
Ya. Kode 3 digit seperti #f00 otomatis diperluas menjadi #ff0000, dan #0af menjadi #00aaff. Kode 6 digit seperti #6366f1 juga didukung.
Tool mencocokkan HEX dengan kamus warna bawaan yang berisi warna dasar dan beberapa turunan seperti Red 600 atau Indigo 500. Bila kode tidak ada dalam kamus, kolom nama warna menampilkan tanda '-'.
Setiap kanal (R, G, B) menerima angka 0–255. Nilai di luar rentang dibatasi otomatis saat dikonversi kembali ke HEX.
Tombol Salin Semua menyalin empat baris sekaligus: HEX (contoh #6366f1), RGB (99, 102, 241), HSL (238,7°, 83,5%, 66,7%), dan nama warna bila tersedia — siap ditempel ke catatan atau kode.
HSL berguna saat ingin mengubah kecerahan atau kepekatan warna tanpa mengubah hue-nya, misalnya membuat versi lebih terang untuk efek hover. HEX lebih praktis untuk menyalin nilai warna yang sudah pasti.