ตัวแปลง HEX เป็น RGB

แปลงรหัสสี HEX เป็น RGB อย่างรวดเร็ว เพียงป้อนโค้ด HEX เพื่อรับค่ารหัสสี RGB ที่ถูกต้องสำหรับการออกแบบและพัฒนาเว็บ.


วางรหัส HEX 3 หรือ 6 หลัก จะมีหรือไม่มีเครื่องหมาย # ก็ได้
ล้าง

ตัวแปลงสีคืออะไร?

ตัวแปลงสีช่วยแปลงสีเดียวกันระหว่างฟอร์แมตที่ใช้บนเว็บ การออกแบบ และงานพิมพ์ สีฟ้าเฉดเดียวกันสามารถเขียนเป็น #4F8AB2, rgb(79, 138, 178), hsl(207, 38%, 50%) หรือ cmyk(56%, 22%, 0%, 30%) ได้ - รูปแบบต่างกันแต่เป็นสีเดียวกัน

อ้างอิงรูปแบบสี

  • HEX - รหัสฐานสิบหก 6 หลักที่ใช้ใน CSS และโปรแกรมออกแบบ เช่น #4F8AB2
  • RGB - ค่าช่อง Red, Green, Blue ตั้งแต่ 0-255 ใช้ใน CSS และ API ส่วนใหญ่
  • HSL - Hue (0-360), Saturation (%), Lightness (%) - เหมาะสำหรับการปรับเชิงสายตา
  • CMYK - Cyan, Magenta, Yellow, Key สี่ช่องสำหรับงานพิมพ์

วิธีแปลง HEX เป็น RGB ด้วยตนเอง

สี HEX ก็คือเลขฐานสิบหก (base-16) จับคู่กันสามคู่เท่านั้น แปลงแต่ละคู่ให้เป็นเลขฐานสิบตั้งแต่ 0 ถึง 255

  1. แบ่ง HEX 6 หลักออกเป็นสามคู่: RR, GG, BB (ตัดเครื่องหมาย # ด้านหน้าออก)
  2. สำหรับแต่ละคู่ ให้นำหลักแรกคูณด้วย 16 แล้วบวกด้วยหลักที่สอง (A=10, B=11, … F=15)
  3. ผลลัพธ์ทั้งสามคือค่าสีแดง สีเขียว และสีน้ำเงินของคุณ

ตัวอย่าง: #4F8AB2 → 4F = 4×16 + 15 = 79, 8A = 8×16 + 10 = 138, B2 = 11×16 + 2 = 178 → rgb(79, 138, 178)

ใช้เครื่องมือนี้จาก AI agent ของคุณ

JSON API ฟรีและเซิร์ฟเวอร์ Model Context Protocol (MCP) ฟรี ไม่ต้องลงทะเบียน ไม่ต้องใช้ API key, CORS เปิด ออกแบบสำหรับ Claude, ChatGPT, Cursor, สคริปต์ และแอปฟรอนต์เอนด์ 

curl -X POST https://mate.tools/api/v1/color-convert.php \
  -H "Content-Type: application/json" \
  -d '{"color":"#FF5733"}'
import urllib.request, json

req = urllib.request.Request(
    "https://mate.tools/api/v1/color-convert.php",
    data=json.dumps({"color":"#FF5733"}).encode(),
    headers={"Content-Type": "application/json"},
)
with urllib.request.urlopen(req) as r:
    print(json.load(r))
const r = await fetch("https://mate.tools/api/v1/color-convert.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({"color":"#FF5733"}),
});
console.log(await r.json());

เพิ่มลงใน claude_desktop_config.json (Claude Desktop), ~/.cursor/mcp.json (Cursor) หรือไคลเอ็นต์อื่นที่รองรับ MCP: 

{
  "mcpServers": {
    "mate-tools": {
      "command": "npx",
      "args": ["-y", "@mate-tools/mcp-server"]
    }
  }
}
เอกสาร API OpenAPI 3.1 npm 60 คำขอ/นาที · 600 คำขอ/ชม. · เนื้อหาสูงสุด 1 MB

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

แบ่งรหัส HEX เป็นสามคู่ แล้วแปลงแต่ละคู่จากฐานสิบหกเป็นฐานสิบ ตัวอย่าง #4F8AB2: 4F = 79, 8A = 138, B2 = 178 ได้เป็น rgb(79, 138, 178) ตัวแปลงทำการคำนวณนี้ให้แบบเรียลไทม์

HEX, RGB และ HSL คือสีเดียวกันแต่เขียนต่างกัน HEX กระชับ RGB บอกค่าช่องตรง ๆ HSL ใช้ปรับเฉดสี ความอิ่มและความสว่างได้ง่ายกว่า ส่วน CMYK เป็นพื้นที่สี 4 ช่องสำหรับงานพิมพ์ คำนวณมาจาก RGB และอาจไม่ตรงกับสีบนหน้าจอเป๊ะ ๆ

ได้ HEX 3 หลักเป็นรูปแบบย่อโดยทำซ้ำแต่ละตัว ดังนั้น #FA0 จะเทียบเท่า #FFAA00 ตัวแปลงรองรับทั้งสองรูปแบบ จะมีหรือไม่มี # ก็ได้

หน้าจอใช้การผสมแบบบวก (RGB) ส่วนงานพิมพ์ใช้การผสมแบบลบ (CMYK) และไม่ใช่ทุกสี RGB ที่จะมี CMYK ตรงเป๊ะ โปรแกรมออกแบบมืออาชีพจะอ้างอิงโพรไฟล์กระดาษ หมึก และเครื่องพิมพ์ - ค่าที่นี่เป็นการแปลงทางคณิตศาสตร์ใช้เป็นจุดเริ่มต้นได้

ช่อง RGB ถูกจำกัดในช่วง 0-255 ส่วน Saturation และ Lightness ของ HSL จำกัดที่ 0-100% Hue ใช้เป็นค่า 0-360 องศา หากใส่ค่าที่นอกช่วง ระบบจะปัดกลับเข้าช่วงและอัปเดตรูปแบบอื่นให้สอดคล้องกัน

มักใช้ร่วมกับ: รับพาเลตสีจากรูปภาพ · ตัวเลือกสีรูปภาพ

แปลง HEX เป็น RGB อย่างไร?

เครื่องมือแปลง HEX เป็น RGB จะเปลี่ยนรหัสสีเฮกซ์อย่าง #FF8800 ให้เป็นค่า RGB เพื่อใช้ในเครื่องมือออกแบบและในโค้ด ตัวเลขเฮกซ์ทุกคู่คือหนึ่งช่องสี - แดง เขียว และน้ำเงิน - โดยมีค่าตั้งแต่ 0 ถึง 255

เครื่องมือที่เกี่ยวข้อง

ดูทั้งหมด
สร้างบาร์โค้ดเข้ารหัสและถอดรหัสตัวถอดรหัส JWTตรวจจับภาษาเบราว์เซอร์สร้างไอคอนเว็บไซต์ตัวดึง URL แผนผังเว็บไซต์ดึงข้อมูลชื่อและเมตาดาต้าจาก URLตัวดึงภาพจากเว็บไซต์