Image Color Picker
Image Color Picker — ทำงานในเบราว์เซอร์ ไม่บันทึกข้อมูล
ดูดสีจากรูป
อัปโหลดรูปแล้วคลิกพิกเซลเพื่อดู HEX และ RGB
กรอกค่า แล้วกดคำนวณ
วิธีใช้
- ใน รูป เลือกไฟล์ที่จะสุ่มตัวอย่าง มีพรีวิววาดบนแคนวาส
- คลิกพิกเซลที่ต้องการ กากบาทช่วยเล็ง
- ในผลลัพธ์ ตรวจ HEX, RGB, ตำแหน่ง (x, y) และตัวอย่างสี
- ถ้าต้องการ คัดลอก HEX ใส่ #rrggbb บนคลิปบอร์ด
- รีเซ็ต ล้างไฟล์และผลลัพธ์ รูปไม่ถูกส่งไปเซิร์ฟเวอร์
แนวคิดหลัก
การหยิบสีจากรูปอ่านพิกเซลที่พิกัดคลิกด้วย canvas getImageData HEX คือเลขฐานสิบหกหกหลัก RGB คือสามค่า 0–255 ตำแหน่งคือพิกัดพิกเซลของแคนวาส พรีวิวอาจย่อเหลือกว้างสูงสุด 900 พิกเซล พิกัดจึงไม่ 1:1 กับต้นฉบับ คลิกบนจอถูกแมปเป็นพิกัดแคนวาสตามขนาดที่แสดง หากไฟล์ล้มเหลว จะมีประกาศว่าอ่านรูปไม่ได้ ก่อนคลิก HEX ว่างและการคัดลอกไม่ทำอะไร ตัวอย่างสีเติมด้วย HEX ที่เลือก
ถ้าต้องการแค่จานสี ใช้ตัวเลือกสี หากแค่แปลงตัวเลข RGB↔HEX ใช้ตัวแปลง หากจะลบพื้นหลังทึบ ใช้ความโปร่งใสพื้นหลัง PNG เครื่องมือนี้สำหรับสุ่มสีแบรนด์จากรูปและสกรีนช็อต ไฟล์เปิดในเบราว์เซอร์เท่านั้น สำหรับ CSS คัดลอก HEX เร็วสุด สำหรับแคนวาสหรือเชเดอร์ที่ต้องการ RGB ให้คัดลอกช่องกลาง พิกัดสัมพันธ์กับแคนวาสที่สเกลแล้ว อาจต่างจากพิกเซลต้นฉบับใน Photoshop
ตัวอย่าง
อัปโหลด PNG โลโก้แล้วคลิกพื้นที่น้ำเงิน: HEX อาจเป็น #1a5cff พร้อม RGB และพิกัด คัดลอก HEX ไปตัวแปร CSS ใช้รูปเดียวกันในเครื่องมือความโปร่งใสสำหรับคลิกพื้นหลังได้ ขอบ JPEG ที่บีบจะเบลอ ให้คลิกจุดใกล้ ๆ หลายครั้งเพื่อเทียบ การสุ่มสีปุ่มจากสกรีนช็อต UI เพื่อจับโทเค็นดีไซน์เป็นการใช้ทั่วไป แม้ตระกูลน้ำเงินเดียวกัน อาจต่าง 1–2 HEX บนพิกเซล JPEG ที่ติดกัน
ที่เกี่ยวข้อง: ตัวเลือกสี · ตัวแปลง RGB HEX · ความโปร่งใสพื้นหลัง PNG
คำถามที่พบบ่อย
การหยิบสีจากรูปใช้การคลิกพิกเซลไหม
ใช่ หลังอัปโหลดไฟล์ ให้คลิกจุดหนึ่งในพรีวิว ก่อนนั้นคลิกไม่เปลี่ยนสี หลังเปลี่ยนรูป HEX เก่าอาจค้าง — คลิกอีกครั้ง รีเซ็ตชัวร์สุด
HEX, RGB และพิกัดปรากฏพร้อมกันไหม
ใช่ สามช่อง — HEX, RGB, ตำแหน่ง (x, y) — พลัสตัวอย่างสี ไม่แสดงแอลฟา (ความโปร่งใส) ช่องตำแหน่งใช้ดีบัก เช่น ประมาณตำแหน่งไอคอนบนสไปรต์ชีต
มีปุ่มคัดลอก HEX ไหม
มี เมื่อ HEX ถูกเติม คัดลอก HEX ใส่คลิปบอร์ด ก่อนคลิกไม่คัดลอกอะไร คัดลอกชี้เฉพาะ HEX ลากสตริง RGB จากช่องนั้น
ต่างจากตัวเลือกสียังไง
ตัวเลือกเลือกสีใดก็ได้และอาจแสดง HSL หน้าจอนี้อ่านพิกเซลรูปจริงและพิกัด หากต้องการ HSL ให้วาง HEX ที่คัดลอกในช่อง HEX ของตัวเลือกสี
รูปถูกอัปโหลดไปเซิร์ฟเวอร์ไหม
ไม่ อ่านบนแคนวาสท้องถิ่นเท่านั้น รีเซ็ตล้างพรีวิว แม้ต้นฉบับใหญ่ก็จำกัดพรีวิวกว้าง 900 มักพอสำหรับตัวอย่างสี
พิกัดแม่นบนพรีวิวที่สเกลไหม
คลิกแปลงขนาดบนจอเป็นพิกเซลแคนวาส หากความกว้างถูกลดเหลือ 900 พิกัดสัมพันธ์กับแคนวาสที่สเกลแล้ว คลิกพิกเซลโปร่งใสได้สีที่เก็บไว้โดยไม่ประกอบพื้นหลัง แอลฟาถูกทิ้ง
ตรวจทานล่าสุด: 2026-09-04