กลับไปหน้า Tools
ทริคTools

เครื่องดูดสี (Color Picker)

ดูดค่าสีจากภาพหรือหน้าจอมาเป็น HEX/HSL เพื่อนำไปใช้ต่อในงาน

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

เครื่องดูดสี (Color Picker) คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น

ระดับ

เหมาะกับคนเริ่มต้น

ใช้เมื่อไหร่

คุณเห็นสีในภาพหรือโลโก้แล้วอยากได้รหัสสีที่ตรงกัน

อ่านแล้วทำอะไรต่อ

เปิดภาพโลโก้บริษัท ใช้เครื่องดูดสีคลิกที่พื้นเขียว แล้วได้ค่า HEX ไปใช้ในธีม

เห็นภาพ: ทริคนี้เป็นยังไง

  1. 1เปิดเครื่องดูดสีEyeDropper ในเบราว์เซอร์
  2. 2คลิกสีที่ต้องการเช่น พื้นเขียวของโลโก้
  3. 3ได้ค่า HEXเช่น #84BD00
  4. 4นำไปใช้ในธีมวางใน token / CSS

▶ เล่นอัตโนมัติ · ชี้เมาส์เพื่อหยุด · กดแถบด้านบนเพื่อข้ามขั้น

ดูดสีจากภาพใดก็ได้ มาเป็นค่า HEX

ใช้ตอนไหน?

  • คุณเห็นสีในภาพหรือโลโก้แล้วอยากได้รหัสสีที่ตรงกัน
  • คุณต้องทำสีของสไลด์/แอปให้ตรงกับแบรนด์
  • คุณอยากเทียบว่าสองสีใกล้กันแค่ไหน

ความหมาย

เครื่องดูดสี (color picker / eyedropper) คือเครื่องมือที่ให้คลิกตรงจุดใดก็ได้บนภาพหรือหน้าจอแล้วได้ค่าสีกลับมา ค่าสีที่ใช้บ่อยคือ HEX (รหัสสีหกหลักขึ้นต้นด้วย #) และ HSL (สี/ความสด/ความสว่าง) ซึ่งนำไปใส่ในงานออกแบบหรือโค้ดได้ทันที

ดูดสีด้วยเครื่องมือในเบราว์เซอร์

เบราว์เซอร์สมัยใหม่มี EyeDropper API และมีเครื่องดูดสีในเครื่องมือนักพัฒนา (DevTools)

// ในคอนโซลเบราว์เซอร์ที่รองรับ EyeDropper
const dropper = new EyeDropper();
const result = await dropper.open();
console.log(result.sRGBHex); // เช่น "#0a6e3d"

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

ดูดสีจากโลโก้

เปิดภาพโลโก้บริษัท ใช้เครื่องดูดสีคลิกที่พื้นเขียว แล้วได้ค่า HEX ไปใช้ในธีม