รูปภาพที่อัปโหลดจะถูกบันทึกบนเซิร์ฟเวอร์หรือไม่?

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

เครื่องมือรองรับรูปภาพรูปแบบใดบ้าง?

รองรับรูปแบบรูปภาพเว็บทั่วไป ได้แก่ JPG, PNG, GIF, WebP และ SVG ขนาดไฟล์จำกัดสูงสุดที่ 10MB ซึ่งเพียงพอสำหรับการใช้งานส่วนใหญ่

สีที่ดึงออกมามีความแม่นยำแค่ไหน?

เนื่องจากเครื่องมืออ่านข้อมูลพิกเซลโดยตรงบน Canvas คุณจึงได้สีที่แม่นยำ 100% (ในพื้นที่สี sRGB) ในระดับพิกเซล นอกจากนี้ คุณยังสามารถใช้ปุ่มลูกศรบนแป้นพิมพ์หลังจากคลิกเพื่อเลือกและดึงสีที่แตกต่างกันเพียงเล็กน้อยของพิกเซลที่อยู่ติดกันได้อย่างแม่นยำ

สี CMYK สามารถนำไปใช้ในการพิมพ์ได้โดยตรงหรือไม่?

ค่า CMYK ที่เครื่องมือนี้ให้มาเป็นตัวเลขทางทฤษฎีที่ได้จากการคำนวณโดยประมาณจากค่า RGB สำหรับการพิมพ์ระดับมืออาชีพ (DTP) ผลลัพธ์จะขึ้นอยู่กับโปรไฟล์สี (เช่น Japan Color) ดังนั้นคุณควรใช้เป็นค่าอ้างอิงเท่านั้นและทำการตรวจสอบขั้นสุดท้ายด้วยซอฟต์แวร์เฉพาะทางเช่น Illustrator

⚠️ ต้องเปิดใช้งาน JavaScript เพื่อให้เครื่องมือทำงานได้

🎨

image color picker,

เครื่องมือดูดสีจากรูปภาพ

ดึงโค้ดสีที่แม่นยำจากรูปภาพได้ทันที
วิเคราะห์พาเลตต์สีหลักโดยอัตโนมัติและปรับเลือกสีด้วยปุ่มลูกศร

🔍

ดึงสีแม่นยำ 100%

เลือกพิกเซลสีอย่างแม่นยำด้วยแว่นขยายและปุ่มลูกศร

🎨

วิเคราะห์สีหลัก

ดึงสีตัวแทน 8 สีจากรูปภาพอัตโนมัติ

📋

รองรับ 5 รูปแบบ

รองรับ HEX, RGB, HSL, CMYK และ OKLCH

🖼️

ลากและวางรูปภาพที่นี่

หรือคลิกเพื่อเลือกไฟล์ / Ctrl+V เพื่อวาง

JPG PNG GIF WebP SVG สูงสุด 10MB

* รูปภาพจะถูกประมวลผลภายในเบราว์เซอร์ของคุณและจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์

✅ คัดลอกแล้ว!

คุณอาจสนใจ

⏳

เครื่องกำเนิดครอน

🧩

อินเทอร์เฟซ JSON ถึง TS

🔒

ตัวตรวจสอบส่วนหัว HTTP

about,

เกี่ยวกับเครื่องมือดูดสีจากรูปภาพ

เครื่องมือดูดสีจากรูปภาพ (Image Color Picker) เป็นเครื่องมือออนไลน์ฟรีที่ให้คุณดึงข้อมูลสีเฉพาะเจาะจงจากรูปภาพ ภาพถ่าย และภาพประกอบ โดยให้โค้ดสีต่างๆ เช่น HEX, RGB, HSL, CMYK และ OKLCH แก่คุณ ด้วยการประมวลผลฝั่งไคลเอนต์ (client-side) ทั้งหมดผ่าน Canvas API ของเบราว์เซอร์ รูปภาพที่อัปโหลดจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอก ทำให้มั่นใจได้ถึงความปลอดภัยและความเป็นส่วนตัวสูงสุด

เครื่องมือนี้มีประโยชน์อย่างยิ่งสำหรับนักออกแบบเว็บไซต์และนักพัฒนา Front-end เมื่อต้องการหาสีหลักจากการออกแบบอ้างอิงหรือสร้างพาเลตต์สีที่เข้ากับอารมณ์ของรูปภาพ นอกจากคุณสมบัติการดึงสีในระดับพิกเซลด้วยตนเองแล้ว เครื่องมือยังมีฟังก์ชันวิเคราะห์อัตโนมัติเพื่อแสดงสีตัวแทน (Dominant Colors) ของภาพทั้งภาพอีกด้วย

how to,

วิธีใช้งาน

ขั้นตอนที่ 1

อัปโหลดรูปภาพ

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

ขั้นตอนที่ 2

เลือกสีเฉพาะ

เลือกแท็บ "เครื่องมือดูดสี" และคลิกที่บริเวณรูปภาพที่คุณต้องการตรวจสอบ แว่นขยายจะปรากฏขึ้นเพื่อช่วยให้คุณเล็งพิกเซลขนาดเล็กได้อย่างแม่นยำ คุณสามารถปรับทีละพิกเซลได้โดยใช้ปุ่มลูกศร (↑↓←→)

ขั้นตอนที่ 3

ดึงสีหลัก

สลับไปที่แท็บ "ดึงสีอัตโนมัติ" เพื่อวิเคราะห์และสร้างพาเลตต์สีตัวแทน 8 สี (Dominant Colors) โดยอัตโนมัติ คลิก "คัดลอกตัวแปร CSS" เพื่อคัดลอกรายการทั้งหมดและนำไปวางในไฟล์สไตล์ชีตของโปรเจ็กต์

glossary,

คำศัพท์ที่เกี่ยวข้อง

HEX (Hexadecimal Color Code): วิธีการแสดงสีที่พบบ่อยที่สุดในการออกแบบเว็บไซต์ โดยแสดงค่าสีแดง สีเขียว และสีน้ำเงินในระบบเลขฐานสิบหกตั้งแต่ 00 ถึง FF ซึ่งแสดงเป็นสตริง 6 ตัวอักษร เช่น #FF5733 สิ่งนี้มีความจำเป็นอย่างยิ่งเมื่อต้องระบุสีใน HTML และ CSS
OKLCH: วิธีการกำหนดสี CSS สมัยใหม่ที่ใช้พื้นที่สีที่มีความสม่ำเสมอในการรับรู้ ประกอบด้วย ความสว่าง (Lightness), ความอิ่มตัวของสี (Chroma) และ เฉดสี (Hue) ซึ่งสอดคล้องกับลักษณะการมองเห็นของมนุษย์ได้ดีกว่า HSL แบบดั้งเดิม ทำให้ได้เปรียบในการสร้างพาเลตต์สีที่มีอัตราส่วนคอนทราสต์ที่สม่ำเสมอได้อย่างง่ายดาย
สีหลัก (Dominant Color): สีหลักที่โดดเด่นที่สุดในรูปภาพหรือการออกแบบและเป็นตัวกำหนดความประทับใจโดยรวม เครื่องมือนี้ใช้อัลกอริธึม Median Cut ในการวิเคราะห์รูปภาพและดึง 8 สีที่มีสัดส่วนการปรากฏมากที่สุดและส่งผลต่อการมองเห็นมากที่สุดโดยอัตโนมัติ
อัลกอริธึม Median Cut: ประเภทของอัลกอริธึมที่มักใช้ในการแปลงค่าสีของภาพ (Color Quantization) อัลกอริธึมนี้จะสร้างพาเลตต์สีตัวแทนอย่างมีประสิทธิภาพโดยวางพิกเซลทั้งหมดลงในพื้นที่สี RGB แบบ 3 มิติ และทำการแบ่งพื้นที่ตามแกนสีที่มีความแปรปรวนมากที่สุดอย่างต่อเนื่อง
พาเลตต์สี (Color Palette): การผสมผสานของสีที่ใช้ในการออกแบบ นี่คือกลุ่มสีที่ใช้กำหนดสีพื้นฐาน (Base Color), สีหลัก, สีเน้น (Accent Color) ฯลฯ เพื่อให้ได้การออกแบบที่กลมกลืนและเป็นเอกภาพ

faq,

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

Q.รูปภาพที่อัปโหลดจะถูกบันทึกบนเซิร์ฟเวอร์หรือไม่?: ไม่ รูปภาพจะไม่ถูกบันทึก การประมวลผลรูปภาพและอัลกอริธึมการดึงสีทั้งหมดจะดำเนินการโดยใช้ Canvas API ในเบราว์เซอร์ของคุณ (สภาพแวดล้อมภายในเครื่อง) ข้อมูลรูปภาพจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกผ่านอินเทอร์เน็ต ดังนั้นคุณจึงสามารถใช้งานได้อย่างปลอดภัยแม้กับรูปภาพที่มีความละเอียดอ่อนสูง
Q.เครื่องมือรองรับรูปภาพรูปแบบใดบ้าง?: รองรับรูปแบบรูปภาพเว็บทั่วไป ได้แก่ JPG, PNG, GIF, WebP และ SVG ขนาดไฟล์จำกัดสูงสุดที่ 10MB ซึ่งเพียงพอสำหรับการใช้งานส่วนใหญ่
Q.สีที่ดึงออกมามีความแม่นยำแค่ไหน?: เนื่องจากเครื่องมืออ่านข้อมูลพิกเซลโดยตรงบน Canvas คุณจึงได้สีที่แม่นยำ 100% (ในพื้นที่สี sRGB) ในระดับพิกเซล นอกจากนี้ คุณยังสามารถใช้ปุ่มลูกศรบนแป้นพิมพ์หลังจากคลิกเพื่อเลือกและดึงสีที่แตกต่างกันเพียงเล็กน้อยของพิกเซลที่อยู่ติดกันได้อย่างแม่นยำ
Q.สี CMYK สามารถนำไปใช้ในการพิมพ์ได้โดยตรงหรือไม่?: ค่า CMYK ที่เครื่องมือนี้ให้มาเป็นตัวเลขทางทฤษฎีที่ได้จากการคำนวณโดยประมาณจากค่า RGB สำหรับการพิมพ์ระดับมืออาชีพ (DTP) ผลลัพธ์จะขึ้นอยู่กับโปรไฟล์สี (เช่น Japan Color) ดังนั้นคุณควรใช้เป็นค่าอ้างอิงเท่านั้นและทำการตรวจสอบขั้นสุดท้ายด้วยซอฟต์แวร์เฉพาะทางเช่น Illustrator

use cases,

กรณีการใช้งานจริง

🎨

การออกแบบเว็บไซต์และการเขียนโปรแกรม

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

🖼️

โทนสี UI ที่เข้ากับรูปภาพ

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

✨

การสร้างพาเลตต์สีจากภาพประกอบ

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

📸

การอ้างอิงสำหรับการปรับแต่งสีภาพ

ในการตกแต่งภาพ (Retouching) คุณสามารถรับข้อมูลสีที่แม่นยำของพื้นที่เฉพาะ เช่น โทนสีผิวหรือสีของท้องฟ้าในระดับพิกเซล เพื่อใช้เป็นเกณฑ์ในการปรับสมดุลแสงขาว (White Balance) และการปรับเกรดสี (Color Grading)