วิธีแปลงรหัสสี HEX เป็น RGB
HEX และ RGB เป็นสองวิธีในการเขียนสีเดียวกัน นักออกแบบและนักพัฒนาสลับไปมาระหว่างทั้งสองอย่างต่อเนื่อง — HEX ใน CSS, RGB ในแอนิเมชัน JavaScript, HSL ในเครื่องมือออกแบบ การทำความเข้าใจการเชื่อมต่อทำให้การทำงานกับสีง่ายขึ้นมาก
HEX ทำงานอย่างไร
รหัสสี HEX เช่น #FF5733 เป็นเลขฐานสิบหก 6 หลักที่แสดงช่องสัญญาณสีแดง สีเขียว และสีน้ำเงิน:
| ส่วน | เลขฐานสิบหก | เลขฐานสิบ | ช่องสัญญาณ |
|---|---|---|---|
| FF | FF | 255 | แดง |
| 57 | 57 | 87 | เขียว |
| 33 | 33 | 51 | น้ำเงิน |
แต่ละช่องสัญญาณไปจาก 00 (0 ไม่มีสี) ถึง FF (255 ความเข้มสูงสุด) ดังนั้น #FF5733 หมายถึงสีแดงเต็มที่ สีเขียวปานกลาง สีน้ำเงินเล็กน้อย — ซึ่งให้สีแดงส้มอบอุ่น
วิธีแปลง HEX เป็น RGB
- ป้อนรหัส HEX ของคุณ — พิมพ์หรือวางรหัสเช่น #FF5733 หรือใช้ตัวเลือกสี
- ดูค่า RGB — ดูค่าเทียบเท่าในสีแดง สีเขียว และสีน้ำเงิน (0-255 แต่ละค่า)
- คัดลอกในรูปแบบใดก็ได้ — รับค่าใน
rgb(255, 87, 51)ช่องสัญญาณแต่ละช่อง หรือรูปแบบอื่นเช่น HSL
รหัสสีที่พบบ่อย
| สี | HEX | RGB |
|---|---|---|
| ขาว | #FFFFFF | rgb(255, 255, 255) |
| ดำ | #000000 | rgb(0, 0, 0) |
| แดง | #FF0000 | rgb(255, 0, 0) |
| เขียว | #00FF00 | rgb(0, 255, 0) |
| น้ำเงิน | #0000FF | rgb(0, 0, 255) |
| เหลือง | #FFFF00 | rgb(255, 255, 0) |
เคล็ดลับ
- ใช้ HEX ใน CSS —
color: #FF5733สะอาดกว่าและพบบ่อยกว่าcolor: rgb(255, 87, 51)ในสไตล์ชีต - ใช้ RGB สำหรับความโปร่งใส — เมื่อคุณต้องการสีกึ่งโปร่งแสง ให้ใช้
rgba(255, 87, 51, 0.5)ไม่มีวิธีในการเพิ่ม alpha ใน HEX มาตรฐาน (แม้ว่า HEX 8 หลักจะมีอยู่ การสนับสนุนเบราว์เซอร์ต่างกัน) - ทางลัด 3 หลัก —
#F00เทียบเท่ากับ#FF0000ใช้เมื่อแต่ละคู่มีตัวเลขเดียวกันเพื่อประหยัดพื้นที่ - ตัวเลือกสีเร็วกว่า — หากคุณกำลังหาสีที่เหมาะสม ใช้ตัวเลือกภาพแทนการเดาค่า HEX คัดลอกรหัสเมื่อพอใจ
คำถามที่พบบ่อย
ฉันจะแปลง HEX เป็น RGB ด้วยตนเองได้อย่างไร?
แบ่งรหัส HEX เป็นสามคู่ (เช่น #FF8800 กลายเป็น FF, 88, 00) แปลงแต่ละคู่จากฐาน 16 เป็นฐาน 10 FF = 255, 88 = 136, 00 = 0 ผลลัพธ์คือ rgb(255, 136, 0)
แล้วรหัส HEX 3 หลักล่ะ?
HEX 3 หลักเป็นทางลัดที่แต่ละหลักถูกทำซ้ำสองครั้ง #F80 เทียบเท่ากับ #FF8800 ตัวแปลงส่วนใหญ่จัดการทั้งสองรูปแบบโดยอัตโนมัติ
เมื่อใดควรใช้ HEX หรือ RGB?
HEX กะทัดรัดกว่าและพบบ่อยกว่าใน CSS RGB ดีกว่าเมื่อคุณต้องจัดการช่องสัญญาณแต่ละช่องในโค้ดหรือใช้ rgba() สำหรับความโปร่งใส ทั้งสองแสดงสีเดียวกัน
สัญลักษณ์ # หมายถึงอะไรในรหัส HEX?
เครื่องหมายชาร์ป (#) เป็นคำนำหน้าที่ระบุว่าค่าเป็นรหัสสีเลขฐานสิบหก ไม่ใช่ส่วนหนึ่งของค่าเอง เครื่องมือบางอย่างยอมรับรหัสที่มีหรือไม่มีชาร์ป