ตัวแปลงสี – HEX, RGB, HSL

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

การทำงานกับสีข้ามเครื่องมือต่าง ๆ มักต้องแปลงรูปแบบสีอยู่เสมอ ตัวแปลงนี้รองรับ HEX, RGB และ HSL ซึ่งเป็นสามรูปแบบสีที่ใช้กันมากที่สุดในการพัฒนาเว็บและงานออกแบบ

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

รูปแบบสีที่รองรับ

• HEX — เช่น #3B82F6 หรือ #f00 (แบบย่อ)
• RGB — เช่น rgb(59, 130, 246)
• HSL — เช่น hsl(217, 91%, 60%)

ผลลัพธ์ทุกค่าจะแสดงในรูปแบบ CSS ที่พร้อมใช้งาน คัดลอกแล้ววางลงในโค้ดได้เลย

วิธีใช้ตัวแปลงสี

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

กรณีใช้งานที่พบบ่อย

• แปลงโค้ด HEX จากไฟล์ออกแบบเป็นค่า RGB สำหรับใช้ใน CSS
• แปลงเป็น HSL เพื่อปรับความสว่างหรือความอิ่มตัวของสีได้ง่ายขึ้น
• แปลงค่า RGB จากโปรแกรมแก้ไขรูปภาพเป็นโค้ด HEX สำหรับ HTML
• ตรวจสอบอย่างรวดเร็วว่าค่าสีสองค่าในรูปแบบต่างกันเป็นสีเดียวกันหรือไม่

เมื่อไหร่ควรใช้ HEX, RGB หรือ HSL?

HEX เป็นรูปแบบที่กระชับที่สุดและใช้กันอย่างแพร่หลายใน CSS และ HTML ส่วน RGB พบได้ทั่วไปในเครื่องมือออกแบบและซอฟต์แวร์แก้ไขภาพ HSL เป็นรูปแบบที่มนุษย์อ่านเข้าใจง่ายที่สุด เพราะแยก Hue (เฉดสี), Saturation (ความอิ่มตัว) และ Lightness (ความสว่าง) ออกจากกัน ทำให้ปรับแต่งสีด้วยตนเองได้สะดวก

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

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

แปลง HEX เป็น RGB ได้อย่างไร?

วางโค้ด HEX ของคุณ (เช่น #3B82F6) ลงในช่องข้อมูล ค่า RGB ที่เทียบเท่าจะแสดงขึ้นทันทีด้านล่าง

แปลง RGB เป็น HEX ได้อย่างไร?

ป้อนค่า RGB ในรูปแบบ rgb(59, 130, 246) โค้ด HEX พร้อมค่า HSL จะแสดงขึ้นโดยอัตโนมัติ

HSL คืออะไร?

HSL ย่อมาจาก Hue (เฉดสี), Saturation (ความอิ่มตัว) และ Lightness (ความสว่าง) เป็นวิธีอธิบายสีที่เข้าใจง่ายสำหรับมนุษย์ คุณสามารถเปลี่ยนความสว่างหรือความสดของสีได้โดยไม่กระทบเฉดสีหลัก

รองรับโค้ด HEX แบบย่อหรือไม่?

รองรับ คุณสามารถป้อนโค้ดแบบย่อ เช่น #f00 หรือ #abc แล้วระบบจะขยายและแปลงให้ถูกต้อง

ตัวแปลงนี้ใช้ฟรีหรือไม่?

ฟรี ColourPicker.app ใช้งานได้ฟรีโดยไม่ต้องสมัครสมาชิก

ใช้งานบนมือถือได้ไหม?

ได้ ตัวแปลงสีนี้ทำงานได้บนทุกอุปกรณ์ที่มีเบราว์เซอร์ที่ทันสมัย ไม่ว่าจะเป็นคอมพิวเตอร์ แท็บเล็ต หรือมือถือ