Utilore

แปลง RGB เป็น HEX

วางค่า rgb(31, 95, 214) ลงไป จะคั่นด้วยจุลภาคหรือเว้นวรรคก็ได้ แล้วรับค่า #1f5fd6 ที่พร้อมใช้ใน CSS ไฟล์งานออกแบบ หรือคู่มือสไตล์

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

คอนทราสต์:

วิธีใช้

  1. วางค่า RGB หรือ RGBA ลงไป หรือเลือกสีจากตัวเลือกสี
  2. อ่านรหัส HEX ที่แสดงอยู่เหนือรูปแบบอื่น ๆ
  3. กด «คัดลอก» ที่อยู่ข้างบรรทัด HEX

สิ่งที่ควรรู้

ทำไมนักออกแบบจึงขอค่า HEX

HEX เป็นข้อความชุดเดียวแทนตัวเลขสามค่า จึงคัดลอกไปวางในสเปก ในทิกเก็ต หรือในแชทได้โดยไม่ตกหล่นสักหลัก อีกทั้งยังเป็นรูปแบบที่โปรแกรมออกแบบแสดงเป็นค่าเริ่มต้น พาเลตที่เขียนด้วย HEX จึงตรงกับสิ่งที่คนอื่นเห็นอยู่

ช่องอัลฟาไปอยู่ตรงไหน

ถ้าคุณใส่ค่า rgba() ที่มีความโปร่งใส ผลลัพธ์จะเป็น HEX แปดหลัก โดยคู่สุดท้ายเข้ารหัสค่าอัลฟาตั้งแต่ 0 ถึง 255 เบราว์เซอร์รุ่นใหม่อ่านค่านี้ได้ถูกต้อง ส่วนรุ่นเก่าอ่านไม่ได้ ดังนั้นตรงไหนที่ต้องรองรับให้กว้างก็ยังควรใช้ rgba() ต่อไป

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

ต้องเขียน rgb(...) ครอบตัวเลขด้วยไหม

รองรับรูปแบบเต็มทั้งที่คั่นด้วยจุลภาคและเว้นวรรค ทั้งแบบ rgb() และ rgba() ส่วนค่าที่เกิน 255 จะถูกตัดให้เหลือ 255 ไม่ใช่วนกลับไปเริ่มใหม่แบบเงียบ ๆ

ทำไมรหัส HEX ของฉันยาวแปดตัวอักษร

เพราะสีนั้นมีช่องอัลฟาอยู่ด้วย ถ้าเอาความโปร่งใสออกก็จะได้รหัสหกหลักตามปกติ

มีอะไรถูกส่งขึ้นเซิร์ฟเวอร์หรือไม่

ไม่มี การแปลงทั้งหมดเกิดขึ้นภายในหน้าเว็บ สีประจำแบรนด์ที่ยังไม่เปิดตัวจึงอยู่กับคุณ

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