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