วิธีแปลง hex เป็น RGB
- พิมพ์หรือวางโค้ดสี hex ลงในช่อง โค้ดสี Hex จะมีหรือไม่มี
#ก็ได้ หรือคลิกช่องสีเพื่อเลือกสี - ดูผลลัพธ์ในรูปแบบ
rgb()และค่าสีแดง เขียว น้ำเงินบนแถบเลื่อน พร้อมค่า HSL, HSV และ CMYK - คัดลอกรูปแบบใดก็ได้ในคลิกเดียว สูตรข้างรูปแบบสีจะแสดงว่าเลข hex แต่ละคู่กลายเป็นตัวเลข 0 ถึง 255 ได้อย่างไร
สูตรแปลง Hex เป็น RGB
โค้ดสี hex คือข้อมูล 3 ไบต์ที่เขียนเป็นเลขฐานสิบหก: #RRGGBB เลขแต่ละคู่คือช่องสีหนึ่งช่อง มีค่าตั้งแต่ 00 (0) ถึง FF (255) วิธีแปลงแต่ละคู่คือนำหลักแรกคูณด้วย 16 แล้วบวกหลักที่สอง โดยนับ A = 10, B = 11, C = 12, D = 13, E = 14 และ F = 15 ตัวอย่างสำหรับ #7C3AED:
- แดง:
7C= 7 × 16 + 12 = 124 - เขียว:
3A= 3 × 16 + 10 = 58 - น้ำเงิน:
ED= 14 × 16 + 13 = 237
ดังนั้น #7C3AED = rgb(124, 58, 237)
โค้ดสี hex แบบย่อและแบบโปร่งใส
โค้ด 3 หลักเป็นรูปแบบย่อที่แต่ละหลักถูกเขียนซ้ำสองครั้ง: #F80 = #FF8800 = rgb(255, 136, 0) ส่วนโค้ด 8 หลักจะเพิ่มไบต์ alpha สำหรับความทึบ: ใน #7C3AED80 คู่สุดท้าย 80 = 128 และ 128 ÷ 255 ≈ 0.5 จึงเท่ากับ rgba(124, 58, 237, 0.5) รูปแบบ 4 หลัก #RGBA ก็ทำงานแบบเดียวกัน
โค้ดสี hex ที่ใช้บ่อยและค่า RGB
| สี | Hex | RGB |
|---|---|---|
| ขาว | #FFFFFF | rgb(255, 255, 255) |
| ดำ | #000000 | rgb(0, 0, 0) |
| แดง | #FF0000 | rgb(255, 0, 0) |
| เขียวมะนาว (Lime) | #00FF00 | rgb(0, 255, 0) |
| น้ำเงิน | #0000FF | rgb(0, 0, 255) |
| เหลือง | #FFFF00 | rgb(255, 255, 0) |
| ส้ม | #FFA500 | rgb(255, 165, 0) |
| เทา | #808080 | rgb(128, 128, 128) |
| กรมท่า | #000080 | rgb(0, 0, 128) |
| ม่วง | #800080 | rgb(128, 0, 128) |
| เขียวหัวเป็ด | #008080 | rgb(0, 128, 128) |
คำถามที่พบบ่อย
แปลง hex เป็น RGB ด้วยมือทำอย่างไร?
แบ่งโค้ดเป็นสามคู่ แล้วแปลงแต่ละคู่จากเลขฐานสิบหก: หลักแรก × 16 + หลักที่สอง สำหรับ #1E90FF: 1E = 30, 90 = 144 และ FF = 255 สีนี้จึงเป็น rgb(30, 144, 255)
โค้ดสี hex 3 หลักอย่าง #F80 หมายความว่าอะไร?
เป็นรูปแบบย่อของโค้ด 6 หลักที่แต่ละหลักถูกเขียนซ้ำ: #F80 = #FF8800 = rgb(255, 136, 0) เฉพาะสีที่ทุกคู่มีเลขสองหลักเหมือนกันเท่านั้นที่ย่อได้
แปลง hex เป็น RGB ใน JavaScript หรือ Python ได้อย่างไร?
JavaScript: [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)) สำหรับโค้ดแบบ #RRGGBB ส่วน Python: tuple(int(h[i:i + 2], 16) for i in (1, 3, 5)) ใน CSS ไม่ต้องแปลงเลย – ใช้ได้ทั้งสองรูปแบบ
ใน CSS ควรใช้ hex หรือ RGB ดีกว่ากัน?
ทั้งสองแบบแทนสีเดียวกันทุกประการ hex สั้นกว่าและนิยมใช้ในโปรแกรมออกแบบ ส่วน rgb() อ่านและปรับค่าได้ง่ายกว่า และเห็นความโปร่งใสได้ชัดด้วย rgba() เบราว์เซอร์รุ่นใหม่ยังรองรับโค้ด hex 8 หลักที่มี alpha ด้วย