HSL Color Model

ความหมาย

HSL คือวิธีบอกค่าสีด้วยสามตัว: Hue (เนื้อสี วัดเป็นองศา 0-360), Saturation (ความสด เป็นเปอร์เซ็นต์), และ Lightness (ความสว่าง เป็นเปอร์เซ็นต์) ต่างจาก HEX (รหัสสีฐานสิบหก) ที่อ่านยากกว่าเวลาอยากปรับเฉดทีละนิด

อ่านค่า HSL

ล็อก Hue ไว้ แล้วขยับ Lightness เพื่อทำเฉดอ่อน-เข้มของสีเดียวกัน

hsl(145, 100%, 26%)  /* เขียวเข้ม */
hsl(145, 100%, 40%)  /* เขียวสว่างขึ้น */
hsl(145, 30%, 95%)   /* เขียวจางพื้นหลัง */

ตัวอย่างการใช้