Konverter RGB ke HSL

Konverter RGB ke HSL mengubah nilai RGB seperti rgb(59, 130, 246) menjadi nilai HSL seperti hsl(217, 91%, 60%). Keduanya menggambarkan warna yang sama, tetapi RGB melakukannya lewat tiga kanal cahaya, sedangkan HSL menggambarkannya sebagai Rona, Saturasi, dan Kecerahan — cara yang jauh lebih intuitif untuk menyetel dan memvariasikan warna.

Mengonversi RGB ke HSL adalah langkah pertama saat Anda ingin mencerahkan, menggelapkan, atau mengurangi saturasi warna secara terprogram — operasi itu sederhana dalam HSL tetapi rumit dalam RGB mentah.

Mengapa mengonversi ke HSL

Atur kecerahan

Ubah kecerahan saja untuk membuat status hover, aktif, dan nonaktif yang konsisten dari satu warna dasar.

Kendalikan intensitas

Setel saturasi agar warna lebih mencolok atau melembutkannya untuk latar yang halus.

Palet harmonis

Geser rona dalam langkah yang sama untuk membuat skema warna komplementer atau analog.

Cara mengonversi RGB ke HSL

Masukkan nilai RGB

Ketik ketiga kanal Anda — misalnya 59, 130, 246. Koma atau spasi sama-sama berfungsi, dan Anda boleh membungkus nilai dalam rgb(...).

Baca hasil HSL

Nilai HSL dihitung seketika saat Anda mengetik, dan kotak warna langsung diperbarui agar Anda bisa memverifikasi warna secara visual.

Atau pilih warna

Klik kotak pratinjau untuk membuka pemilih warna bawaan dan memilih warna secara visual — kolom RGB dan HSL diperbarui otomatis.

Salin & gunakan

Salin string hsl() langsung ke CSS Anda. Panel di bawah juga menampilkan HEX, RGB, HSV, dan CMYK.

Fitur

RGB vs HSL

RGB

Tiga kanal cahaya

Sesuai cara layar memancarkan warna
Sulit "mencerahkan" tanpa menggeser rona
Nilai 0–255 per kanal

HSL

Model ramah manusia

Kecerahan dan saturasi adalah kendali terpisah
Mudah membuat warna muda, gelap, dan palet
Rona 0–360°, S dan L 0–100%

Keluaran real-time

Hasil diperbarui saat Anda mengetik, sepenuhnya di browser.

Semua format sekaligus

HEX, RGB, HSL, HSV, dan CMYK ditampilkan bersamaan untuk setiap warna.

Pertanyaan yang sering diajukan

Apa perbedaan antara RGB dan HSL?

RGB mendefinisikan warna dengan mencampur cahaya merah, hijau, dan biru. HSL mendefinisikan warna yang sama melalui rona (jenis warna), saturasi (intensitas), dan kecerahan (keterangan) — penyusunan ulang data yang sama dalam istilah yang lebih intuitif.

Kapan saya harus pakai HSL?

Pakai HSL saat Anda perlu membuat variasi warna — versi lebih terang atau gelap, atau lebih dan kurang cerah — tanpa mengubah rona dasar. Ideal untuk tema dan status UI.

Apakah konversinya akurat?

Ya. Perhitungannya presisi; input RGB yang sama selalu menghasilkan HSL yang sama. Nilai HSL dibulatkan ke bilangan bulat agar mudah dibaca, yang bisa berbeda satu unit pada konversi bolak-balik tetapi tampak identik.

Nilai RGB apa yang valid?

Masing-masing dari tiga kanal harus bilangan bulat 0 hingga 255. Masukkan dipisah koma atau spasi, dengan atau tanpa pembungkus rgb().

Bisakah saya menempel keluaran HSL langsung ke CSS?

Bisa. Keluaran memakai sintaks standar hsl(h, s%, l%) yang didukung setiap browser modern, jadi langsung masuk ke stylesheet.