หน้าที่ของเครื่องมือ HSL‑to‑HEX
หน้า HSL‑to‑HEX เป็นเครื่องมือแปลงค่าสีจากรูปแบบ HSL (Hue, Saturation, Lightness) ไปเป็นรหัสเลขฐานสิบหก (HEX) ทันทีที่คุณป้อนค่าสี HSL แล้วกดหรือเลื่อนแถบเลื่อน ระบบจะอัปเดตค่า HEX ทันที เช่น ป้อนค่า 243, 75%, 59% จะได้รหัส #4f46e5 พร้อมทั้งแสดงรูปแบบย่อสามหลักถ้าเป็นไปได้ (เช่น #abc เมื่อแต่ละช่อง RGB สามารถแทนด้วยเลขฐานสิบหกเพียงหลักเดียว) นอกจากนี้ยังแสดงค่าสีในรูปแบบ RGB, HSV, CMYK และ LAB พร้อมกันทุกครั้งที่แก้ไข
อะไรทำให้หน้านี้แตกต่าง
HSL ถูกออกแบบมาให้มนุษย์เข้าถึงสีได้โดยสัญชาตญาณ — การเปลี่ยนค่า Lightness เพียงอย่างเดียวจะคง Hue เดิมไว้ ทำให้ HSL เป็นที่นิยมในการสร้างเฉดสีและธีม ส่วน HEX เป็นสัญกรณ์ RGB แบบเลขฐานสิบหก ซึ่งเป็นรูปแบบมาตรฐานสำหรับ CSS และซอฟต์แวร์ออกแบบ หน้านี้เจาะจงการแปลง HSL → HEX โดยตรง ซึ่งเป็นการแปลงแบบ lossless ภายใน sRGB gamut ไม่เหมือนการแปลงที่เกี่ยวข้องกับ LAB หรือ CMYK ที่อาจต้องปรับสีที่อยู่นอกช่วง การแปลงนี้จึงไม่มีการทำให้สีผิดเพี้ยนไป
ข้อมูลนำเข้าและผลลัพธ์
- นำเข้า: ผู้ใช้กรอกค่า Hue (0–360), Saturation (0–100%) และ Lightness (0–100%) ตัวอย่าง:
243, 75%, 59% - ผลลัพธ์หลัก: รหัส HEX เช่น
#4f46e5; ถ้าสามารถย่อเป็นสามหลักได้ก็จะแสดงด้วย (เช่น#888⇔#888888) - ผลลัพธ์เพิ่มเติม: RGB, HSV, CMYK, LAB จะอัปเดตพร้อมกัน
กฎและกรณีพิเศษ
- การแก้ไขฟิลด์ใด ๆ จะอัปเดตฟิลด์อื่นทั้งหมดทันที
- ถ้าค่า HSL อยู่นอกช่วงที่ถูกต้อง (hue 0–360, saturation 0–100%, lightness 0–100%) หรือรูปแบบไม่ถูกต้อง ระบบจะแสดงข้อความข้อผิดพลาด:
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” - การแปลง HSL → HEX อยู่ในช่วง RGB ที่มองเห็นได้เสมอ ไม่มีการปล่อยให้สีตก gamut
- ค่า CMYK ที่แสดงเป็นค่าประมาณบนหน้าจอ อาจต่างจากค่าที่ใช้ในการพิมพ์จริง
- การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการส่งข้อมูลใด ๆ ไปยังเซิร์ฟเวอร์
ใครควรใช้เครื่องมือนี้
- นักออกแบบที่สร้างชุดสีใน HSL และต้องการรหัส HEX เพื่อนำไปใช้ในโค้ดหรือโปรแกรมออกแบบ
- นักพัฒนา Front‑endที่ได้รับค่า HSL จากไฟล์ออกแบบ (เช่น Figma, Sketch) แล้วต้องแปลเป็น CSS property
color: #... - ทุกคนที่ปรับแต่งธีมหรือตรวจสอบ Contrast Ratioโดยใช้ Lightness ใน HSL แล้วแปลงผลลัพธ์เป็น HEX สำหรับใช้งานจริง
การแปลง HSL เป็น HEX ทำงานอย่างไร
การแปลง HSL → HEX ใช้ขั้นตอนสองชั้น:
- แปลง HSL เป็น RGB โดยใช้สมการมาตรฐาน (hue 0–360 → ปรับเป็น 0–360 แล้วลดให้อยู่ใน [0,6); saturation และ lightness เป็นทศนิยม 0–1)
- แปลง RGB แต่ละช่อง (0–255) เป็นเลขฐานสิบหกสองหลัก เช่น R=79 →
4F, G=70 →46, B=229 →E5ได้#4F46E5
เนื่องจากไม่มี gamut clipping ในขั้นตอนนี้ ค่าสีจึงตรงเป๊ะตามนิยาม sRGB
คำถามที่พบบ่อย
HSL ใช้ค่าอะไรได้บ้าง?
Hue 0–360 องศา, Saturation 0–100%, Lightness 0–100% ห้ามละเปอร์เซ็นต์ (%)
HEX รหัสสามหลักจะแสดงเมื่อไหร่?
เมื่อ RGB แต่ละช่องสามารถแทนด้วยตัวเลขฐานสิบหกซ้ำแบบคู่ เช่น #ff00ff สามารถย่อเป็น #f0f หรือ #112233 เป็น #123
ค่า CMYK ที่แสดงเชื่อถือได้ไหม?
เป็นเพียงค่าประมาณบนหน้าจอ ซึ่งอาจแตกต่างจากค่าจริงที่ใช้ในการพิมพ์ ควรใช้เป็นแนวทางเท่านั้น
ทำไมเครื่องมือนี้ไม่รองรับ Alpha?
HSL‑to‑HEX พื้นฐานไม่มี Alpha ถ้าต้องการความโปร่งใส ใช้รูปแบบ HEX แปดหลัก (#RRGGBBAA) ซึ่งต้องแปลงแยกกัน
แปลงจาก HEX กลับเป็น HSL ได้ไหม?
หน้านี้ไม่รองรับการแปลงย้อนกลับ แต่คุณสามารถใช้เครื่องมืออื่นในเว็บไซต์นี้ที่ทำ HEX‑to‑HSL ได้
ข้อมูลที่ป้อนถูกส่งไปที่ไหน?
ไม่มีการส่งข้อมูลใดๆ ทุกอย่างประมวลผลในเครื่องของคุณเอง