CSS สี HSL
- หน้าก่อนหน้า CSS สี HEX
- หน้าต่อไป CSS พื้นหลัง
ค่า HSL
ใน CSS สามารถใช้ทอนทาง ความชื้นและความสว่าง (HSL) มากำหนดสี โดยรูปแบบดังนี้:
hsla(hue, saturation, lightness)
ทอนทาง (hue）คือองศาที่อยู่บนวงแหวนสี จาก 0 ถึง 360 องศา 0 คือสีแดง 120 คือสีเขียว 240 คือสีฟ้า
ความชื้น (saturation）เป็นมูลค่าร้อยละ 0% หมายถึงเงาสีน้ำเงิน และ 100% คือสีทั้งหมด
ความสว่าง (lightness）เป็นร้อยละ 0% คือดำ 50% คือไม่มืดและไม่สว่าง 100% คือขาว
โปรดทดลองผสมค่า HSL ต่อไปนี้:
HUE
SATURATION
LIGHTNESS
ตัวอย่าง
ความชื้น
ความชื้นสามารถอธิบายได้ว่าความแข็งแกร่งของสี
100% คือสีแท้ ไม่มีเงาสีน้ำเงิน
50% คือสีน้ำเงินที่สว่าง 50% คุณยังสามารถเห็นสี
0% คือสีน้ำเงินที่สุด คุณไม่สามารถเห็นสีอีกต่อไป
ตัวอย่าง
ความสว่าง
ความสว่างของสีสามารถอธิบายได้ว่าเพียงกี่แสงที่จะให้กับสี โดย 0% หมายถึงไม่สว่าง (ดำ) 50% หมายถึง 50% สว่าง (ไม่มืดและไม่สว่าง) 100% หมายถึงสว่างทั้งหมด (ขาว)
ตัวอย่าง
โดยทั่วไปจะกำหนดสีน้ำเงินและความชื้นด้วยการตั้งค่าทอนทางและความชื้นเป็น 0 โดยเพิ่มความสว่างจาก 0% ถึง 100% สามารถได้เงาที่ดิบกว่า/แผ่นแผ่นมากขึ้น:
ตัวอย่าง
ค่า HSLA
HSLA สีที่มีช่องโหลด Alpha คือขยายของ HSL สีที่มีช่องโหลด Alpha - มันกำหนดความมัวของสี。
HSLA สีที่กำหนดไว้คือ：
hsla(hue, saturation, lightness, alpha)
alpha ตัวเลขเป็นตัวเลขที่อยู่ระหว่าง 0.0 (ทราบแล้ว) และ 1.0 (ไม่ทราบแล้ว):
กรุณาทดลองผสมค่า HSLA ต่อไปนี้:
HUE
SATURATION
LIGHTNESS
ALPHA
ตัวอย่าง
- หน้าก่อนหน้า CSS สี HEX
- หน้าต่อไป CSS พื้นหลัง
