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