แปลงสี HEX เป็น HSL

ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก

สี HEX

CSShsl(220, 60%, 50%)

วิธีคำนวณ

Hue220

Saturation60%

Lightness50%

แปลงกลับ? HSL เป็น HEX

HueSaturationLightness

#3366cc

แชร์เครื่องมือนี้

แปลงโค้ดสี HEX เป็น HSL ยังไง

ขั้นแรกอ่านโค้ด hex เป็นค่าแดง เขียว น้ำเงิน (0-255) แล้วนำสีเดียวกันมาบอกใหม่เป็นค่า hue, saturation และ lightness แทน hue คือมุมบนวงล้อสี (0-360) saturation คือความสดของสี (0-100%) และ lightness คือความสว่าง (0-100%) #3366cc จะกลายเป็น hsl(220, 60%, 50%) เครื่องมือนี้คำนวณให้ทันทีที่พิมพ์

วิธีใช้งาน

1ป้อนโค้ด HEX. พิมพ์หรือวางโค้ดสี hex เช่น #3366cc (หรือ #36c) หรือเลือกด้วย color picker ก็ได้ ใส่ # หรือไม่ใส่ก็ได้
2ดูค่า HSL. สตริง hsl() ค่าดิบ และพรีวิวสีจะอัปเดตทันทีที่พิมพ์ พร้อมแสดงวิธีคำนวณของแต่ละส่วน hue, saturation และ lightness
3คัดลอกรูปแบบที่ต้องการ. กด Copy ข้างสตริง hsl() หรือค่าดิบ ต้องการแปลงกลับ? ป้อนค่า hue, saturation และ lightness ด้านล่างเพื่อได้โค้ด hex กลับมา

เหมาะกับใคร

นักพัฒนา front-end ที่แปลงโค้ด hex เป็น hsl() เพื่อปรับ lightness สำหรับสถานะ hover และ focus โดยไม่ต้องเลือกสีใหม่ทั้งหมด
นักออกแบบที่สร้างจานสี ที่ตรึง hue ไว้คงที่ แล้วปรับ saturation กับ lightness ทีละขั้นเพื่อสร้างเฉดอ่อนและเฉดเข้มจากสีแบรนด์เดียว
ผู้เขียนธีมและ design token ที่เก็บสีเป็น HSL เพราะอ่านและปรับด้วยมือได้ง่ายกว่าสตริง hex มาก
ทุกคนที่ต้องจับคู่สี ระหว่างเครื่องมือที่ใช้ hex (Figma, CSS ส่วนใหญ่) กับเครื่องมือที่ใช้ HSL (ตัวช่วยของ SCSS, ระบบสีบางแบบ)

เครื่องมือนี้รองรับรูปแบบ hex ของ CSS ทุกแบบ ทั้ง 6 หลัก #3366cc, แบบย่อ 3 หลัก #36c และแบบ 4 กับ 8 หลักที่มีช่อง alpha จะมีเครื่องหมาย # หรือไม่มีก็ได้ ผลลัพธ์จะแสดงสตริง hsl() หรือ hsla() ค่าดิบแต่ละตัว และวิธีคำนวณทีละส่วน พร้อมช่องแปลงกลับจาก HSL เป็น HEX เมื่อต้องการไปในทิศทางตรงข้าม ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีการอัปโหลด ไม่ต้องสมัครสมาชิก และใช้งานได้ไม่จำกัด

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

เครื่องมือแปลง HEX เป็น HSL นี้ฟรีไหม

ฟรี 100% ไม่ต้องสมัครสมาชิกและไม่จำกัดจำนวนครั้ง ทำงานในเบราว์เซอร์ทั้งหมด

สีที่ป้อนถูกอัปโหลดไปไหนไหม

ไม่ การแปลงเป็นแค่ JavaScript ที่รันบนอุปกรณ์ ไม่มีข้อมูลส่งไปเซิร์ฟเวอร์ และใช้งานแบบออฟไลน์ได้หลังจากโหลดหน้าเว็บครั้งแรก

HSL คืออะไร

HSL ย่อมาจาก hue, saturation และ lightness hue คือมุมตั้งแต่ 0 ถึง 360 องศาบนวงล้อสี saturation คือความสดของสีตั้งแต่ 0 ถึง 100 เปอร์เซ็นต์ ส่วน lightness ไล่ตั้งแต่ 0 เปอร์เซ็นต์ (สีดำ) ผ่านสีแท้ที่ 50 เปอร์เซ็นต์ ไปจนถึง 100 เปอร์เซ็นต์ (สีขาว)

แปลง hex เป็น HSL ด้วยมือทำยังไง

แปลงโค้ด hex เป็นค่าแดง เขียว น้ำเงิน แล้วหารแต่ละค่าด้วย 255 หาค่ามากสุดและน้อยสุดจากสามค่านั้น lightness คือค่าเฉลี่ยของทั้งสอง saturation คือ (มากสุด - น้อยสุด) หารด้วย (1 - |2L - 1|) ส่วน hue มาจากว่าช่องไหนมีค่ามากสุด แล้วปรับสเกลเป็น 0-360 องศา

รองรับแบบย่อ 3 หลักอย่าง #36c ไหม

รองรับ ในแบบย่อของ CSS แต่ละหลักจะซ้ำตัวเอง ดังนั้น #36c จะขยายเป็น #3366cc และแปลงเป็น hsl(220, 60%, 50%) แบบ 4 หลักก็ทำงานแบบเดียวกัน โดยหลักสุดท้ายคือ alpha

แปลงเป็น HSLA (โปร่งใส) ยังไง

โค้ด hex 8 หลักมีค่า alpha อยู่ในคู่สุดท้าย ไบต์นั้น (0-255) จะถูกหารด้วย 255 เพื่อได้ค่า alpha แบบ 0-1 ที่ hsla() ต้องการ แล้วปัดเศษสามตำแหน่ง ดังนั้น #3366cc80 จะกลายเป็น hsla(220, 60%, 50%, 0.502)

แปลง HSL กลับเป็น HEX ได้ไหม

ได้ ใช้ช่อง HSL to HEX ใต้ผลลัพธ์: ป้อนค่า hue (0-360) พร้อม saturation และ lightness (0-100%) แล้วจะได้โค้ด hex กลับมาทันที ค่าที่เกินขอบเขตจะถูกจำกัดให้อยู่ในช่วงที่ถูกต้อง

ทำไม HSL ถึงมีประโยชน์กว่า hex

HSL อ่านง่ายสำหรับคน คุณทำให้สีสว่างขึ้นได้ด้วยการเพิ่ม L ทำให้จางลงได้ด้วยการลด S หรือเปลี่ยนโทนสีได้ด้วยการปรับ H โดยไม่ต้องเดาเลขฐานสิบหก จึงเหมาะมากสำหรับการสร้างจานสีที่สอดคล้องกัน สถานะ hover และ design token