วิธีแปลงสี HEX เป็น RGB พร้อมตัวอย่าง

ในการออกแบบเว็บ สีเขียนได้หลายรูปแบบ: HEX (#FF5733), RGB (rgb(255, 87, 51)) และ HSL การแปลงระหว่างรูปแบบช่วยให้ใช้งานสีเดียวกันได้ทุกที่

สี HEX คืออะไร

HEX เป็นเลขฐาน 16 6 หลัก (#RRGGBB):

• 2 หลักแรก = แดง (Red)
• 2 หลักกลาง = เขียว (Green)
• 2 หลักท้าย = น้ำเงิน (Blue)

วิธีแปลง HEX → RGB

แปลงเลขฐาน 16 แต่ละคู่เป็นเลขฐาน 10:

• FF = 255, 57 = 87, 33 = 51

#FF5733 → rgb(255, 87, 51)

ตัวอย่างเพิ่มเติม

HEX	RGB
#000000	rgb(0, 0, 0) — ดำ
#FFFFFF	rgb(255, 255, 255) — ขาว
#FF0000	rgb(255, 0, 0) — แดง
#00FF00	rgb(0, 255, 0) — เขียว
#0000FF	rgb(0, 0, 255) — น้ำเงิน

แปลงกลับ RGB → HEX

แปลงแต่ละค่าเป็นเลขฐาน 16: 255 = FF, 87 = 57, 51 = 33 → #FF5733

รูปแบบย่อ 3 หลัก

HEX 3 หลัก (#F53) ย่อมาจาก #FF5533 — ใช้ได้เมื่อสีแต่ละคู่ซ้ำกัน

ใช้กับอะไรบ้าง

• เขียน CSS และออกแบบเว็บ
• ทำงานกับเครื่องมือดีไซน์ (Figma, Photoshop)
• จับคู่สีแบรนด์ให้ตรงข้ามทุกแพลตฟอร์ม

ลองใช้ เครื่องแปลงสี เพื่อแปลงสีทันที

ทีละขั้น: ตัวอย่างการคำนวณจริงจาก HEX เป็น RGB

สำหรับคนที่ยังงงว่าตัวเลขมาจากไหน เราขอลอกให้ดูทีละบรรทัดเลย ยกตัวอย่างสี #4A90D9 ที่เหมาะกับธีมเว็บโทนฟ้า

ขั้นตอน	คำนวณ	ผลลัพธ์
คู่แรก 4A	4×16 + 10 = 64 + 10	R = 74
คู่กลาง 90	9×16 + 0 = 144 + 0	G = 144
คู่ท้าย D9	13×16 + 9 = 208 + 9	B = 217

จำไว้ว่าตัวอักษร A–F มีค่า 10–15 ตามลำดับ ดังนั้น A = 10, D = 13 ส่วนสูตรคือ “เลขหลักแรก × 16 + เลขหลักที่สอง” แค่นี้ก็ได้คำตอบทุกครั้ง #4A90D9 → rgb(74, 144, 217)

ข้อผิดพลาดที่คนไทยพลาดบ่อย

จากที่ทีมงานเราทำเว็บให้ร้านอาหารและ SME ไทยมาหลายปี มีจุดที่เจอซ้ำ ๆ ดังนี้

• ก๊อปสีมาจากโปรแกรมออกแบบแล้วลืมวงเล็บเครื่องหมาย # — ทำให้ CSS ไม่แสดงสีเลย เพราะเบราว์เซอร์ไม่รู้จักค่าที่ไม่ขึ้นต้นด้วย #
• เขียน RGB ผิดลำดับ — บางคนคิดว่าเป็น R-B-G ทำให้สีที่ได้เพี้ยนไปคนละโทน ลำดับที่ถูกคือ แดง เขียว น้ำเงิน เสมอ
• ลืมว่า HEX ต้องเป็นตัวอักษร 0-9 กับ A-F เท่านั้น — ถ้าเจอตัว G-Z แปลว่าก๊อปผิดหรือพิมพ์ผิด
• สลับ HEX กับ RGB ตอนวางในช่องเครื่องมือ — วาง rgb(74, 144, 217) ในช่อง HEX แล้วงงว่าทำไมผลลัพธ์ไม่ตรง ลองเช็กตัวพร้อมเครื่องหมาย # ก่อนกดแปลง

จากประสบการณ์ทีมงาน: ทำไมร้านค้าไทยควรรู้เรื่องนี้

ทีมงานเราเจอบ่อยมากว่าร้านอาหารส่งโลโก้มาเป็นไฟล์รูป แล้วเวลาเราทำเว็บหรือแบนเนอร์โปรโมชัน ต้องการสีพื้นหลังให้เข้ากับโลโก้พอดี ถ้าเจ้าของร้านไม่มีค่าสี HEX หรือ RGB ของแบรนด์ไว้ เราต้องไล่หยิบสีจากภาพ ซึ่งอาจเพี้ยนเล็กน้อยได้ตามคุณภาพไฟล์

เคล็ดลับง่าย ๆ ที่เราแนะนำลูกค้าทุกราย: ขอไฟล์โลโก้ต้นฉบับจากนักออกแบบพร้อมค่าสีเป็น HEX อย่างน้อย 2-3 สีหลัก แล้วเก็บไว้เป็นเอกสารแบรนด์ เวลาไปทำสื่อที่ไหนก็แจกค่าสีได้ทันที ไม่ต้องเดา สีแบรนด์จะตรงกันทั้งเว็บ โซเชียล ป้ายหน้าร้าน และสติกเกอร์เดลิเวอรี ต้นทุนการสื่อสารแบรนด์จะถูกลงมาก

HEX กับ RGB ใช้ต่างกันอย่างไรในทางปฏิบัติ

สองรูปแบบนี้ให้สีเดียวกันทุกประการ ต่างกันแค่รูปแบบการเขียน เลือกใช้ตามสถานการณ์ได้เลย

สถานการณ์	รูปแบบที่แนะนำ	เหตุผล
เขียน CSS ทั่วไป	HEX	สั้น อ่านง่าย ก๊อปจากดีไซน์เครื่องมือได้ตรง ๆ
ปรับความโปร่งใสด้วย rgba()	RGB	ต้องใช้รูปแบบ rgba(255, 87, 51, 0.5)
ทำพล็อตกราฟหรือสคริปต์	RGB	เหมาะกับการคำนวณด้วยตัวเลขฐาน 10
กำหนดสีแบรนด์ในเอกสาร	HEX	เป็นมาตรฐานที่ดีไซเนอร์ส่วนใหญ่คุ้นเคย

สิ่งที่ผู้ใช้จริงถามเราบ่อย

ถาม: สีลบมืด (สีน้ำตาล ดำเทา) บนจอคอมกับมือถือไม่เหมือนกัน แปลงผิดหรือเปล่า? ตอบ: ไม่ใช่ความผิดพลาดของการแปลง เพราะค่า HEX และ RGB เดียวกันแสดงผลต่างกันได้ตามหน้าจอและโปรไฟล์สีของอุปกรณ์ วิธีลดปัญหาคือทดสอบ