การกำหนดสีใน CSS3: RGB, RGBA, HSL, HSLA, Hex

CSS3 รองรับการกำหนดสีหลายรูปแบบ: RGB, RGBA, HSL, HSLA, Hex, Named Colors

1. RGBA (Red, Green, Blue, Alpha)

Alpha = ความทึบแสง 0.0 (โปร่งใส) - 1.0 (ทึบแสงเต็มที่)

ตัวอย่าง RGBA ค่า Alpha ต่างกัน

<!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)

Hue: 0-360 (0/360=แดง, 120=เขียว, 240=น้ำเงิน) Saturation: 0%-100% Lightness: 0%-100% (0%=ดำ, 50%=ปกติ, 100%=ขาว)

ตัวอย่าง 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 (HSL + Alpha)

เพิ่ม Alpha channel เข้าไปใน HSL

ตัวอย่าง 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>

4. Hexadecimal Color Values

รูปแบบ #RRGGBB หรือ #RGB (ย่อ) CSS Color Level 4 รองรับ #RRGGBBAA (พร้อม alpha)

ตัวอย่าง Hex

<!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    background-color: #B13838; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text...</div> </body> </html>

ตารางเปรียบเทียบรูปแบบสี

รูปแบบใหม่ CSS Color Level 4:

/* Space-separated (ไม่ต้องใช้คอมม่า) */
rgb(255 0 0 / 50%)
hsl(0 100% 50% / 0.5)

/* Hex with alpha */
#FF000080  /* 50% alpha */

/* Lab, LCH, OKLab, OKLCH - color spaces ใหม่ */
lab(50% 40 60)
lch(50% 70 30)