AbraCalc

ตัวแปลงสี Hex เป็น HSL

แปลงรหัสสี hex ของ CSS เป็น HSL (hue, saturation, lightness) ได้ในคลิกเดียว

ฝังเครื่องมือนี้ในเว็บไซต์ของคุณ
อ้างอิงเครื่องมือนี้

APA

AbraCalc. (2026). ตัวแปลงสี Hex เป็น HSL [Online calculator]. Retrieved from https://abracalc.com/th/plaeng-hex-hsl/

BibTeX

@misc{abracalc-plaeng-hex-hsl, author = {AbraCalc}, title = {ตัวแปลงสี Hex เป็น HSL}, year = {2026}, howpublished = {\url{https://abracalc.com/th/plaeng-hex-hsl/}} }

เครื่องมือนี้ตอบคำถามของคุณหรือไม่

วิธีใช้เครื่องมือนี้

  1. กรอกรหัสสี hex แบบ 6 หลัก (เช่น #ff5733) จะใส่ # นำหน้าหรือไม่ก็ได้
  2. เครื่องมือจะแปลงเป็น HSL: hue เป็นองศา saturation และ lightness เป็นเปอร์เซ็นต์
  3. คัดลอกสตริง 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

แหล่งอ้างอิง