Konverter HEX ke HSL

Cara Kerja Konversi HEX ke HSL

Halaman ini menerima kode warna heksadesimal (HEX) — baik format enam digit penuh seperti #1E90FF maupun notasi singkat tiga digit seperti #abc — dan mengembalikan padanannya dalam format HSL (Hue, Saturation, Lightness). Konversi dilakukan sepenuhnya di dalam peramban Anda; tidak ada data yang dikirimkan atau disimpan.

Kode HEX sebenarnya adalah representasi basis‑16 dari komponen RGB. Setiap pasangan digit heksadesimal (misal 1E, 90, FF) dikonversi ke nilai desimal 0–255. Notasi tiga digit adalah bentuk singkat: #abc diperluas menjadi #aabbcc. Jadi #abc sama dengan #aabbcc. Halaman ini menerima kedua format, dengan atau tanpa tanda pagar (#).

Setelah nilai RGB diketahui (misal R=30, G=144, B=255 untuk #1E90FF), konversi ke HSL mengikuti rumus standar:

1. Hue (H) dihitung sebagai sudut pada lingkaran warna, 0°–360°. Untuk #1E90FF, hue = 210°.
2. Saturation (S) dinyatakan dalam persen (0%–100%), mengukur intensitas warna. #1E90FF memiliki saturasi 100%.
3. Lightness (L) juga dalam persen, mengukur kecerahan dari hitam (0%) ke putih (100%). #1E90FF memiliki light 56%.

Hasil akhir HSL yang ditampilkan: hsl(210°, 100%, 56%). Semua perhitungan dilakukan secara real‑time saat Anda mengetik, dan keenam format warna (HEX, RGB, HSV, CMYK, LAB) diperbarui serentak.

Mengapa HSL Lebih Intuitif daripada HEX

HEX adalah notasi RGB mentah — kompak dan banyak digunakan dalam CSS serta alat desain, tetapi tidak dirancang untuk penyesuaian yang mudah dipahami manusia. Mengubah nilai #1E90FF menjadi #1E9AFF (sedikit lebih terang) memerlukan perhitungan heksadesimal manual.

HSL dibangun untuk penalaran manusia:

• Hue (0–360) mewakili posisi pada roda warna: merah 0°, kuning 60°, hijau 120°, cyan 180°, biru 240°, magenta 300°.
• Saturation (0%–100%) mengontrol intensitas: 0% = abu‑abu, 100% = warna jenuh penuh.
• Lightness (0%–100%) mengontrol kecerahan: 0% = hitam, 100% = putih, 50% = warna murni (pada saturasi 100%).

Dengan HSL, Anda dapat menyesuaikan lightness saja tanpa mengubah hue — sangat berguna untuk membuat variasi tombol (hover, aktif) atau tema terang/gelap. Misalnya, dari hsl(210°, 100%, 56%) Anda bisa membuat versi lebih gelap: hsl(210°, 100%, 40%) — hue tetap biru yang sama. Dengan HEX, perubahan serupa membutuhkan manipulasi tiga saluran RGB sekaligus.

Format Warna Lain yang Ditampilkan

Selain HSL, halaman ini menampilkan warna dalam lima format lain:

Semua format diperbarui bersamaan saat Anda memasukkan kode HEX. Ini memudahkan menyalin format yang sesuai untuk kebutuhan spesifik — misalnya RGB untuk CSS konvensional, HSV untuk pemilihan warna dalam software desain, atau LAB untuk analisis warna ilmiah.

Catatan penting: CMYK yang ditampilkan hanyalah estimasi berbasis layar dan tidak boleh digunakan untuk cetak profesional tanpa kalibrasi. Nilai LAB juga merupakan perkiraan berdasarkan profil warna sRGB standar.

Aturan dan Kasus Ujung (Edge Cases)

Halaman ini hanya menerima kode HEX yang valid — enam digit atau tiga digit, dengan atau tanpa #. Masukan yang tidak valid akan memicu pesan kesalahan: "Masukkan kode hex seperti #4f46e5 atau #abc."

Beberapa kasus ujung yang perlu dipahami:

• Kode tiga digit otomatis diperluas. #f00 menjadi #ff0000 (merah murni).
• HEX tanpa # tetap diproses. 4f46e5 sama dengan #4f46e5.
• Huruf kapital vs kecil tidak masalah. #1E90FF dan #1e90ff identik.
• Tidak ada saluran alpha. Standar HEX (enam/tiga digit) tidak membawa informasi transparansi. HSL juga tidak memiliki alpha. Semua warna dianggap opak 100%.
• Gamut warna. Jika Anda beralih ke tab LAB atau CMYK dan memasukkan nilai di luar gamut tampilan (misal warna yang tidak bisa direproduksi monitor), halaman akan menyesuaikan ke warna terdekat yang bisa ditampilkan. Mengonversi kembali ke HEX dapat menghasilkan pergeseran kecil dari nilai asli.

Semua konversi bersifat deterministik dan sepenuhnya lokal — tidak ada panggilan server.

Siapa yang Membutuhkan Alat Ini

Front‑end developer yang menulis CSS sering mendapat kode HEX dari mockup desain. Mengonversinya ke HSL memungkinkan mereka membuat variasi hover state, tema gelap/terang, atau skema warna turunan hanya dengan mengubah lightness. Contoh: dasar hsl(210°, 100%, 56%) → hover hsl(210°, 100%, 40%) — cukup ubah parameter ketiga.

UI/UX designer yang terbiasa berpikir dalam hue, saturation, dan lightness dapat mencocokkan warna merek yang diberikan dalam HEX, lalu mengeksplorasi variasi harmonis.

Pembangun palet warna — HSL memudahkan penciptaan skema komplementer (hue berseberangan 180°), analog (hue berdekatan), atau monokromatik (hue tetap, saturasi/lightness berubah).

Auditor aksesibilitas web yang perlu memeriksa rasio kontras menurut WCAG sering menemukan HSL lebih intuitif daripada HEX atau RGB. Dengan HSL, mereka bisa menambah lightness pada teks di latar gelap tanpa mengubah hue, sehingga kontras meningkat tanpa mengubah karakter warna.

Siapa pun yang bekerja dengan warna akan mendapat manfaat dari konversi instan dan tampilan serentak di enam format berbeda — menghemat waktu dibandingkan menghitung manual atau menggunakan alat terpisah.

Pertanyaan yang Sering Diajukan (FAQ)

Apa itu kode HEX tiga digit, dan bagaimana cara kerjanya?
Kode tiga digit adalah singkatan dari enam digit. Setiap digit digandakan: #abc → #aabbcc. Misalnya #f00 = #ff0000 (merah), #abc = #aabbcc (abu-abu biru). Halaman ini memperluasnya secara otomatis sebelum konversi.

Apa yang terjadi jika saya memasukkan kode HEX yang tidak valid?
Halaman akan menampilkan kesalahan: "Masukkan kode hex seperti #4f46e5 atau #abc." Tidak ada hasil yang dihasilkan hingga input diperbaiki.

Dapatkah saya menggunakan HSL yang dihasilkan langsung di CSS?
Ya. HSL adalah format warna CSS standar. Anda dapat menulis color: hsl(210°, 100%, 56%); atau color: hsl(210 100% 56%); (tanpa koma, CSS modern). CSS juga mendukung fungsi hsl() dan hsla() (dengan alpha), tetapi HSL di sini tanpa alpha.

Apa perbedaan HSL dan HSV?
Keduanya menggunakan hue yang sama (0–360). Perbedaannya pada komponen ketiga: HSL menggunakan lightness (kecerahan dari hitam ke putih, dengan warna murni di 50%), sementara HSV menggunakan value (kecerahan maksimum warna, dengan hitam di 0%). HSL lebih intuitif untuk penyesuaian kecerahan yang seragam; HSV lebih cocok untuk pemilihan warna dalam software grafis tradisional.

Mengapa CMYK hanya estimasi dan tidak akurat untuk cetak?
CMYK adalah model warna subtraktif untuk tinta cetak, sedangkan HEX/RGB/HSL adalah model aditif untuk layar. Konversi langsung dari RGB ke CMYK memerlukan profil ICC dan pengetahuan tentang kondisi cetak (jenis kertas, tinta). Estimasi di sini menggunakan profil sRGB ke CMYK generik, tidak menggantikan proofing profesional.

Apakah data saya aman saat menggunakan alat ini?
Ya. Semua konversi dilakukan sepenuhnya di peramban Anda menggunakan JavaScript murni. Tidak ada kode HEX atau data lain yang dikirim ke server, disimpan, atau dilacak.