Konverter HEX ke HSL Ubah kode warna HEX menjadi nilai HSL (Hue, Satuasi, Kecerahan).

🎨

Konverter HEX ke HSL

Ubah kode warna HEX menjadi nilai HSL (Hue, Satuasi, Kecerahan).

Masukkan Warna HEX

Ketik kode warna HEX atau gunakan pemilih warna untuk memilih warna Anda.

Baca Nilai HSL

Lihat nilai Hue (0-360°), Saturation (0-100%), dan Lightness (0-100%) secara instan.

Salin Keluaran HSL

Salin nilai fungsi CSS hsl() untuk digunakan langsung di stylesheet Anda.

Loading tool...

What Is Konverter HEX ke HSL?

Konverter HEX ke HSL mengubah kode warna heksadesimal menjadi model warna HSL (Hue, Saturation, Lightness). Tidak seperti RGB yang menjelaskan warna dengan mencampurkan cahaya merah, hijau, dan biru, HSL menjelaskan warna dengan cara yang lebih intuitif bagi manusia. Hue adalah warna itu sendiri (diukur dalam derajat sekitar roda warna: 0° adalah merah, 120° adalah hijau, 240° adalah biru). Saturation menggambarkan intensitas atau kemurnian warna (0% adalah abu-abu, 100% adalah sangat hidup). Lightness menggambarkan seberapa terang atau gelap warna itu (0% adalah hitam, 50% adalah warna murni, 100% adalah putih). Ini membuat HSL sangat berharga untuk menciptakan palet warna, menyesuaikan kecerahan tanpa menggeser hue, dan menghasilkan skema warna yang harmonis. Desainer dan pengembang sering perlu mengonversi dari HEX (format web standar) ke HSL untuk membuat penyesuaian yang bermakna. Misalnya, menciptakan nuansa yang lebih gelap sangat mudah di HSL - hanya kurangi lightness - sedangkan di HEX atau RGB, Anda harus menyesuaikan semua tiga kanal secara proporsional.

Why Use Konverter HEX ke HSL?

Lihat warna yang dibagi menjadi komponen hue, saturation, dan lightness yang intuitif
Pratinjau warna secara langsung diperbarui saat Anda mengetik kode HEX
Mengeluarkan fungsi hsl() CSS siap untuk digunakan langsung di stylesheet
Mendukung kode input HEX 3-digit dan 6-digit
Berguna untuk memahami dan memanipulasi hubungan warna

Common Use Cases

Desain Palet Warna

Konversi warna HEX merek ke HSL untuk dengan mudah membuat variasi dengan menyesuaikan saturation dan lightness.

Pembuatan Tema

Bangun varian tema terang dan gelap dengan memodifikasi nilai lightness sambil menjaga hue tetap konstan.

Properti Kustom CSS

Simpan nilai HSL sebagai variabel CSS untuk temating warna yang fleksibel: --primary-h, --primary-s, --primary-l.

Penyesuaian Aksesibilitas

Sesuaikan nilai lightness untuk memastikan rasio kontras yang cukup antara teks dan latar belakang.

Technical Guide

Konversi dari HEX ke HSL pertama-tama mendekode string heksadesimal menjadi nilai RGB (0-255), kemudian mengubahnya menjadi HSL. Algoritma memnormalisasi RGB ke rentang 0-1, menemukan nilai maksimum dan minimum kanal, dan menghitung: Lightness = (max + min) / 2. Jika max sama dengan min, warna itu akromatik (abu-abu) dengan hue = 0 dan saturation = 0. Jika tidak, Saturation = delta / (1 - |2L - 1|) di mana delta = max - min. Hue tergantung pada kanal mana yang maksimum: jika merah adalah maksimum, H = (G-B)/delta; jika hijau, H = (B-R)/delta + 2; jika biru, H = (R-G)/delta + 4. Hasilnya dikalikan dengan 60 untuk mengubah ke derajat (0-360). HSL adalah representasi silinder dari kubus RGB, yang membuatnya lebih intuitif untuk manipulasi warna. Salah satu perbedaan penting: lightness HSL 50% mewakili bentuk paling hidup dari setiap hue, sedangkan 0% selalu hitam dan 100% selalu putih. Ini berbeda dengan HSV/HSB di mana nilai 100% (kecerahan) mewakili warna paling hidup.

Tips & Best Practices

1
Lightness HSL sebesar 50% memberikan versi paling murni dari setiap hue - berguna untuk warna palet dasar
2
Desaturasi (menurunkan S) menciptakan nada yang lebih profesional dan tenang
3
HSL ideal untuk temating CSS karena hue, saturation, dan lightness dapat disesuaikan secara independen
4
Nilai R, G, B yang sama dalam HEX selalu menghasilkan H=0, S=0 di HSL (abu-abu murni)
5
CSS modern mendukung hsl() secara native di semua browser - tidak perlu konversi saat runtime

Related Tools

Konverter HEX ke RGB

Ubah kode warna HEX menjadi nilai RGB secara instan dengan pratinjau langsung.

🎨 Color Tools

Konverter HSL ke HEX

Ubah nilai warna HSL menjadi kode HEX dengan penggeser interaktif.

🎨 Color Tools

Konverter RGB ke HSL

Ubah nilai RGB menjadi format warna HSL dengan penggeser interaktif.

🎨 Color Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Pembuat Nuansa Warna

Buat nuansa warna yang lebih gelap dari warna apa pun dengan jumlah langkah yang dapat disesuaikan.

🎨 Color Tools

Frequently Asked Questions

Q Apa itu model warna HSL?

HSL singkatan dari Hue (sudut warna 0-360°), Saturation (intensitas 0-100%), dan Lightness (kecerahan 0-100%). Ini adalah representasi silinder yang lebih intuitif bagi manusia daripada RGB.

Q Mengapa mengonversi HEX ke HSL?

HSL memudahkan pembuatan variasi warna. Anda dapat menerangi, menggelapkan, atau desaturasi warna dengan mengubah satu nilai, sedangkan di HEX Anda harus memodifikasi semua enam karakter.

Q Apakah hsl() didukung di CSS?

Ya, hsl() didukung di semua browser modern dan telah didukung sejak IE9. CSS modern juga mendukung sintaks baru yang dipisahkan oleh spasi: hsl(217 91% 60%).

Q Bagaimana cara menggelapkan warna HEX menggunakan HSL?

Konversi HEX ke HSL, lalu kurangi nilai Lightness. Misalnya, hsl(217, 91%, 60%) digelapkan menjadi hsl(217, 91%, 40%) menciptakan nuansa yang lebih gelap dari biru yang sama.

Q Apa perbedaan antara HSL dan HSV?

HSL dan HSV keduanya menggunakan hue dan saturation, tetapi berbeda dalam komponen ketiga. HSL menggunakan lightness (50% adalah warna murni), sedangkan HSV menggunakan nilai/kecerahan (100% adalah warna murni). HSL lebih umum digunakan di CSS.

About This Tool

Konverter HEX ke HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.