HSL
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/hsl/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/hsl/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/hsl/)Use the native HTML custom element.
Model warna silindris yang mendeskripsikan warna menggunakan rona, saturasi, dan kecerahan, dirancang untuk pemilihan warna yang intuitif.
HSL represents color as an angle on the color wheel (hue, 0-360), a percentage of color intensity (saturation, 0-100%), and a percentage of lightness (0-100% where 0% is black and 100% is white). At 50% lightness, the pure hue is displayed. HSL is widely used in CSS (the hsl() function) because it makes it easy to create tints, shades, and tones by adjusting a single parameter. It is more intuitive than RGB for design work but has the limitation of not being perceptually uniform, meaning equal numeric changes do not always produce equal visual changes.
Coba Sekarang
Artikel Terkait
CSS color-mix(): Padukan Warna Secara Native di Browser
Pelajari CSS color-mix() untuk memadukan warna native di browser. Kuasai sintaks, ruang warna, dan buat palet dinamis tanpa JavaScript.
Membangun Color Picker Web Component dari Awal
Bangun color picker aksesibel sebagai Web Component. Implementasikan rendering canvas, slider hue, saluran alpha, dan custom events dengan Shadow DOM.
Ruang Warna Perseptual: Lab, LCH, Oklab, OKLCH
Jelajahi ruang warna yang seragam secara perseptual — CIE Lab, LCH, Oklab, dan OKLCH. Pelajari bagaimana setiap ruang warna dirancang, di mana ia unggul, dan mana yang digunakan untuk CSS dan desain.
Emerald vs Jade vs Forest Green: Panduan Perbandingan Hijau
Bandingkan emerald (#50C878), jade (#00A86B), dan forest green (#228B22). Pelajari perbedaan visual dan kode hex antara nuansa hijau populer ini.
Perbedaan Antara Cyan dan Turquoise
Cyan (#00FFFF) dan turquoise (#40E0D0) tampak serupa tapi berbeda dalam model warna, saturasi, dan kasus penggunaan. Berikut perincian lengkapnya.
Merancang API Warna: REST Endpoint untuk Data Warna
Rancang REST API warna dengan endpoint untuk konversi warna, pencarian, pengecekan kontras, dan pembuatan Palet. Pelajari desain skema dan praktik terbaik.