เครื่องมือแปลงสี HEX เป็น HSL

แปลงสีจาก HEX เป็น HSL ทันทีที่คุณพิมพ์ — ฟรี รวดเร็ว พร้อมตัวอย่างการคำนวณและตารางเปรียบเทียบสีทั่วไปครับ

พิมพ์ค่าสี HEX เพื่อดูค่าสี HSL ที่ด้านล่าง หรือเลือกสีจากจานสีได้เลยครับ

เลือกสีหรือกรอกค่าในฟอร์แมตใดก็ได้

ตัวอย่างการแปลงสี

HEX #ff5733 = HSL 11, 100%, 60%

วิธีการแปลงสี

  • รหัส HEX คือการเขียนช่องสัญญาณสี RGB สามช่องในรูปแบบเลขฐาน 16 โดยใช้ตัวเลขสองหลักต่อหนึ่งช่องสัญญาณ ตั้งแต่ 00 (0) ถึง ff (255)
  • HSL อธิบายสีเดียวกันด้วยค่าโทนสี (Hue: 0–360° บนวงล้อสี), ความอิ่มตัวของสี (Saturation) และความสว่าง (Lightness) ซึ่งสะดวกมากในการปรับสีให้เข้มขึ้นหรือจางลงโดยเปลี่ยนค่าเพียงตัวเดียว

สีทั่วไปในรูปแบบ HEX และ HSL

สีHEXHSL
สีแดง#ff00000, 100%, 50%
สีส้ม#ffa50039, 100%, 50%
สีเหลือง#ffff0060, 100%, 50%
สีเขียว#008000120, 100%, 25%
สีฟ้าอมเขียว (Cyan)#00ffff180, 100%, 50%
สีน้ำเงิน#0000ff240, 100%, 50%
สีม่วง#800080300, 100%, 25%
สีชมพู#ffc0cb350, 100%, 88%
สีน้ำตาล#a52a2a0, 59%, 41%
สีขาว#ffffff0, 0%, 100%
สีเทา#8080800, 0%, 50%
สีดำ#0000000, 0%, 0%

ทุกการแปลงค่าจะทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณกรอกไปยัง BroBroGo

คำถามที่พบบ่อย

จะแปลงสีจาก HEX เป็น HSL ได้อย่างไร?

พิมพ์หรือวางค่าสี HEX ของคุณที่ด้านบน — ค่าสี HSL จะอัปเดตทันทีที่คุณพิมพ์ นอกจากนี้คุณยังสามารถเลือกสีจากจานสีเพื่อดูค่าได้อีกด้วยครับ

การแปลงสีมีความแม่นยำหรือไม่?

ค่าต่างๆ จะถูกปัดเศษเป็นจำนวนเต็ม ซึ่งเป็นรูปแบบที่ CSS และเครื่องมือออกแบบทั่วไปต้องการ ความแตกต่างนั้นน้อยมากจนไม่สามารถมองเห็นได้ด้วยตาเปล่าครับ