ข้ามไปยังเนื้อหาหลัก
tetono.

แปลงค่าสี (HEX / RGB / HSL)

เลือกสีหรือใส่ค่า HEX แล้วได้ค่า RGB และ HSL พร้อมคัดลอก

HEX#4F46E5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)

เกี่ยวกับเครื่องมือนี้

ทำงานออกแบบหรือเขียนเว็บแล้วต้องสลับไปมาระหว่างรหัสสีแบบต่างๆ อยู่บ่อยๆ? เครื่องมือแปลงค่าสีนี้ช่วยคุณแปลงรหัสสีระหว่าง HEX, RGB และ HSL ได้ในที่เดียว พร้อมตัวเลือกสีให้คลิกเลือกเฉดที่ชอบ ไม่ต้องเปิดโปรแกรมแต่งภาพหรือคำนวณค่าเอง

ใช้งานง่ายมาก เพียงพิมพ์ค่าสีที่มีอยู่ หรือคลิกเลือกจากตัวเลือกสี แล้วระบบจะแสดงค่าทั้งสามรูปแบบพร้อมกันทันที อยากได้แบบไหนก็คัดลอกไปใช้ได้เลย เหมาะกับงานเขียน CSS ออกแบบกราฟิก หรือจัดธีมสีให้แบรนด์

ค่าสีแต่ละแบบมีจุดเด่นต่างกัน:

  • HEX รหัสแบบ #RRGGBB สั้นกระชับ นิยมใช้ในโค้ดเว็บ
  • RGB บอกความเข้มของสีแดง เขียว น้ำเงิน เข้าใจง่ายและรองรับความโปร่งใส
  • HSL บอกเฉดสี ความอิ่มตัว และความสว่าง ทำให้ปรับสีให้อ่อนลงหรือเข้มขึ้นได้ง่าย

ตัวอย่างยอดฮิตคือการแปลง HEX เป็น RGB เวลาต้องใส่ค่าความโปร่งใส หรือแปลงเป็น HSL เวลาต้องการปรับเฉดสีให้เข้าชุดกัน เครื่องมือนี้ทำให้ทุกอย่างเสร็จในคลิกเดียว

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

วิธีใช้งาน

  1. 1เลือกสีจากตัวเลือกสี หรือพิมพ์ค่าสีที่มีอยู่แล้วลงไป
  2. 2ดูค่าที่แปลงเป็น HEX, RGB และ HSL พร้อมกันทันที
  3. 3คัดลอกค่าสีในรูปแบบที่ต้องการไปใช้ในงานออกแบบหรือโค้ด

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

HEX, RGB และ HSL ต่างกันยังไง?
ทั้งสามเป็นวิธีเขียนค่าสีเดียวกันคนละแบบ HEX เป็นรหัสแบบ #RRGGBB ที่นิยมในเว็บ RGB บอกความเข้มของแดงเขียวน้ำเงิน ส่วน HSL บอกเฉดสี ความอิ่มตัว และความสว่าง ซึ่งปรับสีได้ง่ายกว่า
แปลงรหัสสี HEX เป็น RGB ได้ไหม?
ได้เลย แค่ใส่ค่า HEX เครื่องมือจะแสดงค่า RGB และ HSL ที่ตรงกันให้ทันที
มีตัวเลือกสีให้คลิกเลือกไหม?
มี คุณสามารถเปิดตัวเลือกสีแล้วคลิกเลือกเฉดที่ต้องการ ระบบจะแปลงเป็นทุกรูปแบบให้อัตโนมัติ
ข้อมูลของฉันถูกส่งออกไปไหม?
ไม่ การแปลงทั้งหมดทำในเบราว์เซอร์ของคุณ ไม่มีอะไรถูกส่งขึ้นเซิร์ฟเวอร์
ใช้ฟรีไหม?
ฟรีทั้งหมด ไม่ต้องสมัครสมาชิกหรือติดตั้งอะไร

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

สร้าง CSS Gradient

ออกแบบสีไล่ระดับแบบเห็นภาพ แล้วคัดลอกโค้ด CSS ไปใช้

สร้าง CSS Box-Shadow

สร้างเงากล่องหลายชั้นพร้อมพรีวิวสด แล้วคัดลอกโค้ด CSS

แปลงไฟล์รูปภาพ

แปลงรูป HEIC, WebP, PNG และ JPG ได้ในเบราว์เซอร์ ไม่ต้องอัปโหลด

สร้าง Favicon เว็บไซต์

เปลี่ยนรูปใดก็ได้ให้เป็นไอคอนเว็บทุกขนาด พร้อมโค้ด HTML ให้วาง