ฟังก์ชัน hsl() ใน CSS ใช้สำหรับกำหนดสีโดยใช้โมเดล Hue-Saturation-Lightness (HSL) ซึ่งประกอบด้วย 3 ค่า คือ
- Hue (สีพื้นฐาน): ค่า 0 ถึง 360 องศา (0=แดง, 120=เขียว, 240=น้ำเงิน)
- Saturation (ความอิ่มตัวของสี): ค่าเปอร์เซ็นต์ 0% ถึง 100%
- Lightness (ความสว่าง): ค่าเปอร์เซ็นต์ 0% ถึง 100%
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: hsl(0, 100%, 50%); /* สีแดง */
}
h2 {
background-color: hsl(192, 89%, 48%); /* สีฟ้า */
}
</style>
</head>
<body>
<h1>พื้นหลังสีแดง</h1>
<h2>พื้นหลังสีฟ้า</h2>
</body>
</html>
ข้อดีของ HSL: รูปแบบ HSL ทำให้ง่ายต่อการปรับสีได้โดยตรง เช่น ต้องการสีเดียวกันแต่สว่างหรือมืดกว่า เพียงแค่ปรับค่า Lightness โดยไม่ต้องคำนวณค่า RGB ใหม่
