CSS HSL สี

HSL ย่อมาจาก hue, saturation และ lightness

ค่า HSL

ใน CSS สามารถระบุสีได้โดยใช้ฮิว ความอิ่มตัว และความสว่าง (HSL) ในรูปแบบ:

hsl( ฮิวความอิ่มตัวความสว่าง )

Hue คือระดับของวงล้อสีตั้งแต่ 0 ถึง 360 0 คือสีแดง 120 คือสีเขียว และ 240 คือสีน้ำเงิน

ความอิ่มตัวคือค่าเปอร์เซ็นต์ 0% หมายถึงเฉดสีเทา และ 100% คือสีเต็ม

ความสว่างยังเป็นเปอร์เซ็นต์ 0% เป็นสีดำ 50% ไม่สว่างหรือมืด 100% เป็นสีขาว

ทดลองโดยผสมค่า HSL ด้านล่าง:

ความอิ่มตัว

ความอิ่มตัวของสีสามารถอธิบายได้ว่าเป็นความเข้มของสี

เป็นสีบริสุทธิ์ 100% ไม่มีเฉดสีเทา

50% เป็นสีเทา 50% แต่คุณยังสามารถเห็นสีได้

0% เป็นสีเทาทั้งหมด คุณจะไม่เห็นสีอีกต่อไป

ความสว่าง

ความสว่างของสีสามารถอธิบายได้ว่าเป็นปริมาณแสงที่คุณต้องการให้สี โดยที่ 0% หมายถึงไม่มีแสง (สีดำ) 50% หมายถึงแสง 50% (ไม่มืดหรือสว่าง) 100% หมายถึงความสว่างเต็มที่ (สีขาว)

โทนสีเทา

เฉดสีเทามักถูกกำหนดโดยการตั้งค่าเฉดสีและความอิ่มตัวของสีเป็น 0 และปรับความสว่างจาก 0% ถึง 100% เพื่อให้ได้เฉดสีที่เข้มขึ้น/สว่างขึ้น:

ค่า HSLA

ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL ที่มีช่องอัลฟา - ซึ่งระบุความทึบของสี

ค่าสี HSLA ถูกระบุด้วย:

hsla( ฮิว ความอิ่มตัวความสว่าง อัลฟา )

พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ไม่โปร่งใสเลย):

ทดลองโดยผสมค่า HSLA ด้านล่าง: