แปลง HSL เป็น HEX

HSL เป็นวิธีที่เข้าใจง่ายที่สุดในการสร้างระบบสี คุณกำหนดเฉดสีไว้ เช่น 262° สำหรับสีม่วง แล้วสร้างสเกลทั้งชุดโดยเปลี่ยนความสว่างเป็นหลัก ประมาณ 95% สำหรับพื้นหลัง 58% สำหรับปุ่มและสีเน้น และ 30% สำหรับข้อความ นักออกแบบและนักพัฒนาใช้วิธีนี้สร้างโทนอ่อน โทนเข้ม และธีมมืด

แต่สเกลที่เสร็จแล้วมักต้องส่งมอบเป็นรหัส HEX คู่มือสไตล์ ดีไซน์โทเค็น ไลบรารี Figma คู่มือแบรนด์ และระบบจัดการเนื้อหาจำนวนมากต้องการค่า #RRGGBB ใส่ค่า HSL แล้วคัดลอกผลลัพธ์ HEX เช่น hsl(262, 83%, 58%) จะกลายเป็น #7C3BED เครื่องมือยังแสดงค่า RGB, HSV และ CMYK ของสีเดียวกัน เนื่องจาก HEX เก็บได้เพียง 256 ระดับต่อช่องสี การเปลี่ยน HSL เพียงเล็กน้อยจึงไม่ได้ทำให้รหัส HEX เปลี่ยนเสมอไป