HTML HSL และ HSLA สี
HSL ย่อมาจาก hue, saturation และ lightness
ค่าสี HSLA เป็นส่วนขยายของ HSL ที่มีช่องอัลฟ่า (ความทึบ)
ค่าสี HSL
ใน HTML สามารถระบุสีได้โดยใช้ฮิว ความอิ่มตัว และความสว่าง (HSL) ในรูปแบบ:
hsl( ฮิวความอิ่มตัวความสว่าง )
Hue คือระดับของวงล้อสีตั้งแต่ 0 ถึง 360 0 คือสีแดง 120 คือสีเขียว และ 240 คือสีน้ำเงิน
ความอิ่มตัวคือค่าเปอร์เซ็นต์ 0% หมายถึงเฉดสีเทา และ 100% คือสีเต็ม
ความสว่างยังเป็นค่าเปอร์เซ็นต์ 0% เป็นสีดำ และ 100% เป็นสีขาว
ทดลองโดยผสมค่า HSL ด้านล่าง:
hsl(0, 100%, 50%)
ฮิว
ความอิ่มตัว
ความสว่าง
ตัวอย่าง
ความอิ่มตัว
ความอิ่มตัวของสีสามารถอธิบายได้ว่าเป็นความเข้มของสี
เป็นสีบริสุทธิ์ 100% ไม่มีเฉดสีเทา
50% เป็นสีเทา 50% แต่คุณยังสามารถเห็นสีได้
0% เป็นสีเทาทั้งหมด คุณจะไม่เห็นสีอีกต่อไป
ตัวอย่าง
ความสว่าง
ความสว่างของสีสามารถอธิบายได้ว่าเป็นปริมาณแสงที่คุณต้องการให้สี โดยที่ 0% หมายถึงไม่มีแสง (สีดำ) 50% หมายถึงแสง 50% (ไม่มืดหรือสว่าง) 100% หมายถึงความสว่างเต็มที่ (สีขาว)
ตัวอย่าง
โทนสีเทา
เฉดสีเทามักถูกกำหนดโดยการตั้งค่าเฉดสีและความอิ่มตัวของสีเป็น 0 และปรับความสว่างจาก 0% ถึง 100% เพื่อให้ได้เฉดสีที่เข้มขึ้น/สว่างขึ้น:
ตัวอย่าง
ค่าสี HSLA
ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL ที่มีช่องอัลฟ่า ซึ่งระบุความทึบของสี
ค่าสี HSLA ถูกระบุด้วย:
hsla( ฮิว ความอิ่มตัวความสว่าง อัลฟา )
พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ไม่โปร่งใสเลย):
ทดลองโดยผสมค่า HSLA ด้านล่าง:
สลา (0, 100%, 50%, 0.5)
ฮิว
ความอิ่มตัว
ความสว่าง
อัลฟ่า