⌕ ค้นหา

แปลงรหัสสี HEX RGB และ HSL

แปลงรหัสสี HEX RGB และ HSL — ไม่รองรับ alpha หรือ CMYK และอาจมีความคลาดเคลื่อนจากการปัด RGB

ประมวลผลบนอุปกรณ์มีคำอธิบายและตัวอย่างมีนโยบายความเป็นส่วนตัว

แปลงรหัสสี HEX RGB และ HSL

กรอกข้อมูลหรือเลือกไฟล์ แล้วกดประมวลผล

Local Processing

Result

▤

ผลลัพธ์การคำนวณ

กรอกข้อมูลแล้วกดคำนวณ เพื่อดูผลลัพธ์และรายละเอียดที่นี่

วิธีใช้และการอ่านผล

แปลงรูปเขียนของสีเดียวกันระหว่าง HEX, RGB และ HSL พร้อมตัวอย่างสี ใช้ส่งต่อค่าสีระหว่างโค้ดและงานออกแบบ ไม่ใช่การแปลงโปรไฟล์สีสำหรับงานพิมพ์

กรอกข้อมูลอย่างไร

เลือกชนิดต้นทางก่อนกรอก HEX ใช้ #RGB หรือ #RRGGBB; RGB ใส่สามจำนวนเต็ม 0–255; HSL ใส่ H 0–360 และ S,L 0–100 คั่นด้วยจุลภาคโดยไม่ใส่ชื่อฟังก์ชันหรือเครื่องหมาย %

อ่านผลและข้อจำกัด

ไม่รองรับ alpha, CMYK หรือการจัดการโปรไฟล์สี ค่า HSL อาจเปลี่ยนเล็กน้อยเมื่อแปลงไปกลับเพราะ RGB ปัดเป็นจำนวนเต็ม ความสว่าง L ของ HSL ไม่ใช่ความสว่างสัมพัทธ์ที่ใช้ตัดสิน contrast

หลักการทำงาน

HEX เก็บ R,G,B เป็นเลขฐาน 16 ช่องละสองหลัก
HSL แสดงมุมสี ความอิ่มสี และความสว่าง; แปลงกลับเป็น RGB 8-bit ก่อนรายงานผล

ตัวอย่างการใช้งาน

เลือก RGB แล้วกรอก 255,0,0 จะได้ #FF0000 และ HSL 0,100,50 ถ้าเลือก HEX แล้วใส่ #888 จะขยายเป็น #888888 และ RGB 136,136,136 ซึ่งเป็นสีเทาที่มีความอิ่มสี 0

ข้อมูลและการตรวจสอบ

แหล่งอ้างอิงที่ตรวจสอบได้

แหล่งข้อมูลประกอบหลักการและสูตร ไม่ใช่การรับรองผลลัพธ์จากหน่วยงานอ้างอิง และไม่ใช้แทนคำแนะนำเฉพาะกรณี

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

คำถามที่พบบ่อยเกี่ยวกับ แปลงรหัสสี HEX RGB และ HSL

รูปแบบต้นทาง หมายถึงอะไร?

ระบุรูปแบบข้อความที่จะอ่าน กรอก 255,0,0 ในโหมด RGB ไม่รับข้อความ rgb(255,0,0) ในช่องตัวเลขนี้

รหัสสี หมายถึงอะไร?

แต่ละโหมดมีช่วงและรูปเขียนเฉพาะ HSL ใช้ 0,100,50 ไม่ต้องใส่ % สีโปร่งใส HEX 8 หลักยังไม่รองรับ

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

แนะนำอัตโนมัติจากหมวดหมู่และ Tags ที่เกี่ยวข้อง

สร้างพื้นหลังไล่สีและโค้ด CSS

สร้างพื้นหลังไล่สีและโค้ด CSS — รับ 2–12 จุด เรียงตำแหน่งจากน้อยไปมาก Radial ใช้วงรีกึ่งกลาง ไม่รับ CSS ดิบ

เปิดเครื่องมือ →

แปลง Markdown เป็น HTML พร้อมตัวอย่าง

แปลง Markdown เป็น HTML พร้อมตัวอย่าง — ไม่รัน JavaScript ไม่โหลดรูปหรือสื่อภายนอก ไม่รองรับ HTML ฝังเอง ตาราง ลิงก์และโค้ดรองรับตาม Marked; preview อยู่ใน sandbox

เปิดเครื่องมือ →

จัดรูปแบบและตรวจ XML

จัดรูปแบบและตรวจ XML — ตรวจไวยากรณ์ XML ไม่ตรวจ XSD/DTD ไม่ดึงไฟล์ภายนอก ปฏิเสธ DOCTYPE และ ENTITY จำกัด 100 KB / 100 ชั้น

เปิดเครื่องมือ →

บทความ คู่มือ และคำศัพท์ที่เกี่ยวข้อง

อ่านต่อเพื่อเข้าใจสูตร กรอกข้อมูล และใช้ผลลัพธ์ได้อย่างมั่นใจขึ้น

ดูทั้งหมด →
ภาพประกอบ แปลงรหัสสี HEX RGB และ HSL: HEX กับ RGB บอกค่าสีชุดเดียวกัน บทความ

แปลงรหัสสี HEX RGB และ HSL: HEX กับ RGB บอกค่าสีชุดเดียวกัน

HEX เขียนสามช่องสีเป็นเลขฐานสิบหก ส่วน RGB ใช้จำนวนเต็ม 0–255 ต่อช่อง HSL อธิบายสีด้วยมุม Hue ความอิ่ม Saturation และความสว่าง Lightness การแปลง HSL กลับเป็น RGB มีการปัดเป็นช่องสี 8-bit

อ่านต่อ →ภาพประกอบ วิธีใช้แปลงรหัสสี HEX RGB และ HSL คู่มือ

วิธีใช้แปลงรหัสสี HEX RGB และ HSL

เลือก RGB แล้วกรอก 255,0,0 จะเห็น #FF0000 และ HSL 0,100,50 ถ้าต้องการใช้ HSL ให้กรอกเฉพาะตัวเลขสามค่าคั่นด้วยจุลภาค ไม่ต้องใส่ hsl() หรือเครื่องหมาย %

อ่านต่อ →