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

การแปลงสี HEX เป็น RGB: หลักการทำงานที่แม่นยำ

หน้านี้มีหน้าที่เดียวคือแปลงรหัสสีรูปแบบเลขฐานสิบหก (hexadecimal) เช่น #4f46e5 หรือ #abc ให้เป็นค่า RGB ที่ประกอบด้วยตัวเลขสามตัวระหว่าง 0 ถึง 255 สิ่งที่ทำให้หน้านี้แตกต่างจากเครื่องมือแปลงสีทั่วไปคือ วิธีการแปลงเป็นกระบวนการทางคณิตศาสตร์ที่ตรงไปตรงมา: เลขฐานสิบหกแต่ละคู่จะถูกถอดรหัสเป็นเลขฐานสิบแบบไม่มีเศษเหลือ

รหัส HEX ที่เราเห็นใน CSS หรือแบบกำหนดสีของแบรนด์ แท้จริงแล้วเป็นเพียงการย่อของค่า RGB แบบ 8 บิตต่อแชนเนลเท่านั้น ตัวอักษร #4f46e5 แทนค่าแดง เขียว น้ำเงิน ตามลำดับ เมื่อแปลงเป็นเลขฐานสิบจะได้ 79, 70, 229 ซึ่งเป็นตัวเลขที่เบราว์เซอร์และซอฟต์แวร์ออกแบบใช้จริงในการผสมสีแบบบวก (additive color model)

วิธีการแปลงทางคณิตศาสตร์

การแปลงจาก HEX เป็น RGB ใช้หลักการเลขฐานสิบหกที่每一位มีค่า 0-15 แทนด้วย 0-9 และ A-F การแปลงแต่ละคู่ของ HEX มีสูตรดังนี้:

• ค่าแรก (หลักสิบ) คูณด้วย 16
• ค่าที่สอง (หลักหน่วย) บวกเพิ่ม
• ผลลัพธ์เป็นเลขจำนวนเต็ม 0-255

ตัวอย่าง #4f46e5:

• แดง: 4f → (4 × 16) + 15 = 64 + 15 = 79
• เขียว: 46 → (4 × 16) + 6 = 64 + 6 = 70
• น้ำเงิน: e5 → (14 × 16) + 5 = 224 + 5 = 229

กรณีรหัส 3 หลัก เช่น #abc จะถูกขยายเป็น 6 หลักโดยการซ้ำตัวเลขแต่ละตัว: #abc → #aabbcc จากนั้นจึงแปลงตามปกติ ผลลัพธ์ที่ได้คือเลขจำนวนเต็มที่แน่นอน ไม่มีการปัดเศษหรือ clipping เพราะระบบเลขฐานสิบหกกับฐานสิบทำงานร่วมกันแบบ deterministic

รูปแบบอินพุตที่รองรับ

หน้านี้รองรับเฉพาะรหัส HEX มาตรฐานที่ใช้ในงานออกแบบเว็บ ดังนี้:

รหัส 8 หลักที่มี alpha channel เช่น #4f46e580 ไม่รองรับ เพราะหน้านี้ออกแบบมาเพื่อแปลงเฉพาะ RGB ล้วน ๆ โดยไม่มีค่าโปร่งใส หากป้อนรหัสที่ไม่ตรงรูปแบบ ข้อความเตือนจะแสดง: "Enter a hex color like #4f46e5 or #abc."

ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง

ผู้ใช้มักเจอปัญหาเหล่านี้เมื่อแปลง HEX เป็น RGB:

• ใช้อักษรผิด: ระบบเลขฐานสิบหกใช้เฉพาะ 0-9 และ A-F (ไม่区分ตัวพิมพ์ใหญ่-เล็ก) การใส่ตัวอักษร G, H หรืออื่น ๆ จะทำให้การแปลงล้มเหลว
• ป้อนเกิน 8 ตัว: รหัส 8 หลัก (รวม alpha) ใช้ไม่ได้ เพราะหน้านี้คาดหวังเพียง 6 หรือ 3 หลัก
• ลืม # แล้วคิดว่าต้องเพิ่ม: ที่จริง # เป็น optional เครื่องมือทำงานได้ทั้งแบบมีและไม่มี
• เข้าใจผิดว่าสี 3 หลักเหมือน 6 หลัก: #fff เท่ากับ #ffffff (ขาวล้วน) แต่ #f0f ไม่เท่ากับ #ff00ff (ม่วง) การขยายโดยซ้ำตัวเลขเป็นกฎตายตัว

การประยุกต์ใช้จริงในงานพัฒนา

ค่า RGB ที่ได้จากหน้านี้มีประโยชน์ในหลายกรณี:

• JavaScript และ Canvas: การเขียนสีใน <canvas> ต้องใช้ rgb(79, 70, 229) หรือ rgba() โดยที่ค่า RGB ต้องเป็นตัวเลข 0-255
• CSS ที่ต้องการ opacity: เมื่อต้องการใช้ rgba() โดยแยกค่า RGB ออกจาก alpha เช่น color: rgba(79, 70, 229, 0.5)
• การคำนวณความเปรียบต่าง: สูตร WCAG สำหรับ contrast ratio ใช้ค่าความสว่างสัมพัทธ์ (relative luminance) ที่คำนวณจากค่า RGB เชิงเส้น ซึ่งแปลงจาก 0-255 ได้โดยตรง
• การผสมสีแบบโปรแกรม: ในการทำ gradient หรือ color interpolation ต้องใช้ค่า RGB เป็นตัวเลขเพื่อคำนวณหาค่ากลาง

ความสัมพันธ์ระหว่าง HEX และ RGB ในมาตรฐาน CSS

ทั้ง #4f46e5 และ rgb(79, 70, 229) ทำงานเหมือนกันใน CSS3 ขึ้นไป แต่มีความแตกต่างเชิง syntactic:

• # notation: กะทัดรัดกว่า ใช้หน่วยความจำน้อยกว่า เหมาะกับค่าสีตายตัวใน stylesheet
• rgb() notation: ยืดหยุ่นกว่า สามารถเปลี่ยนค่า opacity ด้วย rgba() หรือใช้ calc() เพื่อปรับค่าตามเงื่อนไข

เบราว์เซอร์จะแปลง #4f46e5 เป็นค่าภายในแบบ 24-bit (8-bit ต่อแชนเนล) เช่นเดียวกับการป้อน rgb() ดังนั้นทั้งสองรูปแบบให้ผลลัพธ์ที่เหมือนกันทุกประการในการแสดงผล

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

ถาม: จะเกิดอะไรขึ้นถ้าป้อน #xyz? ตอบ: ตัวอักษร x, y, z ไม่ใช่เลขฐานสิบหกที่ถูกต้อง เครื่องมือจะแสดงข้อความเตือนและไม่ทำการแปลง

ถาม: ทำไม #abc ถึงเท่ากับ #aabbcc ไม่ใช่ #a0b0c0? ตอบ: หลักการขยายตามมาตรฐาน CSS คือการซ้ำตัวเลขเดิม ไม่ใช่การเติม 0 เพื่อให้ได้ 6 หลัก การเติม 0 จะเปลี่ยนสีอย่างสิ้นเชิง เช่น #abc (aabbcc) กับ #a0b0c0 มีค่า RGB ต่างกันมาก

ถาม: ใช้หน้านี้แปลง HEX 8 หลักที่มี alpha ได้หรือไม่? ตอบ: ไม่ได้ หน้านี้รองรับเฉพาะ 6 หรือ 3 หลักเท่านั้น สำหรับ HEX 8 หลักต้องใช้เครื่องมือแปลง RGBA โดยเฉพาะ

ถาม: ค่า RGB ที่ได้มีโอกาสคลาดเคลื่อนไหม? ตอบ: ไม่มี การแปลงจากเลขฐานสิบหกเป็นฐานสิบเป็น deterministic และ reversible 100% ค่า RGB ที่ได้คือจำนวนเต็มที่แน่นอน

ถาม: ป้อน HEX แบบไม่มี # แล้วผลลัพธ์ต่างจากมี # หรือไม่? ตอบ: ไม่ต่าง เครื่องมือตัด # ออกโดยอัตโนมัติก่อนแปลง ดังนั้น #4f46e5 กับ 4f46e5 ให้ค่า RGB เท่ากันทุกประการ

ถาม: การป้อนตัวอักษรพิมพ์เล็กหรือใหญ่มีผลหรือไม่? ตอบ: ไม่มี #4F46E5 และ #4f46e5 ให้ผลลัพธ์เหมือนกัน เพราะระบบเลขฐานสิบหกไม่区分 case