Apa Itu HSL?
HSL ialah sistem warna yang menyusun warna berdasarkan tiga dimensi yang manusia boleh faham secara intuitif: Hue (rona), Saturation (ketepuan), dan Lightness (kecerahan). Berbeza dengan hex dan RGB yang berasaskan campuran cahaya, HSL berasaskan cara kita sebenarnya melihat dan menggambarkan warna.
Apabila anda cakap "biru muda yang sedikit pudar", anda sebenarnya menggambarkan HSL: biru (hue), sedikit pudar (saturation rendah), dan muda (lightness tinggi). HSL menterjemahkan bahasa semula jadi warna kepada nombor.
3 Komponen HSL
Hue (H) ialah rona atau "nama" warna. Ia dinyatakan sebagai sudut pada roda warna, dari 0 hingga 360 darjah. 0 (atau 360) ialah merah. 120 ialah hijau. 240 ialah biru. Nilai antara keduanya ialah warna peralihan.
Saturation (S) ialah ketepuan atau "kekuatan" warna. Dinyatakan dalam peratusan dari 0% hingga 100%. 100% ialah warna paling tepu dan kuat. 0% ialah kelabu sepenuhnya (tiada warna). Warna muted mempunyai saturation yang rendah. Warna neon mempunyai saturation yang tinggi.
Lightness (L) ialah kecerahan warna. 0% ialah hitam sepenuhnya. 100% ialah putih sepenuhnya. 50% ialah warna pada kecerahan semula jadi. Warna pastel mempunyai lightness yang tinggi (75-90%). Warna jewel tone mempunyai lightness sederhana-rendah.
Contoh Nilai HSL
hsl(0, 100%, 50%). Merah tulenhsl(240, 100%, 50%). Biru tulenhsl(60, 100%, 50%). Kuning tulenhsl(0, 0%, 0%). Hitamhsl(0, 0%, 100%). Putihhsl(340, 100%, 88%). Pink lembut (pastel)hsl(240, 67%, 94%). Lavender
Perhatikan: untuk mencipta versi pastel daripada mana-mana warna, kekalkan hue yang sama, turunkan saturation sedikit, dan naikkan lightness. Ini jauh lebih mudah daripada cuba mengira nilai hex atau RGB untuk kesan yang sama.
Kelebihan HSL untuk Designer
HSL ialah pilihan ramai designer profesional kerana beberapa sebab:
Mudah mencipta variasi: Anda ada warna brand biru. Nak buat versi lebih cerah untuk background? Naikkan L sahaja. Nak buat versi lebih lembut? Turunkan S. Nak buat versi gelap untuk teks? Turunkan L. Semua ini memerlukan ubah satu nilai sahaja.
Mudah mencipta palet: Untuk palet warna monokromatik, kekalkan H dan S, ubah L sahaja. Untuk palet analogous, ubah H dalam julat kecil. Untuk palet complementary, tambah 180 pada H. HSL menjadikan teori roda warna boleh diaplikasi secara langsung.
CSS moden menyokong sepenuhnya: Semua pelayar web menyokong hsl() dan hsla(). Malah, CSS custom properties (variables) lebih powerful apabila digunakan dengan HSL kerana anda boleh mengubah satu komponen sahaja.
Untuk memahami bagaimana HSL, hex, RGB, dan CMYK saling berkait, lihat panduan colour code.
Soalan Lazim
Apa kelebihan HSL berbanding hex dan RGB?
HSL lebih intuitif kerana ia menyusun warna berdasarkan rona (hue), ketepuan (saturation), dan kecerahan (lightness). Untuk menjadikan warna lebih cerah, naikkan L. Untuk menjadikannya lebih pudar, turunkan S. Dalam hex atau RGB, anda perlu ubah berbilang nilai serentak untuk kesan yang sama.
Bagaimana nak guna HSL dalam CSS?
Formatnya: hsl(hue, saturation%, lightness%). Contoh: hsl(0, 100%, 50%) untuk merah terang. Hue ialah sudut pada roda warna (0-360), saturation ialah ketepuan (0-100%), dan lightness ialah kecerahan (0-100%). CSS juga menyokong hsla() untuk ketelusan.
Bandingkan dengan format lain: hex untuk web, RGB untuk digital, dan CMYK untuk cetakan.