Alat ini menerima semua format hex CSS: 6 digit #3366cc, singkatan 3 digit #36c, serta format 4 dan 8 digit dengan channel alpha, dengan atau tanpa #. Hasilnya menampilkan string hsl() atau hsla(), nilai polos dan rincian per komponen - plus baris konversi balik HSL ke HEX kalau Anda butuh arah sebaliknya. Semua proses berjalan di browser Anda - tanpa unggah, tanpa akun, tanpa batasan.
Konversi HEX ke HSL
Berjalan sepenuhnya di browser Anda - tanpa unggah, tanpa daftar.
CSS
hsl(220, 60%, 50%)Cara konversinya
Hue220
Saturation60%
Lightness50%
Butuh arah sebaliknya? HSL ke HEX
#3366ccBagaimana cara konversi HEX ke HSL?
Kode hex dibaca dulu sebagai red, green dan blue (0-255), lalu warna itu dinyatakan ulang sebagai hue, saturation dan lightness. Hue adalah sudut pada roda warna (0-360), saturation menunjukkan seberapa pekat warnanya (0-100%) dan lightness menunjukkan seberapa terang (0-100%). #3366cc menjadi hsl(220, 60%, 50%). Alat ini melakukannya secara instan saat Anda mengetik.
Cara pakai
- 1Masukkan kode hex. Ketik atau tempel warna hex seperti #3366cc (atau #36c), atau pilih lewat swatch warna. Tanda # boleh dilewat.
- 2Baca nilai HSL. String hsl(), nilai polos dan pratinjau warna langsung diperbarui saat Anda mengetik, lengkap dengan rincian per komponen untuk hue, saturation dan lightness.
- 3Salin format yang dibutuhkan. Klik Salin di sebelah string hsl() atau nilai mentahnya. Butuh arah sebaliknya? Masukkan hue, saturation dan lightness di bawah untuk mendapatkan kode hex-nya lagi.
Cocok untuk siapa
- Front-end developer yang mengubah kode hex menjadi hsl() supaya bisa mengatur ulang lightness untuk hover dan focus state tanpa harus memilih warna baru.
- Desainer yang menyusun palet dan mempertahankan hue tetap sambil menggeser saturation dan lightness untuk membuat tint dan shade dari satu warna brand.
- Penulis theme dan design token yang menyimpan warna sebagai HSL karena jauh lebih mudah dibaca dan diubah manual dibanding string hex.
- Siapa pun yang menyamakan warna antar alat yang satu minta hex (Figma, kebanyakan CSS) dan yang lain minta HSL (helper SCSS, beberapa sistem warna).
Tanya jawab
Apakah konversi HEX ke HSL ini gratis?
Ya - 100% gratis tanpa perlu daftar dan tanpa batasan. Semua proses berjalan di browser Anda.
Apakah warna saya diunggah ke suatu tempat?
Tidak. Konversinya cuma JavaScript biasa yang berjalan di perangkat Anda - tidak ada yang dikirim ke server, dan tetap berfungsi offline setelah halaman selesai dimuat.
Apa itu HSL?
HSL adalah singkatan dari hue, saturation dan lightness. Hue adalah sudut dari 0 sampai 360 derajat pada roda warna, saturation menunjukkan seberapa pekat warna dari 0 sampai 100 persen, dan lightness berjalan dari 0 persen (hitam) melewati warna murni di 50 persen sampai 100 persen (putih).
Bagaimana cara konversi hex ke HSL secara manual?
Ubah hex menjadi red, green dan blue lalu bagi masing-masing dengan 255. Ambil nilai max dan min dari ketiganya: lightness adalah rata-ratanya, saturation adalah (max - min) dibagi (1 - |2L - 1|), dan hue didapat dari channel mana yang jadi max, lalu diskalakan ke 0-360 derajat.
Apakah mendukung singkatan 3 digit seperti #36c?
Ya. Pada singkatan CSS setiap digit digandakan, jadi #36c menjadi #3366cc dan dikonversi ke hsl(220, 60%, 50%). Format 4 digit bekerja sama, dengan digit terakhir sebagai alpha.
Bagaimana cara alat ini menangani transparansi (HSLA)?
Kode hex 8 digit membawa alpha di pasangan terakhirnya. Byte tersebut (0-255) dibagi 255 untuk mendapatkan alpha 0-1 yang diminta hsla(), dibulatkan ke tiga desimal - sehingga #3366cc80 menjadi hsla(220, 60%, 50%, 0.502).
Bisakah HSL dikonversi kembali ke HEX?
Bisa. Gunakan baris HSL ke HEX di bawah hasil: masukkan hue (0-360) plus saturation dan lightness (0-100%) dan hasilnya langsung berupa kode hex. Nilai di luar rentang akan dipangkas.
Kenapa HSL lebih berguna dibanding hex?
HSL mudah dibaca manusia: Anda bisa mencerahkan warna dengan menaikkan L, meredupkannya dengan menurunkan S, atau mengganti keluarganya dengan mengubah H - semua tanpa harus menebak-nebak digit hex. Itu membuatnya ideal untuk menyusun palet yang konsisten, hover state dan design token.