โค้ด HEX ย่อสามตัวเลข 8-bit ลงในหกหลักฐานสิบหก การแปลง HEX เป็น RGB คือการแยกตัวเลขเหล่านั้นเป็นคู่ ๆ แล้วอ่านแต่ละคู่เป็นเลขฐานสิบ (0 ถึง 255) — ค่าที่ CSS, Figma และโปรแกรมแต่งรูปคาดหวัง
วิธีการแปลงจาก HEX เป็น RGB
- ตัดเครื่องหมาย # นำหน้าออก แล้วถ้ารหัสมีแค่สามหลัก ให้ขยายแต่ละหลักเป็นสองหลัก: #f53 จะกลายเป็น #ff5533
- แยกหกหลักเป็นสามคู่ — RR, GG และ BB
- อ่านแต่ละคู่เป็นเลขฐาน 16 แล้วแปลงเป็นฐาน 10: FF เป็น 255, 57 เป็น 87, 33 เป็น 51
- เขียนผลลัพธ์ทั้งสามเป็น rgb(R, G, B)
ตัวอย่างที่ทำงานได้
การแปลงนี้แม่นยำ HEX และ RGB อธิบายค่า sRGB เดียวกันในสัญกรณ์ต่างกัน ดังนั้นจะไม่มีการปัดหรือสูญเสียข้อมูลทั้งสองทิศทาง
HEX และ RGB อธิบาย
HEX คืออะไร?
โค้ด HEX เป็นเลขฐานสิบหกหกหลักที่เก็บช่องสัญญาณแดง เขียว น้ำเงินของสีไว้หลังเครื่องหมายนำหน้า # แต่ละคู่ตัวเลขแทนช่องหนึ่งช่อง ตั้งแต่ 00 (ไม่มี) ถึง FF (เต็ม) ซึ่งให้สีเดียวกับ RGB ประมาณ 16.7 ล้านสีในรูปแบบที่สั้นกว่า HEX เป็นค่าปริยายใน CSS เครื่องมือออกแบบ และแนวทางแบรนด์
- ไวยากรณ์:
- #RRGGBB
- ช่วงค่า:
- 00–FF ต่อช่อง
- เหมาะสำหรับ:
- CSS การส่งมอบงานออกแบบ แนวทางแบรนด์
RGB คืออะไร?
RGB อธิบายสีเป็นสามช่องของแสง — แดง เขียว น้ำเงิน — แต่ละช่องมีค่า 0 ถึง 255 มันสะท้อนการทำงานจริงของหน้าจอ: ทั้งสามช่องเป็น 255 ให้สีขาว ทั้งสามช่องเป็น 0 ให้สีดำ RGB เหมาะเมื่อต้องคำนวณกับสี เช่น การแอนิเมตช่องเดียว ผสมสีในโค้ด หรือเพิ่มความโปร่งใสด้วย rgba()
- ไวยากรณ์:
- rgb(R, G, B)
- ช่วงค่า:
- 0–255 ต่อช่อง
- เหมาะสำหรับ:
- โค้ด แคนวาส ความโปร่งใสด้วย rgba()
ตารางอ้างอิงจาก HEX เป็น RGB
สี CSS ที่ใช้บ่อยที่สุด แปลงจาก HEX เป็น RGB
| สี | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |