AbraCalc

Konverter Warna Hex ke HSL

Konversi kode warna hex CSS ke HSL (hue, saturation, lightness) dalam satu klik.

Sematkan alat ini di situs Anda
Kutip alat ini

APA

AbraCalc. (2026). Konverter Warna Hex ke HSL [Online calculator]. Retrieved from https://abracalc.com/id/hex-ke-hsl/

BibTeX

@misc{abracalc-hex-ke-hsl, author = {AbraCalc}, title = {Konverter Warna Hex ke HSL}, year = {2026}, howpublished = {\url{https://abracalc.com/id/hex-ke-hsl/}} }

Apakah alat ini menjawab pertanyaan Anda?

Cara menggunakan alat ini

  1. Masukkan kode warna hex 6-digit (contoh #ff5733). Tanda # di depan bersifat opsional.
  2. Alat ini mengonversinya ke HSL: hue dalam derajat, saturation dan lightness sebagai persentase.
  3. Salin string hsl() ke CSS atau stylesheet Anda.

Tempel kode warna hex dan dapatkan nilai HSL yang setara untuk digunakan dalam fungsi CSS hsl() atau alat desain.

Rumus

Expand a 3-digit hex to 6 digits if needed (e.g. #abc#aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.

Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.

Pertanyaan umum

Mengapa mengonversi hex ke HSL?
HSL lebih mudah dipahami saat menyesuaikan kecerahan atau saturasi. Anda dapat mempertahankan hue tetap dan mengubah saturation/lightness untuk membuat tint dan shade.
Apakah ini mendukung hex 3-digit?
Ya — #abc diperlakukan sebagai #aabbcc.

Referensi dan sumber