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

วิธีใช้ตัวเลือกสีเพื่อหาสีจากพิกเซลใดๆ

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

ตอบด่วน

วิธีเลือกสี: เปิด Color Picker, อัปโหลดรูป (หรือใช้ screen eyedropper), คลิกที่ pixel ที่ต้องการ ค่า HEX, RGB และ HSL จะปรากฏ การประมวลผลเกิดในเครื่อง

การแนะนำ

Color picker (eyedropper) ทำให้หาสีที่แม่นยำของ pixel จำเป็นสำหรับ match สีแบรนด์, sample สีจากรูป หรือสร้างพาเลตจาก foto color picker บนเบราว์เซอร์อ่านสีจารูปผ่าน Canvas API และ EyeDropper API เลือกสีจากที่ใดๆบนหน้าจอ

ทีละขั้นตอน

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

    ไปที่หน้าเครื่องมือเลือกสี เครื่องมือนี้รองรับการเลือกสีจากภาพที่อัปโหลด และในเบราว์เซอร์ที่รองรับ จากทุกที่บนหน้าจอผ่าน EyeDropper API

  2. เลือกแหล่งที่มาของคุณ

    หากต้องการเลือกจากรูปภาพ ให้อัปโหลดหรือลากและวางรูปภาพ หากต้องการเลือกจากหน้าจอ (Chrome/Edge เท่านั้น): คลิกปุ่ม "เลือกจากหน้าจอ" จากนั้นคลิกที่ใดก็ได้บนหน้าจอ

  3. คลิกที่พิกเซลเพื่อดูตัวอย่าง

    สำหรับการเลือกรูปภาพ ให้เลื่อนเคอร์เซอร์ไปเหนือรูปภาพแล้วคลิกพิกเซลที่มีสีที่คุณต้องการ เครื่องมืออ่านสีพิกเซลจากผืนผ้าใบโดยใช้ getImageData() แว่นขยายอาจช่วยคุณเลือกพิกเซลที่แน่นอนได้

  4. อ่านค่าสี

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

  5. คัดลอกสี

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

ตัวอย่าง

เลือกสีของแบรนด์จากโลโก้

ป้อนข้อมูล: logo.png คลิกที่พิกเซลสีของแบรนด์

เอาท์พุต: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)

ตัวอย่างสีจากภาพถ่าย

ป้อนข้อมูล: photo.jpg คลิกที่พิกเซลท้องฟ้า

เอาท์พุต: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)

เลือกจากหน้าจอ (Chrome/Edge)

ป้อนข้อมูล: คลิก 'เลือกจากหน้าจอ' จากนั้นคลิกพิกเซลใดก็ได้บนจอแสดงผลของคุณ

เอาท์พุต: HEX ค่าของพิกเซลนั้น เช่น #ff5733

ปัญหาทั่วไป

  • การลดรอยหยักจะผสมสีที่ขอบ โดยพิกเซลที่ขอบระหว่างสองสีจะผสมกัน ตัวอย่างจากจุดกึ่งกลางของพื้นที่สีทึบเพื่อความแม่นยำ
  • ไม่รองรับ EyeDropper API — ตัวเลือกหน้าจอต้องใช้ Chrome 95+ หรือ Edge 95+ Firefox และ Safari ไม่รองรับ ใช้วิธีการอัพโหลดรูปภาพแทน
  • การบีบอัด JPEG เปลี่ยนสี —JPEG การบีบอัดแบบสูญเสียจะเปลี่ยนสีพิกเซลเล็กน้อย หากต้องการสีแบรนด์ที่แน่นอน ให้ใช้ PNG หรือแหล่งที่มาของเวกเตอร์ดั้งเดิม
  • ความแตกต่างของโปรไฟล์สี — รูปภาพที่มีโปรไฟล์สีฝัง (ICC) อาจแสดงแตกต่างจากค่าพิกเซลดิบที่แนะนำ

เคล็ดลับ

  • ใช้แว่นขยายเพื่อเลือกพิกเซลที่แน่นอน เมื่อซูมสูง คุณสามารถเลือกพิกเซลที่แม่นยำเพียงพิกเซลเดียว แทนที่จะเลือกขอบแบบผสม
  • ตัวอย่างพิกเซลหลายพิกเซลจากพื้นที่ทึบและหาค่าเฉลี่ยหากการบีบอัดทำให้เกิดสัญญาณรบกวน ซึ่งจะช่วยให้ได้สีที่เป็นตัวแทนมากขึ้น
  • ใช้ EyeDropper API (Chrome/Edge) เพื่อเลือกสีจากแอปพลิเคชันใดๆ ไม่ใช่แค่รูปภาพในเบราว์เซอร์
  • ใช้ตัวเลือกสีของเราสำหรับการสุ่มสีแบบส่วนตัวทันที รูปภาพของคุณจะไม่หลุดออกจากเบราว์เซอร์

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

  • Color Picker — Pick colors and get HEX, RGB, and HSL values ในเบราว์เซอร์ของคุณ. Free, online, ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
  • Color Picker & Eyedropper — ออนไลน์ฟรี color picker & eyedropper. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • image color ตัวเลือก — image color ตัวเลือก ออนไลน์ฟรี. ประมวลผลข้อมูลทันทีในเบราว์เซอร์ของคุณ. ไม่อัปโหลด ไม่ต้องสมัครสมาชิก เป็นส่วนตัวทั้งหมด.
  • Color ตัวแปลง — แปลง colors between HEX, RGB and HSL ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, 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 เป็นส่วนตัวทั้งหมด.

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

อ้างอิง