ข้ามไปยังเนื้อหาหลัก
FreeOnlineTools Go
ไทย
วิธี

วิธีแปลงสีระหว่าง HEX, RGB และ HSL

โดย FreeOnlineTools Team · อัปเดตเมื่อ 2026-09-02

ตอบด่วน

วิธีแปลงสี: เปิด Color Converter, ใส่สีในรูปแบบใดๆ (HEX, RGB, HSL) เครื่องมือจะแสดงค่าเทียบเท่าในรูปแบบอื่นทั้งหมดทันที การแปลงเกิดในเบราว์เซอร์ —ไม่มีข้อมูลอัปโหลด

การแนะนำ

สีแสดงในรูปแบบต่างๆ: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) เครื่องมือและบริบทต่างกันใช้รูปแบบต่างกัน —CSS มักใช้ HEX หรือ RGB, design tool ใช้ HSL, API ใดๆ การแปลงระหว่างรูปแบบทำให้ใช้สีจะระบบหนึ่งในบริบทที่ต้องการอีกแบบ

ทีละขั้นตอน

  1. เปิดเครื่องมือแปลงสี

    ไปที่หน้าเครื่องมือแปลงสี เครื่องมือนี้รองรับรูปแบบ HEX, RGB, HSL, HSV และ CMYK

  2. กรอกสีของคุณ

    พิมพ์หรือวางค่าสีในรูปแบบที่รองรับ ตัวอย่าง: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)' เครื่องมือจะตรวจจับรูปแบบอินพุตโดยอัตโนมัติ

  3. ตรวจสอบรูปแบบที่เทียบเท่าทั้งหมด

    เครื่องมือนี้จะแสดงสีในทุกรูปแบบพร้อมกัน: HEX, RGB, HSL, HSV และ CMYK นอกจากนี้ยังแสดงตัวอย่างสีเพื่อให้คุณตรวจสอบได้ว่าการแปลงนั้นถูกต้องหรือไม่

  4. คัดลอกรูปแบบที่คุณต้องการ

    คลิกปุ่มคัดลอกถัดจากรูปแบบใดๆ เพื่อคัดลอกค่านั้นไปยังคลิปบอร์ดของคุณ ใช้ใน CSS เครื่องมือออกแบบ หรือแอปพลิเคชันของคุณ

  5. ปรับสี (ไม่จำเป็น)

    เครื่องมือบางอย่างให้คุณปรับสีด้วยแถบเลื่อน (สำหรับ HSL: เฉดสี ความอิ่มตัวของสี ความสว่าง) และดูการอัปเดตรูปแบบทั้งหมดแบบเรียลไทม์ สิ่งนี้มีประโยชน์สำหรับการค้นหาสีหรือเฉดสีที่เกี่ยวข้อง

ตัวอย่าง

HEX ถึง RGB และ HSL

ป้อนข้อมูล: #ff6600

เอาท์พุต: RGB: RGB(255, 102, 0) HSL: hsl(24, 100%, 50%)

RGB ถึง HEX

ป้อนข้อมูล: RGB(0, 128, 255)

เอาท์พุต: HEX: #0080ff HSL: hsl(210, 100%, 50%)

HSL ถึง HEX

ป้อนข้อมูล: เอชเอสแอล(120, 100%, 50%)

เอาท์พุต: HEX: #00ff00 __เก็บ_34__: RGB(0, 255, 0)

ปัญหาทั่วไป

  • HEX โดยมี vs โดยไม่มี # — เครื่องมือบางอย่างจำเป็นต้องมี # นำหน้า ส่วนเครื่องมืออื่นๆ ไม่ต้องใส่ ตัวแปลงของเรายอมรับทั้งสองอย่าง
  • 3 หลัก กับ 6 หลัก HEX —#f60 เป็นการจดชวเลขสำหรับ #ff6600 ทั้งสองถูกต้อง ตัวแปลงจะปรับมาตรฐานเป็น 6 หลัก
  • HSL ช่วงเฉดสี —เฉดสีคือ 0-360 องศา (วงกลม) 0 และ 360 มีทั้งสีแดง ค่าที่สูงกว่า 360 ล้อมรอบ
  • ความแตกต่างของปริภูมิสี —HEX, RGB และ HSL ล้วนเป็น sRGB CMYK เป็นพื้นที่สีอื่น (การพิมพ์) และการแปลงเป็นค่าโดยประมาณ

เคล็ดลับ

  • ใช้ HSL เพื่อสร้างรูปแบบสี — การปรับเฉดสี ความอิ่มตัวของสี หรือความสว่างนั้นใช้งานง่ายกว่า RGB
  • ใช้ HEX สำหรับ CSS ซึ่งเป็นรูปแบบที่มีขนาดกะทัดรัดและได้รับการสนับสนุนอย่างกว้างขวางที่สุดในสไตล์ชีต
  • ใช้ RGB เมื่อคุณต้องการตั้งค่าความโปร่งใสของอัลฟา —rgb(255, 102, 0, 0.5) เพื่อความทึบ 50% (หรือใช้ HEX 8 หลัก: #ff660080)
  • ใช้โปรแกรมแปลงสีของเราเพื่อการแปลงรูปแบบสีทั้งหมดทันทีและเป็นส่วนตัว

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

  • Color ตัวแปลง — แปลง colors between HEX, RGB and HSL ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
  • Color Picker — Pick colors and get HEX, RGB, and HSL values ในเบราว์เซอร์ของคุณ. Free, online, ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
  • Hex to RGB Color Converter — Free online hex to rgb color converter. Process data instantly in your browser. No upload, no signup, fully private.
  • Color Contrast ตัวตรวจ (WCAG) — ออนไลน์ฟรี color contrast checker (wcag). Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • Color Palette ตัวสร้าง — ออนไลน์ฟรี color palette generator. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • Add Watermark to Image ออนไลน์ฟรี — ออนไลน์ฟรี add watermark to image ออนไลน์ฟรี. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • App icono ตัวสร้าง — App icono ตัวสร้าง ออนไลน์ฟรี. ประมวลผลข้อมูลทันทีในเบราว์เซอร์ของคุณ. ไม่อัปโหลด ไม่ต้องสมัครสมาชิก เป็นส่วนตัวทั้งหมด.
  • AVIF to PNG ตัวแปลง — ออนไลน์ฟรี avif to png converter. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.

คำแนะนำที่เกี่ยวข้อง

อ้างอิง