แปลง HEX เป็น RGB

เปลี่ยนสี HEX เป็น RGB

HEX และ RGB อธิบายสีเดียวกันด้วยสองรูปแบบ รหัส HEX อย่าง #8997BB คือเลขฐานสิบหกสามคู่สำหรับแดง เขียว และน้ำเงิน RGB เขียนปริมาณเดียวกันเป็นตัวเลขธรรมดาตั้งแต่ 0 ถึง 255: rgb(137, 151, 187)

วางรหัส HEX แล้วเครื่องมือจะคืนค่า RGB ซึ่งคุณต้องใช้ในโปรแกรมออกแบบและสร้างกราฟหลายตัว สำหรับเพิ่มความโปร่งใสด้วย rgba() และสำหรับโค้ดที่ทำงานกับช่องสีแยกกัน

การคำนวณง่ายแต่น่าเบื่อ: แต่ละคู่ถูกแปลงจากฐาน 16 เป็นฐาน 10 89 ในฐานสิบหกคือ 8×16 + 9 = 137

วิธีใช้เครื่องมือแปลง HEX เป็น RGB

1. ใส่สี HEX ที่ขึ้นต้นด้วย # เช่น #8997BB ถ้าไม่มี # เครื่องมือจะไม่รู้ว่าเป็นรหัส HEX และแสดงข้อผิดพลาด
2. ส่งเพื่อแปลง
3. คัดลอกค่า RGB

ตัวอย่าง

สีม่วงอมฟ้าของแบรนด์

ข้อมูลเข้า: #8997BB

ผลลัพธ์: rgb(137,151,187)

สีลาเวนเดอร์

ข้อมูลเข้า: #C6CDE5

ผลลัพธ์: rgb(198,205,229)

รูปย่อสามหลัก

ข้อมูลเข้า: #fa0

ผลลัพธ์: rgb(255,170,0)

แต่ละหลักถูกเขียนซ้ำ: #fa0 คือ #ffaa00

HEX แปดหลักพร้อม alpha

ข้อมูลเข้า: #8997BB80

ผลลัพธ์: rgba(137,151,187,0.5)

แถว rgb() ไม่สนใจ alpha แต่แถว rgba() เก็บไว้: 80 ในฐานสิบหกคือ 128 จาก 255 แสดงเป็น 0.5 แถว HEXA จึงอ่านเป็น #8997bb7f เพราะ 0.5 แปลงกลับเป็น 127 (7f)

ทุกฟอร์แมตพร้อมกัน

ข้อมูลเข้า: #8997BB

ผลลัพธ์:

rgb(137,151,187)
hsl(223,27%,64%)
hsv(223,27%,73%)
rgba(137,151,187,1)
#8997bbff

การแปลงครั้งเดียวให้ RGB, HSL, HSV, RGBA และ HEXA แปดหลัก คุณจึงคัดลอกแบบที่แอปต้องการได้

การใช้งานที่พบบ่อย

• แปลงสีแบรนด์สำหรับโปรแกรมออกแบบที่ใช้ RGB
• เขียนสี rgba() ที่มีความโปร่งใสใน CSS
• ตั้งค่าสีในโค้ด กราฟ หรือเอกสาร Office
• จับคู่สีให้ตรงกันในหลายแอป
• ใส่สีแบรนด์ในแอปที่รับแค่ RGB เช่น โปรแกรมตัดต่อวิดีโอและโปรแกรมสำนักงานบางตัว
• ตั้งค่าเลเยอร์โปร่งแสงใน CSS ด้วย rgba()
• ใช้ HSL เพื่อสร้างเฉดที่สว่างหรือเข้มขึ้นของสีเดียวกัน

เคล็ดลับและสิ่งที่ควรรู้

• HEX สามหลักอย่าง #FFF ขยายเป็น #FFFFFF ซึ่งคือ rgb(255, 255, 255)
• หากต้องการเพิ่มความโปร่งใส ใช้ rgba(137, 151, 187, 0.5) สำหรับความทึบ 50%
• สำหรับฟอร์แมตอื่นทั้งหมด (HSL, HSV และอื่นๆ) ใช้เครื่องมือแปลงสี หากต้องการแปลงกลับ ใช้แปลง RGB เป็น HEX

กรณีพิเศษและข้อจำกัด

• ต้องมี # เสมอ 8997BB อย่างเดียวจะถูกปฏิเสธ
• ผลลัพธ์ไม่มีช่องว่างหลังจุลภาค ทั้ง rgb(137,151,187) และ rgb(137, 151, 187) เป็น CSS ที่ถูกต้อง
• หลักที่ไม่ถูกต้อง (อะไรก็ตามนอกจาก 0–9 และ A–F) ทำให้แสดงข้อผิดพลาดแทนการเดา
• รูปย่อสี่หลักพร้อม alpha (#f008) ไม่รองรับ ให้ขยายเป็นแปดหลัก

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

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

แบ่งรหัส HEX เป็นสามคู่แล้วแปลงแต่ละคู่จากฐาน 16 เป็นฐาน 10 #FF8000 กลายเป็น 255, 128, 0

HEX เหมือน RGB ไหม?

ทั้งสองอธิบายสีเดียวกัน HEX เป็นแค่วิธีเขียนค่า RGB แบบเลขฐานสิบหกที่กระชับ

#000000 ใน RGB คืออะไร?

rgb(0, 0, 0) ซึ่งคือสีดำ

HEX ใส่ความโปร่งใสได้ไหม?

ได้ HEX แปดหลักเพิ่ม alpha เป็นคู่สุดท้าย เช่น #8997BB80

ค่า HSL และ HSV หมายถึงอะไร?

ทั้งสองอธิบาย hue (มุมสี 0–360) ความอิ่มตัว และความสว่าง (HSL) หรือ value/ความสว่าง (HSV) การเปลี่ยนแค่ตัวเลขสุดท้ายให้สีเดิมที่สว่างหรือเข้มขึ้น

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

• แปลง RGB เป็น HEX: แปลงหน่วยสี RGB เป็น HEX ได้ง่ายๆ ด้วยเครื่องมือนี้
• เครื่องมือแปลงสี: แปลงสีของคุณเป็นรูปแบบอื่นๆ ได้หลายแบบ
• เลือกสี: วิธีที่ง่ายที่สุดในการเลือกสีจากวงล้อสีและรับผลลัพธ์ในทุกฟอร์แมต
• แปลงเลขฐานสิบหก: แปลงข้อความเป็นเลขฐานสิบหกและกลับกันสำหรับสตริงใดก็ได้
• เครื่องมือบีบอัดรูปภาพ: บีบอัดและปรับแต่งรูปภาพให้ขนาดเล็กลงแต่ยังคุณภาพสูง