เครื่องมือนี้รองรับรูปแบบ hex ของ CSS ทุกแบบ ทั้ง 6 หลัก #ff5733, แบบย่อ 3 หลัก #f53 และแบบ 4 กับ 8 หลักที่มีช่อง alpha จะมีเครื่องหมาย # หรือไม่มีก็ได้ ผลลัพธ์จะแสดงทั้งสตริง rgb() หรือ rgba() ค่าแต่ละช่องสี และวิธีคำนวณทีละคู่ พร้อมช่องแปลงกลับจาก RGB เป็น HEX ในหน้าเดียวกัน ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีการอัปโหลด ไม่ต้องสมัครสมาชิก และใช้งานได้ไม่จำกัด
แปลงสี HEX เป็น RGB
ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก
rgb(255, 87, 51)255, 87, 51FF25557873351แปลงกลับ? RGB เป็น HEX
#ff5733แปลงโค้ดสี HEX เป็น RGB ยังไง
โค้ดสี hex ประกอบด้วยเลขฐานสิบหกสามคู่ แต่ละคู่แทนหนึ่งช่องสี แปลงแต่ละคู่เป็นเลขฐานสิบตั้งแต่ 0 ถึง 255: อย่าง #ff5733 ff คือแดง 255, 57 คือเขียว 87, 33 คือน้ำเงิน 51 ดังนั้นค่า RGB คือ rgb(255, 87, 51) เครื่องมือนี้แปลงให้ทันทีที่พิมพ์
วิธีใช้งาน
- 1ป้อนโค้ด HEX. พิมพ์หรือวางโค้ดสี hex เช่น #ff5733 (หรือ #f53) หรือเลือกด้วย color picker ก็ได้ ใส่ # หรือไม่ใส่ก็ได้
- 2ดูค่า RGB. สตริง rgb() ค่า 0-255 และพรีวิวสีจะอัปเดตทันทีที่พิมพ์ พร้อมแสดงวิธีแปลงแต่ละคู่ hex ให้ดู
- 3คัดลอกรูปแบบที่ต้องการ. กด Copy ข้างสตริง rgb() หรือค่าตัวเลขดิบ ต้องการแปลงกลับ? ป้อนค่าแดง เขียว น้ำเงินด้านล่างเพื่อได้โค้ด hex กลับมา
เหมาะกับใคร
- นักพัฒนา front-end ที่แปลงโค้ด hex จาก style guide เป็น rgb() เพื่อเพิ่มความโปร่งใสด้วย rgba()
- นักออกแบบ ที่ย้ายสีแบรนด์ระหว่างเครื่องมือที่ใช้ hex (CSS, Figma) กับเครื่องมือที่ใช้ค่า 0-255 (โปรแกรมสิ่งพิมพ์และวิดีโอบางตัว)
- ทีมอีเมลและมาร์เก็ตติ้ง ที่ต้องให้สีแคมเปญตรงกันระหว่างโปรแกรมที่รับสีได้แค่รูปแบบเดียว
- นักพัฒนาเกมและแอป ที่ต้องส่งค่าช่องสี 0-255 ให้ engine หรือ SDK ที่อ่านสตริง hex ไม่ได้
คำถามที่พบบ่อย
เครื่องมือแปลง HEX เป็น RGB นี้ฟรีไหม
ฟรี 100% ไม่ต้องสมัครสมาชิกและไม่จำกัดจำนวนครั้ง ทำงานในเบราว์เซอร์ทั้งหมด
สีที่ป้อนถูกอัปโหลดไปไหนไหม
ไม่ การแปลงเป็นแค่ JavaScript ที่รันบนอุปกรณ์ ไม่มีข้อมูลส่งไปเซิร์ฟเวอร์ และใช้งานแบบออฟไลน์ได้หลังจากโหลดหน้าเว็บครั้งแรก
สูตรแปลง HEX เป็น RGB คืออะไร
แยกโค้ด hex เป็นสามคู่ แล้วแปลงแต่ละคู่จากฐาน 16 เป็นฐาน 10: เอาหลักแรกคูณ 16 แล้วบวกหลักที่สอง (a=10 ... f=15) อย่าง #ff5733: ff = 15×16+15 = 255, 57 = 5×16+7 = 87, 33 = 3×16+3 = 51
รองรับแบบย่อ 3 หลักอย่าง #f53 ไหม
รองรับ ในแบบย่อของ CSS แต่ละหลักจะซ้ำตัวเอง ดังนั้น #f53 จะขยายเป็น #ff5533 แล้วแปลงเป็น rgb(255, 85, 51) แบบ 4 หลักก็ทำงานแบบเดียวกัน โดยหลักสุดท้ายคือ alpha
แปลงเป็น RGBA ยังไง
โค้ด hex 8 หลักมีค่า alpha อยู่ในคู่สุดท้าย ไบต์นั้น (0-255) จะถูกหารด้วย 255 เพื่อได้ค่า alpha แบบ 0-1 ที่ rgba() ต้องการ แล้วปัดเศษสามตำแหน่ง ดังนั้น #ff573380 จะกลายเป็น rgba(255, 87, 51, 0.502)
แปลง RGB กลับเป็น HEX ได้ไหม
ได้ ใช้ช่อง RGB to HEX ใต้ผลลัพธ์: ป้อนค่าแดง เขียว น้ำเงินตั้งแต่ 0 ถึง 255 แล้วจะได้โค้ด hex กลับมาทันที ค่าที่เกินขอบเขตจะถูกจำกัดให้อยู่ในช่วง 0-255
ทำไมต้องใช้ rgb() แทน hex
ส่วนใหญ่เพื่อเรื่อง alpha และการคำนวณ: rgba(255, 87, 51, 0.5) ทำให้สีโปร่งใสได้ และ API เกมเอนจิน หรือสเปกการออกแบบหลายตัวต้องการค่าช่องสี 0-255 แยกกัน ไม่ใช่สตริง hex