เครื่องมือเลือกสี Color Picker ออนไลน์

rgb(59, 130, 246)
hsl(217, 91%, 60%)
ตัวอย่างข้อความ
ตัวอย่างพื้นหลัง

Ad Space

Color Picker คืออะไร?

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

เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่ต้องติดตั้งโปรแกรม สามารถพิมพ์โค้ดสีโดยตรง หรือเลือกจาก Color Picker แล้วคัดลอกไปใช้ได้ทันที

รูปแบบโค้ดสี

  • HEX — โค้ดสี 6 หลัก เช่น #FF5733 นิยมใช้ใน CSS
  • RGB — ค่าสีแดง เขียว น้ำเงิน (0-255) เช่น rgb(255, 87, 51)
  • HSL — เฉดสี ความอิ่ม ความสว่าง เช่น hsl(11, 100%, 60%)

Ad Space

เคล็ดลับการเลือกสี

  • ใช้ Contrast Checker ตรวจสอบว่าสีตัวอักษรกับพื้นหลังอ่านง่ายหรือไม่
  • เลือกชุดสีที่สอดคล้องกัน (Color Harmony) เช่น Complementary, Analogous
  • ทดสอบสีทั้งในโหมดสว่างและมืด (Light/Dark Mode)
  • ใช้ HSL ในการปรับสี เพราะควบคุมความสว่างและความอิ่มได้ง่าย
  • บันทึกโค้ดสีที่ใช้บ่อยเป็น Design Token เพื่อความสม่ำเสมอ

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

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

HEX ใช้เลขฐาน 16 (เช่น #FF5733), RGB ใช้ค่าแดง-เขียว-น้ำเงิน (0-255), HSL ใช้เฉดสี-ความอิ่ม-ความสว่าง ทั้ง 3 แบบแทนสีเดียวกันได้

ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไปที่ใด

ได้ เครื่องมือรองรับการใช้งานบนทุกอุปกรณ์ ทั้ง Desktop, Tablet และ Mobile

เวอร์ชันปัจจุบันรองรับสีแบบ Solid (ทึบ) HEX 6 หลัก, RGB, HSL หากต้องการ Alpha ให้เพิ่ม opacity ใน CSS เอง

อ้างอิง

  1. MDN Web Docs — CSS Color Values (developer.mozilla.org)
  2. W3Schools — CSS Colors (w3schools.com)
  3. Adobe Color — Color Wheel (color.adobe.com)

เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่มีการส่งข้อมูลไปเซิร์ฟเวอร์ การแสดงผลสีอาจแตกต่างตามหน้าจอและการตั้งค่าจอภาพ

© 2026 ReSuMeYaDev. สงวนลิขสิทธิ์.