HEX กับ HSL: ความแตกต่างที่สำคัญ
รหัส HEX เป็นรูปแบบ RGB ดิบที่เขียนด้วยเลขฐานสิบหกหกหลัก (เช่น #1E90FF) หรือแบบย่อสามหลัก (#abc) ซึ่งใช้กันแพร่หลายใน CSS และเครื่องมือออกแบบ แต่การปรับค่าสีด้วย HEX ทำได้ไม่ตรงตามสัญชาตญาณ เพราะต้องเปลี่ยนเลขในแต่ละฐานสิบหกทีละตัวจึงจะเปลี่ยนความสว่างหรือความอิ่มสีได้
ในทางกลับกัน HSL ถูกออกแบบมาให้มนุษย์เข้าใจง่ายกว่า โดยวัด hue เป็นองศาบนวงล้อสี (0–360) ส่วน saturation และ lightness เป็นเปอร์เซ็นต์ (0–100%) การปรับ lightness เพียงอย่างเดียวจะคง hue ไว้不变 ทำให้ HSL เป็นรูปแบบที่นิยมใช้ในการสร้างชุดสี (palette) และระบบธีม รูปแบบทั้งสองไม่มี alpha channel ดังนั้นการแปลงจะทำงานกับสีทึบแสงเท่านั้น
การทำงานของตัวแปลง HEX เป็น HSL
เครื่องมือนี้รับรหัส HEX แบบหกหลัก (เช่น #4f46e5) หรือสามหลักย่อ (เช่น #abc) โดยจะแปลงเป็น HSL ทันที พร้อมแสดงค่าสีในรูปแบบอื่นทั้งหมดคือ HEX, RGB, HSV, CMYK และ LAB ทุกฟิลด์จะอัปเดตพร้อมกันเมื่อแก้ไข
ข้อกำหนดของอินพุต:
- ยอมรับเฉพาะรหัส HEX ที่ถูกต้องเท่านั้น (มีหรือไม่มี
#นำหน้าก็ได้) - หากใส่ค่าที่ไม่ถูกต้อง จะแสดงข้อความ error: “Enter a hex color like #4f46e5 or #abc.”
โครงสร้างของ HSL: Hue, Saturation, Lightness
- Hue (0–360 องศา) กำหนดสีบริสุทธิ์บนวงล้อ เช่น 0° = แดง, 120° = เขียว, 240° = น้ำเงิน
- Saturation (0–100%) ควบคุมความเข้มของสี 0% คือสีเทา, 100% คือสีสด
- Lightness (0–100%) ควบคุมความสว่าง 0% คือดำ, 100% คือขาว, 50% คือค่าปกติ
HSL มักถูกใช้ใน CSS custom properties และระบบ theme แบบ dark/light เพราะสามารถคง hue เดิมไว้แล้วปรับ lightness เพื่อเพิ่ม contrast หรือสร้าง hover states ได้ง่าย
เหตุผลที่ HSL ใช้งานง่ายกว่า HEX
การสร้างชุดสีแบบ complementary (สีตรงข้าม) หรือ analogous (สีใกล้เคียง) ด้วย HEX ต้องคำนวณเลขฐานสิบหกที่ซับซ้อน แต่ HSL สามารถเปลี่ยน hue ได้โดยตรง เช่น ลด hue ลง 30 องศาเพื่อให้ได้สีที่ใกล้เคียงกัน
สำหรับการตรวจสอบการเข้าถึง (accessibility) HSL ช่วยรักษา hue เดิมขณะเพิ่ม contrast เพื่อให้ผ่านเกณฑ์ WCAG โดยปรับ lightness หรือ saturation โดยไม่กระทบเฉดสี
ข้อควรระวังและขอบกรณี
- สีผิด gamut: หากป้อนค่าในรูปแบบอื่น (LAB หรือ CMYK) ที่อยู่นอกช่วงสีที่จอแสดงผลได้ สีจะถูกปรับให้ใกล้เคียงที่สุด เมื่อแปลงกลับเป็น HEX อาจเกิดการเปลี่ยนแปลงเล็กน้อย
- CMYK เป็นค่าประมาณ: ค่า CMYK ที่แสดงเป็นค่าประมาณบนหน้าจอ ไม่ควรใช้สำหรับงานพิมพ์มืออาชีพโดยไม่ปรับเทียบกับเครื่องพิมพ์จริง
- การทำงานในเบราว์เซอร์: การแปลงทั้งหมดเกิดขึ้นในเบราว์เซอร์ ไม่มีการอัปโหลดหรือจัดเก็บข้อมูลใด ๆ
ใครควรใช้เครื่องมือนี้
- นักพัฒนา Front‑end: เขียน CSS จาก mockup ที่ใช้ HEX ต้องการแปลงเป็น HSL เพื่อปรับ lightness สำหรับ hover states หรือ theme variants
- นักออกแบบ UI/UX: คิดในแง่ของ hue, saturation, lightness และต้องการจับคู่สีแบรนด์ที่กำหนดด้วย HEX
- ผู้สร้างชุดสี: HSL ทำให้การสร้างสี complementary, analogous หรือ monochromatic ทำได้ง่ายโดยแก้เฉพาะ hue หรือ saturation
- ผู้ตรวจสอบการเข้าถึง: ใช้ HSL เพื่อหาค่า contrast ที่พอดีและผ่านเกณฑ์ WCAG
คำถามที่พบบ่อย (FAQ)
1. รหัส HEX 3 หลักย่อ (#abc) แปลงเป็น HSL ได้อย่างไร?
แต่ละหลักจะถูกขยายเป็นคู่ เช่น #abc กลายเป็น #aabbcc แล้วจึงคำนวณ HSL ตามปกติ
2. ทำไม HSL ถึงไม่มี alpha channel? HSL เป็นรูปแบบสีที่ไม่มี alpha โดยค่าเริ่มต้น สีที่แปลงจาก HEX (หกหลักหรือสามหลัก) จะเป็นสีทึบแสงเสมอ
3. ถ้าใส่รหัส HEX ไม่ถูกต้องจะเกิดอะไร? เครื่องมือจะแสดงข้อความ error “Enter a hex color like #4f46e5 or #abc” และไม่ทำการแปลงใด ๆ
4. ค่า CMYK ที่แสดงนำไปพิมพ์จริงได้ไหม? ไม่แนะนำ ค่า CMYK ที่เห็นเป็นเพียงค่าประมาณบนหน้าจอ ควรปรับเทียบกับเครื่องพิมพ์หรือใช้เครื่องมือเฉพาะทาง
5. ข้อมูลที่ป้อนถูกส่งไปที่ไหน? ไม่ถูกส่งไปที่ไหน การแปลงทั้งหมดทำงานภายในเบราว์เซอร์ของคุณเท่านั้น
6. HSL ต่างจาก HSV อย่างไร? ทั้งสองใช้ hue ร่วมกัน แต่ใน HSV (Hue, Saturation, Value) ค่า Value จะแทนความสว่างรวม (คล้าย lightness แต่ต่างนิยาม) และ saturation ทำงานต่างกัน โดย HSL มีความสัมพันธ์เชิงเส้นกับ percept ของมนุษย์มากกว่า