Konversi HEX ke HSL Online
Konversi warna HEX ke HSL untuk CSS modern secara instan, langsung di browser Anda.
Mengapa menggunakannya
HEX ke HSL: jembatan antara desain dan kode CSS modern
Hasil siap pakai untuk CSS
Format hsl() kompatibel dengan semua browser modern dan variabel CSS Custom Properties.
Privat
Tanpa server, tanpa log. Konversi berlangsung sepenuhnya di browser Anda.
Presisi standar
Algoritma konversi mengikuti spesifikasi W3C CSS Color Level 4.
Instan
Hasil ditampilkan secara real-time saat Anda mengetik kode HEX.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Masukkan kode HEX
Ketik kode warna heksadesimal: #RRGGBB atau #RGB. Anda juga bisa menggunakan nama warna CSS seperti coral, teal, atau goldenrod. Konverter secara otomatis mendeteksi formatnya.
Dapatkan nilai HSL
Konverter menghitung hue (H) dalam derajat (0 hingga 360), saturasi (S) sebagai persentase (0 hingga 100%), dan kecerahan (L) sebagai persentase (0 hingga 100%), mengikuti algoritma CSS standar.
Gunakan hasilnya dalam CSS
Salin hasil dalam format hsl(11, 100%, 60%) atau sebagai variabel CSS: --color: hsl(11deg 100% 60%). Siap ditempel langsung ke stylesheet atau design token Anda.
FAQ
Ada pertanyaan?
HSL (Hue, Saturation, Lightness) adalah model warna yang mendeskripsikan warna secara lebih intuitif bagi manusia dibandingkan RGB. Hue (H) adalah sudut pada roda warna (0 derajat = merah, 60 derajat = kuning, 120 derajat = hijau, 180 derajat = sian, 240 derajat = biru, 300 derajat = magenta, 360 derajat = merah). Saturation (S) mengontrol intensitas warna: 0% adalah abu-abu murni, 100% adalah warna paling hidup. Lightness (L) mengontrol kecerahan: 0% adalah hitam, 50% adalah warna murni, 100% adalah putih.
HSL dan HSV (juga disebut HSB, yaitu Hue, Saturation, Brightness) adalah dua cara berbeda untuk mengatur ulang ruang warna RGB ke koordinat silindris. Perbedaan utamanya ada pada sumbu kecerahan: dalam HSL, L=50% adalah warna paling murni dan tersaturasi; dalam HSV, V=100% adalah warna murni. Ini berarti dalam HSV, untuk mendapatkan putih Anda memerlukan V=100% dan S=0%, sementara dalam HSL cukup dengan L=100% tanpa memandang nilai S. Photoshop dan kebanyakan alat desain menggunakan HSB/HSV; CSS menggunakan HSL.
HSL lebih disukai dalam CSS karena memungkinkan penyesuaian warna yang sangat intuitif menggunakan variabel CSS. Untuk menggelapkan warna tanpa mengubah hue-nya: hsl(var(--hue), var(--sat), calc(var(--light) - 10%)). Untuk membuat tema terang/gelap: cukup ubah L dari 30% menjadi 70%. Untuk status hover: tambahkan S sebesar 10%. Sebaliknya, melakukan hal yang sama dalam RGB mengharuskan penghitungan ulang nilai R, G, B baru untuk setiap penyesuaian. CSS Custom Properties dan fungsi calc() menjadikan HSL sebagai model ideal untuk sistem desain dinamis dan theming.
Dalam HSL, kecerahan (L) langsung mengontrol kecerahan warna tanpa memengaruhi hue atau saturasi. Untuk menggelapkan: kurangi L (misalnya dari 60% menjadi 40%). Untuk mencerahkan: tambahkan L (misalnya dari 40% menjadi 70%). Untuk membuat bayangan warna, pertahankan H dan S tetap, hanya ubah nilai L. Contoh CSS praktis: .btn { background: hsl(220, 90%, 50%); } .btn:hover { background: hsl(220, 90%, 40%); } .btn:active { background: hsl(220, 90%, 30%); }. Ini tidak mungkin dilakukan dengan semudah ini menggunakan nilai RGB atau HEX langsung.
Warna komplementer adalah warna yang berlawanan satu sama lain pada roda warna, terpisah 180 derajat. Dalam HSL ini mudah dihitung: komplemen dari hsl(30, 80%, 50%) adalah hsl(210, 80%, 50%), cukup tambahkan 180 pada hue modulo 360. Skema warna harmonis juga mudah: triadik (H, H+120, H+240 derajat), persegi (H, H+90, H+180, H+270 derajat), analogis (H-30, H, H+30 derajat). Sifat ini menjadikan HSL sebagai model pilihan untuk generator palet warna dan alat desain sistem warna.
HSL: sejarah model warna dan adopsinya dalam CSS
Model warna HSL (Hue, Saturation, Lightness) diusulkan oleh Joblove dan Greenberg pada tahun 1978 dalam makalah mereka Color spaces for computer graphics yang diterbitkan dalam prosiding SIGGRAPH. Tujuannya adalah menciptakan ruang warna yang lebih intuitif bagi manusia dibandingkan model RGB, yang mengharuskan pengguna berpikir dalam campuran cahaya primer alih-alih properti warna perseptual. Model saudara HSV diusulkan secara bersamaan oleh Alvy Ray Smith, juga pada tahun 1978. Kedua model tersebut merepresentasikan ruang warna RGB sebagai silinder dalam koordinat polar: sumbu vertikal adalah kecerahan atau nilai, radius adalah saturasi, dan sudutnya adalah hue.
Roda warna dan sudut hue dalam HSL memiliki sejarah yang jauh mendahului komputer. Roda warna tradisional seniman berdasarkan pigmen menempatkan merah, biru, dan kuning sebagai warna primer dengan warna komplementernya di posisi berlawanan. Roda warna cahaya (RGB) memiliki susunan yang berbeda: merah di 0 derajat, kuning di 60 derajat, hijau di 120 derajat, sian di 180 derajat, biru di 240 derajat, magenta di 300 derajat. Sistem Munsell (1905), yang merupakan pendahulu sistem modern, mengatur warna dalam tiga dimensi dengan 10 hue utama dan 10 langkah nilai serta chroma, dan diadopsi oleh USDA untuk mengklasifikasikan warna tanah (Soil Survey Manual, 1975).
CSS mengadopsi HSL dalam CSS Color Level 3 (rekomendasi W3C, 2011) dengan fungsi hsl(). Sebelum CSS3, developer web hanya bisa menggunakan HEX dan rgb() untuk menentukan warna, sehingga sangat sulit membuat variasi warna yang sistematis. CSS Custom Properties (variabel CSS, Level 4, dukungan universal sejak 2017) sangat memperkuat kegunaan HSL: mendefinisikan --primary-hue: 220 dan --primary-sat: 90%, lalu membangun seluruh palet dengan hsl(var(--primary-hue), var(--primary-sat), L%) memungkinkan perubahan seluruh palet hanya dengan mengubah dua variabel. Framework seperti Tailwind CSS (sejak v3) dan sistem desain seperti Material Design 3 (Google, 2021) menggunakan HSL atau variannya untuk mendefinisikan sistem token warna mereka.