RGB บอกหน้าจอว่าจะปล่อยแสงเท่าไร; HSL บอกว่าสีเป็นอย่างไรจริงๆ การแปลงสามแชนเนลเป็นโทน สี และความสว่างทำให้สีปรับด้วยมือได้ง่าย
วิธีการแปลงจาก RGB เป็น HSL
- หาร R, G และ B ด้วย 255 เพื่อให้แต่ละค่าระหว่าง 0 ถึง 1
- เอาค่าสูงสุดและค่าต่ำสุดของทั้งสาม — ค่าเฉลี่ยของสองค่านั้นคือความสว่าง L
- ถ้าค่าสูงสุดและค่าต่ำสุดเท่ากัน สีจะเป็นสีเทา: โทนสีและความอิ่มตัวเป็น 0 ทั้งคู่
- ถ้าไม่เช่นนั้น ให้หา S จากช่วงห่างระหว่างค่าสูงสุดและค่าต่ำสุด แล้วอ่าน H จากแชนเนลที่มีค่าสูงสุด
ตัวอย่างที่ทำงานได้
โดยหลักการแล้วแม่นยำ แต่เพราะ H, S และ L มักจะแสดงเป็นตัวเลขปัดเป็นจำนวนเต็ม การแปลงกลับอาจทำให้แชนเนลเปลี่ยนไปหนึ่งหรือสองขั้น
RGB และ HSL อธิบาย
RGB คืออะไร?
RGB อธิบายสีเป็นสามช่องของแสง — แดง เขียว น้ำเงิน — แต่ละช่องมีค่า 0 ถึง 255 มันสะท้อนการทำงานจริงของหน้าจอ: ทั้งสามช่องเป็น 255 ให้สีขาว ทั้งสามช่องเป็น 0 ให้สีดำ RGB เหมาะเมื่อต้องคำนวณกับสี เช่น การแอนิเมตช่องเดียว ผสมสีในโค้ด หรือเพิ่มความโปร่งใสด้วย rgba()
- ไวยากรณ์:
- rgb(R, G, B)
- ช่วงค่า:
- 0–255 ต่อช่อง
- เหมาะสำหรับ:
- โค้ด แคนวาส ความโปร่งใสด้วย rgba()
HSL คืออะไร?
HSL แยกสีเป็น hue (0–360° บนวงล้อสี), saturation (ความสดของสี, 0–100%) และ lightness (ความสว่าง, 0–100%) เพราะแต่ละส่วนตรงกับวิธีที่คนอธิบายสี HSL จึงเป็นฟอร์แมตที่ง่ายที่สุดสำหรับสร้างไทนท์ เงา และพาเลตต์ที่สม่ำเสมอ — ทั้งแบบทำมือหรือในโค้ด
- ไวยากรณ์:
- hsl(H, S%, L%)
- ช่วงค่า:
- 0–360°, 0–100%, 0–100%
- เหมาะสำหรับ:
- พาเลตต์ ไทนท์และเงา ธีม
ตารางอ้างอิงจาก RGB เป็น HSL
สี CSS ที่ใช้บ่อยที่สุด แปลงจาก RGB เป็น HSL
| สี | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |