สี CSS HSL

สารบัญ

แสดงสารบัญ

HSL ย่อมาจาก Hue, Saturation และ Lightness

ค่า HSL

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

hsl(เฉดสี, ความอิ่มตัว, ความสว่าง)

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

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

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

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

HUE

0

SATURATION

100%

LIGHTNESS

50%

ตัวอย่าง

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HSL values</h1>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body>
</html>

ความอิ่มตัว

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

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

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

0% เป็นสีเทาสนิท คุณไม่สามารถมองเห็นสีได้อีกต่อไป

ตัวอย่าง

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>HSL Saturation</h1>

<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>

</body>
</html>

ความเบา

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

ตัวอย่าง

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>HSL Lightness</h1>

<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>

<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>

</body>
</html>

โทนสีเทา

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

ตัวอย่าง

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>

<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>

</body>
</html>

มูลค่า HSLA

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

ค่าสี HSLA คือ ระบุด้วย:

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

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

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

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

ตัวอย่าง

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with HSLA</h1>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>

</body>
</html>