HSL อธิบายสีในแบบที่คนพูดกัน: เฉดไหน, สีจัดแค่ไหน, สว่างเท่าไร การแปลงโค้ด HEX เป็น HSL คือวิธีเร็วที่สุดที่จะได้สีในรูปแบบที่ปรับแต่งได้จริง — ทำให้สว่าง ลดความอิ่มตัว หรือสร้างสเกลทั้งชุดได้
วิธีการแปลงจาก HEX เป็น HSL
- แปลงโค้ด HEX เป็น RGB แล้วหารแต่ละแชนเนลด้วย 255 เพื่อให้ค่าทั้งสามอยู่ระหว่าง 0 ถึง 1
- หา ค่าสูงสุดและค่าต่ำสุดของทั้งสามค่า ค่าเฉลี่ยของสองค่านั้นคือความสว่าง L
- ช่วงห่างระหว่างค่าสูงสุดกับต่ำสุดกำหนดความอิ่มตัว S: หารด้วย (2 − max − min) สำหรับสีสว่าง หรือหารด้วย (max + min) สำหรับสีเข้ม
- แชนเนลที่มีค่าสูงสุดจะกำหนดโทนสี H — แดงที่ 0°, เขียวที่ 120°, น้ำเงินที่ 240° — และอีกสองแชนเนลจะตำแหน่งโทนสีภายในช่วงนั้น
ตัวอย่างที่ทำงานได้
คำนวณได้แม่นยำ แต่ค่าของ HSL มักจะปัดเป็นองศาเต็มและเปอร์เซ็นต์ การแปลงกลับจึงอาจทำให้ค่า RGB แตกต่างไปหนึ่งหรือสองขั้นตอนจากต้นฉบับ — ซึ่งมองไม่เห็นในทางปฏิบัติ แต่ควรรู้ถ้าคุณแปลงกลับหลายรอบ
HEX และ HSL อธิบาย
HEX คืออะไร?
โค้ด HEX เป็นเลขฐานสิบหกหกหลักที่เก็บช่องสัญญาณแดง เขียว น้ำเงินของสีไว้หลังเครื่องหมายนำหน้า # แต่ละคู่ตัวเลขแทนช่องหนึ่งช่อง ตั้งแต่ 00 (ไม่มี) ถึง FF (เต็ม) ซึ่งให้สีเดียวกับ RGB ประมาณ 16.7 ล้านสีในรูปแบบที่สั้นกว่า HEX เป็นค่าปริยายใน CSS เครื่องมือออกแบบ และแนวทางแบรนด์
- ไวยากรณ์:
- #RRGGBB
- ช่วงค่า:
- 00–FF ต่อช่อง
- เหมาะสำหรับ:
- CSS การส่งมอบงานออกแบบ แนวทางแบรนด์
HSL คืออะไร?
HSL แยกสีเป็น hue (0–360° บนวงล้อสี), saturation (ความสดของสี, 0–100%) และ lightness (ความสว่าง, 0–100%) เพราะแต่ละส่วนตรงกับวิธีที่คนอธิบายสี HSL จึงเป็นฟอร์แมตที่ง่ายที่สุดสำหรับสร้างไทนท์ เงา และพาเลตต์ที่สม่ำเสมอ — ทั้งแบบทำมือหรือในโค้ด
- ไวยากรณ์:
- hsl(H, S%, L%)
- ช่วงค่า:
- 0–360°, 0–100%, 0–100%
- เหมาะสำหรับ:
- พาเลตต์ ไทนท์และเงา ธีม
ตารางอ้างอิงจาก HEX เป็น HSL
สี CSS ที่ใช้บ่อยที่สุด แปลงจาก HEX เป็น HSL
| สี | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |