Konverter HEX ke HSL

Konverter HEX ke HSL mengubah kode heksadesimal seperti #3B82F6 menjadi nilai HSL seperti hsl(217, 91%, 60%). HSL menggambarkan warna lewat Rona (warna itu sendiri, 0–360°), Saturasi (seberapa cerah, 0–100%), dan Kecerahan (seberapa terang, 0–100%) — model yang jauh lebih dekat dengan cara orang memikirkan warna dibanding digit HEX mentah.

Begitu warna berada dalam HSL, membangun palet menjadi intuitif: pertahankan rona yang sama dan geser kecerahan untuk warna muda dan gelap, atau ubah hanya saturasi agar lebih berani atau lebih kalem.

Mengapa mengonversi ke HSL

Warna muda & gelap

Naikkan atau turunkan kecerahan untuk menghasilkan varian lebih terang dan lebih gelap yang konsisten dari satu warna dasar.

Atur kecerahan warna

Setel saturasi saja agar sebuah warna mencolok atau melembutkannya untuk latar dan status UI.

Bangun palet

Putar rona dalam langkah yang sama untuk membuat skema warna yang harmonis dan merata.

Cara mengonversi HEX ke HSL

Masukkan kode HEX

Ketik atau tempel nilai HEX — dengan atau tanpa #. Format singkatan 3 digit (#F00) dan 6 digit (#FF0000) sama-sama didukung.

Baca hasil HSL

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

Atau pilih warna

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

Salin & gunakan

Salin string hsl() untuk CSS Anda. Panel di bawah juga menampilkan warna sebagai HEX, RGB, HSV, dan CMYK.

Fitur

Memahami kanal HSL

Kanal	Rentang	Yang dikendalikan
Rona	0–360°	Posisi warna pada roda: 0° merah, 120° hijau, 240° biru.
Saturasi	0–100%	Intensitas: 0% abu-abu, 100% versi paling cerah.
Kecerahan	0–100%	Keterangan: 0% hitam, 50% rona murni, 100% putih.

Konversi instan

Hasil langsung di browser, diperbarui saat Anda mengetik — tanpa muat ulang, tanpa pengiriman ke server.

Singkatan & huruf

HEX 3 digit diperluas otomatis dan huruf besar-kecil diabaikan.

Pratinjau & pemilih

Kotak warna langsung plus pemilih warna bawaan untuk memilih secara visual.

Semua format sekaligus

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

Pertanyaan yang sering diajukan

Apa itu HSL?

HSL adalah singkatan dari Rona, Saturasi, dan Kecerahan. Rona adalah jenis warna (0–360°), Saturasi adalah seberapa cerah (0–100%), dan Kecerahan adalah seberapa terang (0–100%).

Kenapa pakai HSL alih-alih HEX atau RGB?

HSL lebih intuitif bagi manusia. Anda bisa membuat warna lebih terang atau gelap dengan mengubah kecerahan saja, dan versi lebih berani atau lembut dengan mengubah saturasi saja — tanpa menebak digit HEX.

Apakah HSL didukung di CSS?

Ya. Semua browser modern mendukung penuh fungsi warna hsl() dan hsla(), jadi Anda bisa menempelkan keluaran langsung ke stylesheet.

Apakah konversi HEX ke HSL kehilangan presisi?

Nilai HSL dibulatkan ke bilangan bulat agar mudah dibaca, jadi konversi balik bisa berbeda satu unit per kanal. Warna yang terlihat praktis identik.

Bagaimana membuat versi lebih terang dari warna saya?

Pertahankan rona dan saturasi yang sama, lalu naikkan persentase kecerahan. Untuk versi lebih gelap, turunkan saja — inilah alasan HSL sangat praktis untuk palet.