ตัวแปลงสี Hex เป็น HSL
แปลงรหัสสี hex ของ CSS เป็น HSL (hue, saturation, lightness) ได้ในคลิกเดียว
เครื่องมือนี้ตอบคำถามของคุณหรือไม่
ขอบคุณ — ความเห็นนี้ช่วยให้เราปรับปรุงเครื่องมือ
วิธีใช้เครื่องมือนี้
- กรอกรหัสสี hex แบบ 6 หลัก (เช่น #ff5733) จะใส่ # นำหน้าหรือไม่ก็ได้
- เครื่องมือจะแปลงเป็น HSL: hue เป็นองศา saturation และ lightness เป็นเปอร์เซ็นต์
- คัดลอกสตริง hsl() ไปใช้ใน CSS หรือสไตล์ชีตของคุณ
วางรหัสสี hex แล้วรับค่า HSL ที่เทียบเท่าเพื่อใช้ในฟังก์ชัน CSS hsl() หรือเครื่องมือออกแบบ
สูตร
Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.
Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.
คำถามที่พบบ่อย
- ทำไมต้องแปลง hex เป็น HSL?
- HSL เข้าใจง่ายกว่าเมื่อต้องปรับความสว่างหรือความอิ่มตัวของสี คุณสามารถคง hue ไว้คงที่แล้วปรับ saturation/lightness เพื่อสร้างโทนอ่อนและโทนเข้ม
- เครื่องมือนี้รองรับ hex แบบ 3 หลักหรือไม่?
- รองรับ — #abc จะถูกตีความเป็น #aabbcc