แปลง RGB เป็น HSL

RGB สร้างสีจากช่องแสงสามช่อง ซึ่งเหมาะกับหน้าจอแต่ปรับด้วยมือได้ยาก การทำให้ rgb(255, 61, 114) เข้มขึ้นเล็กน้อยต้องเปลี่ยนตัวเลขทั้งสามตัว HSL อธิบายสีเดียวกันด้วยเฉดสี ซึ่งเป็นมุมบนวงล้อสีตั้งแต่ 0 ถึง 360° บวกกับความอิ่มตัวและความสว่างเป็นเปอร์เซ็นต์ สีชมพูนั้นจึงกลายเป็น hsl(344, 100%, 62%)

โครงสร้างนี้ทำให้ HSL เหมาะมากสำหรับสร้างเฉดสีและธีม คงเฉดสีและความอิ่มตัวไว้แล้วลดความสว่างเพื่อทำสถานะตอนวางเมาส์หรือตอนกด เพิ่มความสว่างเพื่อทำพื้นหลังโทนอ่อน หรือลดความอิ่มตัวเพื่อให้ได้สีที่หม่นลง เบราว์เซอร์สมัยใหม่ทุกตัวรองรับ hsl() ใน CSS คุณจึงวางผลลัพธ์ได้โดยตรง ตัวแปลงจะปัดค่าเป็นจำนวนเต็ม การแปลงกลับจึงอาจทำให้ค่าช่องสีคลาดไปหนึ่งหน่วย