ฟังก์ชัน hsl() ของ CSS

การกำหนดและการใช้งาน

CSS ของ hsl() ฟังก์ชันใช้รูปแบบสี ที่สี-ความชื้น-ความสว่าง (HSL) ที่เพิ่มส่วนตัวเลขอัลฟา (alpha) แบบเลือกตัด (เป็นความโปร่งใสของสี)。

คำเตือน:HSL แสดงถึง ที่สี (Hue), ความชื้น (Saturation) และ ความสว่าง (Lightness)，เป็นรูปแบบสายกระบวนสีที่แสดงโดยระบบเมื่อโค้นด้านนอกทรงกระบวนรูปทรงกระบวนสายทรงกลม。

ตั้งค่า:hsla() ฟังก์ชันเป็น hsl() ฟังก์ชันชื่ออื่นๆ แนะนำใช้ hsl() ฟังก์ชัน。

ตัวอย่าง

ตัวอย่าง 1

กำหนดสี HSL(A) ต่างๆ:

#p1 {background-color:hsl(120 100% 50%);} /* สีเขียว */
#p2 {background-color:hsl(120 100% 75%);} /* สีเขียวแสบ */
#p3 {background-color:hsl(120 100% 25%);} /* สีเขียวเข้ม */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* สีเขียวเข้มที่มีความโปร่งใส */
#p5 {background-color:hsl(120 60% 70%);} /* สีเขียวอ่อน */
#p6 {background-color:hsl(290 100% 50%);} /* สีม่วง */
#p7 {background-color:hsl(290 60% 70%);} /* สีม่วงอ่อน */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* สีม่วงอ่อนที่มีความโปร่งใส */

ทดลองเอง

ตัวอย่าง 2

ใช้งานภาษาเก่าโดยแบ่งค่าด้วยคมันทาง

#p1 {background-color:hsl(120, 100%, 50%);} /* สีเขียว */
#p2 {background-color:hsl(120, 100%, 75%);} /* สีเขียวขาว */
#p3 {background-color:hsl(120, 100%, 25%);} /* สีเขียวดำ */
#p4 {background-color:hsl(120, 60%, 70%);} /* สีเขียวอ่อน */
#p5 {background-color:hsl(290, 100%, 50%);} /* สีม่วง */
#p6 {background-color:hsl(290, 60%, 70%);} /* สีม่วงอ่อน */

ทดลองเอง

ภาษา CSS

การใช้งานค่าที่แน่ชัด

hsl(hue saturation lightness / A)
ค่า คำอธิบาย
hue จำเป็น。กำหนดองศาที่วงแหวนสี (จาก 0 ถึง 360) - 0 (หรือ 360) คือสีแดง，120 คือสีเขียว，240 คือสีสีน้ำเงิน。
saturation

จำเป็น。กำหนดความชื้นของสี；0% คือสีน้ำเงินสีครีม，100% คือสีแข็งสดใส (ความชื้นที่สุด)

สามารถใช้ None (เท่ากับ 0%) ได้ด้วย。
lightness

จำเป็น。กำหนดความสว่างของสี；0% คือสีดำ，50% คือปกติ，100% คือสีขาว。

สามารถใช้ None (เท่ากับ 0%) ได้ด้วย。
/ A

เลือกตั้ง。แสดงค่า alpha ช่องสี (จาก 0% หรือ 0 - โค้งแตกแบ่งอย่างเต็มที่ถึง 100% หรือ 100 - โค้งแตกแบ่งไม่มีอะไร)

สามารถใช้ None (แสดงว่าไม่มีช่อง alpha) ได้ด้วย。

ค่าเริ่มต้นคือ 100%。

การใช้งานภาษาเกี่ยวข้อง

hsl(from color hue saturation lightness / A)
ค่า คำอธิบาย
from color

จากคำว่า from ตามด้วยค่าสีที่แสดงสีต้นทาง

นี่เป็นสีต้นทางของสีที่เป็นสีที่เกี่ยวข้อง
hue จำเป็น。กำหนดองศาที่วงแหวนสี (จาก 0 ถึง 360) - 0 (หรือ 360) คือสีแดง，120 คือสีเขียว，240 คือสีสีน้ำเงิน。
saturation

จำเป็น。กำหนดความชื้นของสี；0% คือสีน้ำเงินสีครีม，100% คือสีแข็งสดใส (ความชื้นที่สุด)

สามารถใช้ None (เท่ากับ 0%) ได้ด้วย。
lightness

จำเป็น。กำหนดความสว่างของสี；0% คือสีดำ，50% คือปกติ，100% คือสีขาว。

สามารถใช้ None (เท่ากับ 0%) ได้ด้วย。
/ A

เลือกตั้ง。แสดงค่า alpha ช่องสี (จาก 0% หรือ 0 - โค้งแตกแบ่งอย่างเต็มที่ถึง 100% หรือ 100 - โค้งแตกแบ่งไม่มีอะไร)

สามารถใช้ None (แสดงว่าไม่มีช่อง alpha) ได้ด้วย。

ค่าเริ่มต้นคือ 100%。

รายละเอียดเทคนิค

เวอร์ชัน: CSS3

การสนับสนุนบราวเซอร์

ตัวเลขในตารางนี้แสดงเวอร์ชันบราวเซอร์ที่สนับสนุนฟังก์ชันนี้ครบถ้วนแรก。

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
กับ alpha ตัวแปร hsl()
65 79 52 12.1 52
ประกายด้วยช่องว่าง
65 79 52 12.1 52

หน้าที่เกี่ยวข้อง

คู่มือ:สี HSL ของ CSS

อ้างอิง:CSS สี

อ้างอิง:ฟังก์ชัน hwb() ของ CSS

อ้างอิง:ฟังก์ชัน lab() ของ CSS

อ้างอิง:ฟังก์ชัน lch() ของ CSS

อ้างอิง:CSS oklab() ฟังก์ชัน

อ้างอิง:CSS oklch() ฟังก์ชัน