Image Color Extractor ช่วยวิเคราะห์ไฟล์รูปภาพ (ลากวาง, วางจากคลิปบอร์ด หรือคลิกเพื่อโหลด) และแสดงสีหลักสูงสุด 16 สีพร้อมสัดส่วนเปอร์เซ็นต์ โดยใช้การสุ่มตัวอย่างพิกเซลและการจัดกลุ่มสีภายในเบราว์เซอร์ — ไม่มีการอัปโหลด ไม่ต้องรอเซิร์ฟเวอร์ตอบกลับ คลิกที่แถบสีเพื่อคัดลอกค่า Hex หรือใช้ Copy All เพื่อรับชุดสีทั้งหมด
นักออกแบบและนักพัฒนาจำเป็นต้องดึงสีจากรูปภาพอยู่บ่อยครั้ง — ไม่ว่าจะเป็นการดึงสีแบรนด์จากโลโก้, การสร้างชุดสีจากภาพถ่าย หรือการจับคู่สี UI ให้ตรงกับงานศิลปะอ้างอิง Image Color Extractor จัดการเรื่องนี้ภายในเบราว์เซอร์โดยไม่ต้องอัปโหลด เพียงลากวาง, วางจากคลิปบอร์ด หรือคลิกเพื่อโหลดรูปภาพ (PNG, JPG, SVG, WebP, GIF) เครื่องมือจะวาดรูปภาพขนาดย่อลงบน Canvas, สุ่มตัวอย่างทุกๆ 4 พิกเซล, จัดกลุ่มลงในพื้นที่สีที่ลดทอนลง (5 บิตต่อแชนเนล, ~32,000 กลุ่ม), คำนวณค่าเฉลี่ย RGB ของแต่ละกลุ่ม แล้วเลือกกลุ่มที่มีจำนวนพิกเซลสูงสุด N อันดับแรก พร้อมทั้งรวมสีที่ใกล้เคียงกัน (ภายในระยะ 24 Manhattan distance ใน RGB) ผลลัพธ์ที่ได้คือชุดสีที่เป็นตัวแทนของภาพจริงอย่างสะอาดตา ไม่ใช่แค่สีของพิกเซลที่ตรงกันทุกประการ มีแถบเลื่อน (3–16) ให้คุณปรับขนาดชุดสีตามความต้องการ แต่ละแถบสีจะแสดงค่า Hex และสัดส่วนพิกเซล; คลิกเพื่อคัดลอกแยกสี หรือคลิก Copy All เพื่อรับชุดสีทั้งหมดในครั้งเดียว
โหลดไฟล์รูปภาพมาตรฐานได้ทุกรูปแบบและสร้างชุดสีหลักภายในเวลาไม่ถึงวินาที แม้จะเป็นรูปภาพขนาดใหญ่
แต่ละสีที่ดึงออกมาจะแสดงเปอร์เซ็นต์ของพื้นที่ในรูปภาพ — ช่วยให้รู้ว่าสีไหนเป็นสีหลักและสีไหนเป็นสีรองในพริบตา
แถบเลื่อนสำหรับเลือกจำนวนสี 3–16 สี ชุดสีขนาดเล็กเหมาะสำหรับงานแบรนด์ ส่วนขนาดใหญ่เหมาะสำหรับการอ้างอิงจากภาพถ่าย
คลิกที่แถบสีเพื่อคัดลอกค่า Hex หรือคลิก Copy All เพื่อรับชุดสีทั้งหมดในรูปแบบรายการคั่นด้วยบรรทัดใหม่สำหรับการใช้งานจำนวนมาก
ไม่มีการอัปโหลด ไม่มีการเรียกใช้เซิร์ฟเวอร์ รูปภาพไม่หลุดออกจากเครื่องของคุณ ปลอดภัยสำหรับงาน Mockup ส่วนตัว, ทรัพย์สินที่ยังไม่เปิดเผย หรือผลงานที่มีความสำคัญ
PNG, JPG, SVG, WebP, GIF, ICO — รองรับทั้งหมดผ่านการถอดรหัส Canvas มาตรฐาน พิกเซลที่โปร่งใสจะถูกข้ามโดยอัตโนมัติ
วางรูปภาพโลโก้ ดึงสีที่ใช้จริงออกมา แล้วคัดลอกไปใส่ในตัวแปร CSS ของ Brand-kit หรือระบบการออกแบบ
ใส่ภาพถ่ายทิวทัศน์เพื่อให้เครื่องมือสร้างชุดสี 5 สีที่สื่อถึงอารมณ์ของภาพ — มีประโยชน์สำหรับงาน Art direction หรือการสร้างธีม
จับภาพหน้าจอของ UI อ้างอิง ดึงชุดสีออกมา แล้วนำไปใช้ใน Mockup ของคุณเองเพื่อให้ได้อารมณ์ทางสายตาที่ใกล้เคียงกัน
เมื่อลูกค้าส่งรูปภาพมาเป็นทิศทางของแบรนด์ ให้ดึงสีออกมา 8-10 สีเพื่อเสนอชุดสีเริ่มต้นที่ซื่อตรงต่อต้นฉบับ
ดึงสีหลัก 2 สีจากรูปภาพเพื่อสร้าง Background Gradient ที่ช่วยขับเน้นองค์ประกอบหลักให้โดดเด่น
คลิกไอคอน Image Colors ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นพร้อมพื้นที่ลากวางและการตั้งค่า
ลากไฟล์เข้ามา, วางจากคลิปบอร์ด (Ctrl+V) หรือคลิกเพื่อเปิดเครื่องมือเลือกไฟล์ ระบบจะโหลดและสุ่มตัวอย่างพิกเซลโดยอัตโนมัติ
ใช้แถบเลื่อนเพื่อเลือกจำนวนสีที่ต้องการดึงออกมา (3–16) ชุดสีจะถูกสร้างใหม่ทันทีเมื่อคุณลากแถบเลื่อน
แต่ละแถบสีจะแสดงค่า Hex และเปอร์เซ็นต์พื้นที่ในรูปภาพ มองหาสีหลักที่มีเปอร์เซ็นต์สูงสุด
คลิกที่แถบสีเพื่อคัดลอกค่า Hex หรือใช้ Copy All เพื่อรับชุดสีทั้งหมดไปใช้ในเครื่องมือออกแบบหรือ CSS ของคุณ
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
