CSS3 รองรับการกำหนดสีหลายรูปแบบ ได้แก่ RGBA, HSL, และ HSLA
1. RGBA (Red, Green, Blue, Alpha)
ค่าสี RGBA ประกอบด้วย แดง, เขียว, น้ำเงิน และอัลฟา (ความทึบแสง) ค่าอัลฟาอยู่ระหว่าง 0.0 ถึง 1.0 โดย 1.0 = ทึบเต็มที่
ตัวอย่างความแตกต่างของความทึบแสง:
ตัวอย่างโค้ด RGBA
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rgba(108,111,35,0.5);} #demo3 {background-color:rgba(108,111,35,0.4);} #demo4 {background-color:rgba(108,111,35,0.3);} #demo5 {background-color:rgba(108,111,35,0.2);} #demo6 {background-color:rgba(108,111,35,0.1);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>
ผลลัพธ์
2. HSL (Hue, Saturation, Lightness)
HSL กำหนดสีโดย: Hue (สีพื้นฐาน 0-360°), Saturation (ความอิ่มตัว 0-100%), Lightness (ความสว่าง 0-100%)
- 0° หรือ 360° = แดง
- 120° = เขียว
- 240° = น้ำเงิน
ตัวอย่างโค้ด HSL
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsl(150, 100%, 50%);} #demo2 {background-color: hsl(150, 100%, 50%);} #demo3 {background-color: hsl(140, 100%, 40%);} #demo4 {background-color: hsl(120, 100%, 40%);} #demo5 {background-color: hsl(120, 100%, 30%);} #demo6 {background-color:rgba(108,111,35,0.6);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>
ผลลัพธ์
3. HSLA (Hue, Saturation, Lightness, Alpha)
HSLA เพิ่มค่า Alpha (ความทึบแสง 0.0-1.0) เข้าไปใน HSL โดย 0.0 = โปร่งใส 1.0 = ทึบเต็มที่
ตัวอย่างโค้ด HSLA
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 {background-color:rgba(108,111,35,0.6);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>
ผลลัพธ์
สรุปการเลือกใช้
- RGB/RGBA - เหมาะสำหรับการกำหนดสีจากค่าพิกเซลหรือโค้ดสี hex
- HSL/HSLA - เหมาะสำหรับการปรับสี (สร้างโทนสี, ปรับความสว่าง/อิ่มตัว) เพราะเข้าใจง่ายกว่า
