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

หน้านี้แปลง RGB เป็น Hex อย่างไร และแตกต่างจากเครื่องมืออื่นตรงไหน

หน้านี้รับค่าแดง เขียว น้ำเงิน (RGB) ทีละสามตัวเลข แต่ละตัวอยู่ในช่วง 0–255 แล้วแสดงรหัสสีฐานสิบหก (hexadecimal) ที่เทียบเท่าทันที เช่น ป้อน 79, 70, 229 จะได้ #4F46E5 พร้อมทั้งแสดงตัวอย่างสีและอัปเดตฟิลด์รูปแบบสีอื่นทั้งหมด (HSL, HSV, CMYK, LAB, และตัวเลือกสี) โดยอัตโนมัติ ความแตกต่างที่สำคัญคือ RGB ที่ป้อนกับ Hex ที่ได้อยู่ในพื้นที่สี sRGB เดียวกันทุกประการ จึงไม่มีการตัดเฉือนหรือประมาณค่าใด ๆ การแปลงจึงแม่นยำและย้อนกลับได้สมบูรณ์ — แตกต่างจากเครื่องมืออื่นที่อาจต้องปรับช่วงสีหรือใช้พื้นที่สีต่างกัน เอาต์พุต Hex จะขึ้นต้นด้วย # เสมอและมี 6 หลัก เพราะค่า 0–255 แต่ละช่องจะแปลงเป็นเลขฐานสิบหกสองหลัก (เช่น 255 → FF) โดยไม่มีช่องอัลฟา

คณิตศาสตร์เบื้องหลังการแปลงจาก RGB เป็นฐานสิบหก

การแปลงใช้การหารด้วย 16 และเก็บเศษไว้ ตัวอย่าง: ถ้า R = 79

• 79 ÷ 16 = 4 เศษ 15 → ตัวเลขฐานสิบหกหลักแรก (4)
• เศษ 15 ในฐานสิบหกคือ F → หลักที่สอง
• ดังนั้น 79 → 4F

ทำซ้ำกับ G = 70 → 46, B = 229 → E5
รวมเป็น #4F46E5
กระบวนการนี้ใช้หลักการเดียวกับการแปลงเลขฐานสิบเป็นฐานสิบหก สำหรับสามช่องสัญญาณ (RGB) จะได้คู่เลขฐานสิบหกสามคู่รวมเป็นหกหลักเสมอ เนื่องจาก RGB แต่ละช่องมีค่าระหว่าง 0–255 (ซึ่งเขียนแทนด้วย 00–FF) ดังนั้น Hex ที่ได้จึงเป็น 6 หลักเสมอ เครื่องมือจะไม่ยุบเป็นรูปแบบย่อสามหลัก (เช่น #AABBCC จะไม่กลายเป็น #ABC) อย่างไรก็ตาม ช่องป้อนข้อมูล Hex รองรับรูปแบบย่อสามหลัก (เช่น #abc) ซึ่งจะถูกขยายเป็นหกหลักโดยอัตโนมัติในเบื้องหลัง

ข้อกำหนดในการป้อนข้อมูลและข้อผิดพลาดที่พบบ่อย

ช่องป้อน RGB คาดหวังตัวเลขสามตัวคั่นด้วยจุลภาคหรือช่องว่าง รูปแบบที่ถูกต้องเช่น 79, 70, 229 หรือ 79 70 229 หากป้อนตัวเลขที่อยู่นอกช่วง 0–255 หรือใช้รูปแบบไม่ถูกต้อง เครื่องมือจะแสดงข้อความข้อผิดพลาด:
“Enter RGB as three numbers 0–255, like 79, 70, 229.”
การแก้ไขฟิลด์ใดฟิลด์หนึ่ง (RGB, Hex, HSL, ฯลฯ) จะอัปเดตทุกฟิลด์ทันทีโดยไม่ต้องกดปุ่มแปลง เนื่องจาก RGB และ Hex ใช้ช่วงสี sRGB ร่วมกัน จึงไม่มีปัญหาการแปลงนอกช่วงแม่สี (out‑of‑gamut) ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของผู้ใช้ ข้อมูลที่ป้อนจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใด ๆ

กลุ่มเป้าหมายที่ควรใช้เครื่องมือนี้

• นักพัฒนาส่วนหน้า (front‑end) ที่เขียน CSS หรือ inline style ที่ต้องใช้ค่า Hex
• นักออกแบบ UI/UX ที่ได้รับสเปกสีเป็น RGB triplet จากซอฟต์แวร์ตกแต่งภาพ เช่น Photoshop หรือ GIMP และต้องการแปลงเป็น Hex เพื่อใช้ในโค้ดหรือเครื่องมือส่งมอบงานออกแบบ
• นักออกแบบกราฟิกที่ทำงานกับสินทรัพย์เว็บ ที่ต้องการความสม่ำเสมอของสีระหว่างต้นแบบที่ใช้ RGB และการนำไปใช้จริงด้วย Hex
• นักเรียนหรือผู้ที่สนใจ เรียนรู้ว่าสีดิจิทัลทำงานอย่างไร และเปลี่ยนระหว่างเลขฐานสิบกับฐานสิบหก
• ผู้ใช้ทั่วไป ที่ได้ค่า RGB จากเครื่องมือเลือกสีในเบราว์เซอร์แล้วต้องการ Hex สำหรับสไตล์ชีต

ระบบสีแบบบวก (Additive) และพื้นที่สี sRGB

RGB เป็นระบบสีแบบบวก เริ่มจากความมืดสนิท (0,0,0) แล้วเพิ่มแสงสีแดง เขียว น้ำเงินเพื่อสร้างสีต่างๆ ค่า 0–255 ต่อช่องมาจากความลึกสี 8 บิต (2^8 = 256 ค่า) Hexadecimal เป็นเพียงวิธีการเขียนเลขฐานสิบหกที่กระชับกว่า เช่น rgb(255,255,255) เขียนเป็น #FFFFFF
พื้นที่สี sRGB เป็นมาตรฐานสำหรับหน้าจอส่วนใหญ่ การแปลงระหว่าง RGB (0–255) กับ Hex จึงไม่มีการสูญเสีย เพราะทั้งสองแสดงช่วงสีเดียวกัน โปรดทราบว่าเมื่อต้องการพิมพ์งาน สี sRGB อาจต่างจากสีที่ได้จากระบบ CMYK แบบ subtractive (แบบหักล้างแสง) เนื่องจากใช้หลักการทางกายภาพต่างกัน

การใช้ Hex ใน CSS และข้อควรระวัง

ใน CSS สามารถใช้ Hex ได้ทั้ง 6 หลักและ 3 หลักแบบย่อ เช่น color: #4F46E5; หรือ background-color: #abc; ซึ่งจะถูกตีความเป็น #AABBCC หากต้องการเพิ่มช่องอัลฟ่าต้องใช้รูปแบบ 8 หลัก เช่น #4F46E580 (80 = 50% opacity) แต่เครื่องมือนี้ไม่รองรับการป้อน 8 หลักในช่อง RGB โดยตรง ข้อผิดพลาดที่พบบ่อยคือการลืมเครื่องหมาย # นำหน้า หรือใช้ตัวอักษรที่ไม่ใช่เลขฐานสิบหก (เช่น #G12345) นอกจากนี้ ควรระวังว่าสีที่แสดงบนหน้าจออาจแตกต่างจากสีที่พิมพ์จริง เนื่องจากข้อจำกัดของพื้นที่สีของกระดาษและโปรไฟล์การพิมพ์

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

1. ถ้าป้อนค่า RGB ที่เกิน 255 จะเกิดอะไรขึ้น
เครื่องมือจะแสดงข้อความข้อผิดพลาดทันที: “Enter RGB as three numbers 0–255, like 79, 70, 229.”

2. เหตุใด Hex ที่ได้ถึงมี 6 หลักเสมอ ไม่ใช่ 3 หลักย่อ
เพราะค่า RGB แต่ละช่อง 0–255 ต้องการเลขฐานสิบหกสองหลักพอดี (เช่น 255 → FF) การจะยุบเป็น 3 หลักจะต้องให้แต่ละคู่เป็นเลขซ้ำ เช่น #AABBCC → #ABC แต่เครื่องมือนี้ไม่บังคับยุบ อย่างไรก็ตาม ช่องป้อน Hex รองรับรูปแบบย่อ (เช่น #abc) และขยายให้อัตโนมัติ

3. เครื่องมือนี้ส่งข้อมูลของฉันไปที่เซิร์ฟเวอร์หรือไม่
ไม่ การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณเท่านั้น ไม่มีข้อมูลใดถูกส่งออกไป

4. ค่า Hex ที่ได้สามารถใช้กับ CSS ได้ทันทีหรือไม่
ได้ เพียงคัดลอกโค้ดที่ขึ้นต้นด้วย # (เช่น #4F46E5) ไปใส่ใน properties เช่น color, background-color ได้เลย

5. หากต้องการสีที่มีความโปร่งใส (alpha) จะทำอย่างไร
เครื่องมือนี้ไม่รองรับช่องอัลฟาโดยตรงจากช่อง RGB แต่คุณสามารถเพิ่มสองหลักต่อท้าย Hex 6 หลักด้วยตัวเอง เช่น #4F46E580 (80 = 50% opacity) อย่างไรก็ตาม CSS สมัยใหม่รองรับรูปแบบ rgba() หรือ hsla() ด้วยเช่นกัน

6. ทำไมสีที่เห็นบนหน้าจอจึงแตกต่างจากสีที่พิมพ์ออกมา
เนื่องจาก RGB/Hex ใช้พื้นที่สี sRGB (additive) สำหรับหน้าจอ ในขณะที่การพิมพ์ใช้ CMYK (subtractive) และโปรไฟล์สีของกระดาษอาจต่างกัน ทำให้สีอาจเพี้ยนเมื่อเปลี่ยนจากจอไปเป็นกระดาษ