Konverter HSL ke HEX Ubah nilai warna HSL menjadi kode HEX dengan penggeser interaktif.

🎨

Konverter HSL ke HEX

Ubah nilai warna HSL menjadi kode HEX dengan penggeser interaktif.

Atur Slider HSL

Tetapkan Hue (0-360°), Keseimbangan (0-100%), dan Kecerahan (0-100%) menggunakan slider.

Pratinjau Warna

Lihat pratinjau warna yang diperbarui secara real-time saat Anda menyesuaikan setiap nilai.

Salin Keluaran HEX

Salin kode HEX hasil untuk digunakan dalam CSS, alat desain, atau aplikasi apa pun.

Loading tool...

What Is Konverter HSL ke HEX?

Konverter HSL ke HEX mengubah nilai warna Hue, Saturation, dan Lightness menjadi kode warna heksadesimal yang digunakan dalam pengembangan web. HSL adalah model warna ramah manusia di mana Hue merepresentasikan posisi roda warna (merah pada 0°, hijau pada 120°, biru pada 240°), Saturation mengontrol kecerahan (0% adalah abu-abu, 100% adalah warna murni), dan Lightness menetapkan kecerahan (0% adalah hitam, 100% adalah putih). Mengonversi ke HEX menghasilkan kode enam karakter yang diperlukan teknologi web. Konverter ini sangat berguna ketika Anda merancang dengan HSL untuk manipulasi warna intuitif tetapi memerlukan output HEX untuk implementasi. Slider interaktif memungkinkan Anda menjelajahi warna secara spasial - memutar melalui nuansa, menyesuaikan kecerahan, dan mengatur kecerahan - kemudian langsung mendapatkan kode HEX siap web. Konversi ini melibatkan transformasi HSL ke RGB terlebih dahulu, lalu mengkodekan setiap kanal RGB sebagai dua digit heksadesimal.

Why Use Konverter HSL ke HEX?

Slider intuitif untuk rotasi hue, penyesuaian keseimbangan, dan kecerahan
Slider hue secara visual menunjukkan spektrum warna penuh untuk pemilihan warna yang mudah
Pratinjau swatch diperbarui secara instan saat Anda menyesuaikan nilai apa pun
Salin langsung kode HEX hasil untuk pengembangan web
Tidak memerlukan pendaftaran - berjalan sepenuhnya di browser Anda

Common Use Cases

Eksplorasi Warna

Jelajahi roda warna secara intuitif dengan menyesuaikan hue, lalu haluskan dengan keseimbangan dan kecerahan untuk menemukan nuansa yang tepat.

Membangun Tema

Mulai dengan sistem desain berbasis HSL dan konversi warna akhir ke HEX untuk produksi CSS.

Generasi Palet

Pertahankan hue tetap sambil mengubah keseimbangan dan kecerahan untuk membuat nuansa yang harmonis, lalu ekspor sebagai HEX.

Dokumentasi Warna Merek

Dokumentasikan warna merek dalam format HSL (untuk fleksibilitas) dan HEX (untuk implementasi).

Technical Guide

Konversi HSL ke HEX adalah proses dua langkah: HSL → RGB → HEX. Algoritma HSL ke RGB pertama kali menghitung chroma (intensitas warna): C = (1 - |2L - 1|) × S, di mana S dan L berada dalam rentang 0-1. Nilai antara X = C × (1 - |(H/60) mod 2 - 1|) menentukan komponen warna sekunder. Berdasarkan sektor 60° roda hue yang kita masuki, R, G, B ditugaskan dari C, X, dan 0. Akhirnya, penyesuaian kecerahan m = L - C/2 ditambahkan ke semua kanal. Nilai R, G, B yang dihasilkan (0-1) diskalakan ke 0-255 dan dikonversi menjadi string heksadesimal dua digit. Kasus tepi termasuk: warna akromatik (S=0) di mana R=G=B=L×255; hitam murni (L=0) menghasilkan #000000; dan putih murni (L=100%) menghasilkan #FFFFFF. Algoritma ini deterministik dan tanpa kerugian untuk 16,7 juta warna yang dapat direpresentasikan dalam RGB 8-bit-per-kanal. Memahami pipeline ini adalah kunci untuk manipulasi warna programatis dalam JavaScript, Python, dan bahasa lainnya.

Tips & Best Practices

1
Tetapkan kecerahan ke 50% untuk versi paling hidup dari hue apa pun
2
Mengurangi keseimbangan menuju 0% menciptakan nuansa yang elegan dan tenang untuk desain profesional
3
Warna komplementer berjarak tepat 180° di roda warna
4
Kecerahan 0% selalu menghasilkan #000000 terlepas dari hue dan keseimbangan
5
Untuk aksesibilitas web, pastikan kontras minimal 4,5:1 - manipulasi kecerahan untuk mencapai ini

Related Tools

Konverter RGB ke HEX

Ubah nilai warna RGB menjadi kode HEX dengan penggeser dan pratinjau langsung.

🎨 Color Tools

Konverter HEX ke HSL

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

🎨 Color Tools

Konverter HSL ke RGB

Ubah nilai HSL menjadi RGB dengan penggeser interaktif dan pratinjau langsung.

🎨 Color Tools

Pemilih Warna

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

🎨 Color Tools

Penghasil Warna Tint

Buat warna tint yang lebih terang dari warna apa pun dengan jumlah langkah yang dapat disesuaikan.

🎨 Color Tools

Frequently Asked Questions

Q Bagaimana HSL berbeda dari RGB?

RGB mendefinisikan warna dengan mencampurkan cahaya merah, hijau, dan biru. HSL menjelaskan warna oleh hue (warna), keseimbangan (intensitas), dan kecerahan (kecerahan). HSL lebih intuitif bagi manusia untuk memahami dan memanipulasi.

Q Bisakah saya mendapatkan nilai HEX yang tepat dari HSL?

Ya, konversi tersebut deterministik. Namun, karena nilai HSL dapat berupa pecahan sementara HEX menggunakan bilangan bulat (0-255 per kanal), beberapa perbedaan HSL yang sangat halus mungkin dibulatkan ke nilai HEX yang sama.

Q Apa nilai HSL yang menghasilkan merah murni?

Merah murni adalah hsl(0, 100%, 50%) yang dikonversi menjadi #FF0000. Hue 0° adalah merah, keseimbangan 100% berarti sangat hidup, dan kecerahan 50% berarti tidak menggelapkan atau mencerahkan.

Q Apakah HSL lebih baik daripada RGB untuk desain?

Untuk eksplorasi desain, ya. HSL memungkinkan Anda untuk mengontrol warna, intensitas, dan kecerahan secara independen. Ini membuat pembuatan nuansa, bayangan, dan palet harmonis jauh lebih intuitif daripada menjuggling nilai RGB.

Q Apa rentang nilai HSL?

Hue: 0-360 derajat (posisi roda warna). Keseimbangan: 0-100% (abu-abu hingga hidup). Kecerahan: 0-100% (hitam hingga putih). Ketiga nilai ini secara unik mendefinisikan setiap warna.

About This Tool

Konverter HSL ke HEX 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.