แปลงฟรี

จานสี แยกจากรูปภาพ

แยกสีที่โดดเด่นออกจากภาพใดๆ ได้ทันที รับค่า HEX และ RGB ได้ในคลิกเดียว ฟรี ปลอดภัย และทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ

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

รองรับ PNG, JPG, WEBP, GIF สูงสุด 50MB

หรือ

เกี่ยวกับเครื่องมือนี้

การแยกชุดสีจะวิเคราะห์ภาพและระบุสีที่โดดเด่นหรือสีที่เป็นตัวแทน ผลลัพธ์ที่ได้คือชุดสีเล็กๆ — โดยทั่วไปคือ 5-8 — ที่จับภาพลักษณะของภาพ นักออกแบบใช้ชุดสีที่แยกออกมาเพื่อประสานองค์ประกอบการออกแบบอื่นๆ (สี UI ที่ช่วยเสริมภาพหลัก ชุดสีแบรนด์ที่ได้มาจากภาพถ่าย โทนสีที่เข้ากับภาพอารมณ์)

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

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

ทำไมต้องแยกจานสี

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

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

วิธีใช้งาน

อัปโหลด เลือกขนาดจานสี รับสี

  1. อัปโหลดภาพของคุณ: ลาก JPEG, PNG หรือ WebP ลงในพื้นที่อัพโหลด รองรับไฟล์ขนาดสูงสุด 50 MB
  2. เลือกขนาดจานสี: 5-8 สีครอบคลุมกรณีการใช้งานส่วนใหญ่ 3-4 สำหรับพาเล็ทที่เน้นสีแน่น 10+ สำหรับการสกัดแบบละเอียด จานสีขนาดใหญ่จะมีสีที่ละเอียดกว่าแต่กลับให้ประโยชน์น้อยลง
  3. สารสกัด: การจัดกลุ่มทำงานในเบราว์เซอร์ของคุณ จานสีขนาดเล็กจะดึงข้อมูลได้เร็วกว่า จานสีขนาดใหญ่จากภาพความละเอียดสูงใช้เวลาไม่กี่วินาที
  4. ใช้จานสี: สามารถคัดลอกรหัส Hex ได้โดยตรง จานสีสามารถส่งออกเป็น JSON, คุณสมบัติที่กำหนดเอง CSS หรือรูปภาพตัวอย่างสีได้

กรณีการใช้งานทั่วไป

รายละเอียดทางเทคนิค

การจัดกลุ่มแบบ K-means วนซ้ำ: กำหนดแต่ละพิกเซลให้กับศูนย์กลางคลัสเตอร์ที่ใกล้ที่สุด คำนวณศูนย์กลางใหม่เป็นค่าเฉลี่ยของพิกเซลที่กำหนด ทำซ้ำจนกระทั่งมาบรรจบกัน การทำงานบนภาพที่มีความละเอียดเต็มจะช้า การสุ่มตัวอย่าง (รับทุกๆ พิกเซลที่ N) จะเร่งความเร็วโดยสูญเสียคุณภาพน้อยที่สุด

พื้นที่สีมีความสำคัญ การจัดกลุ่มใน RGB จะสร้างจานสีที่ถ่วงน้ำหนักด้วยระยะห่าง RGB ซึ่งไม่ตรงกับระยะห่างในการรับรู้ การจัดกลุ่มใน LAB หรือ HSV จะสร้างจานสีที่สอดคล้องกันมากขึ้น — สีที่ดูเป็นกลุ่มเดียวกันเข้าด้วยกันได้อย่างน่าเชื่อถือมากขึ้น

เอาต์พุต: รหัสฐานสิบหกสำหรับแต่ละศูนย์คลัสเตอร์ บวกเปอร์เซ็นต์ของพิกเซลรูปภาพในแต่ละคลัสเตอร์ เปอร์เซ็นต์แสดงถึงความชุกของการมองเห็น กระจุกที่ใหญ่ที่สุดคือสีที่โดดเด่นที่สุด

แนวทางปฏิบัติที่ดีที่สุด

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

สกัดได้กี่สี?
โดยทั่วไปเครื่องมือจะแยกสีเด่นออกมา 5-8 สี ขึ้นอยู่กับความซับซ้อนของภาพ รูปภาพธรรมดาๆ ที่มีสีน้อยจะสร้างตัวอย่างน้อยลงและชัดเจนยิ่งขึ้น ภาพถ่ายที่ซับซ้อนจะให้ช่วงที่กว้างขึ้น
อัลกอริธึมการแยกข้อมูลทำงานอย่างไร
เครื่องมือนี้ใช้การวัดปริมาณสี (ค่ามัธยฐานหรือการจัดกลุ่มแบบเคมีน) เพื่อจัดกลุ่มพิกเซลที่คล้ายกันและระบุสีที่เป็นตัวแทนมากที่สุด วิธีนี้จะสร้างสีที่สื่อความหมายทางสายตามากกว่าค่าพิกเซลเดี่ยวทั่วไป
ฉันสามารถใช้สีที่แยกออกมาสำหรับแบรนด์ของฉันได้หรือไม่?
ใช่. นี่เป็นเทคนิคยอดนิยมในการดึงชุดสีของแบรนด์จากมูดบอร์ด ภาพถ่าย หรือรูปภาพผลิตภัณฑ์ รหัสฐานสิบหกที่แยกออกมาสามารถนำมาใช้โดยตรงใน CSS, เครื่องมือออกแบบ หรือหลักเกณฑ์ของแบรนด์
เหตุใดสีที่แยกออกมาจึงไม่ตรงกับสิ่งที่ฉันเห็นทุกประการ
การแยกสีจะจัดกลุ่มพิกเซลที่คล้ายกันไว้ด้วยกัน การไล่ระดับสีที่ดูเหมือนสีเดียวกับดวงตาอาจถูกเฉลี่ยให้เป็นเฉดสีที่แตกต่างกันเล็กน้อย นอกจากนี้ การปรับเทียบจอภาพยังส่งผลต่อสีที่ปรากฏบนหน้าจออีกด้วย
เอาต์พุตมีรูปแบบใด
รหัสฐานสิบหกตามค่าเริ่มต้น เครื่องมือส่วนใหญ่ยังส่งออกค่า RGB, HSL และค่าปริภูมิสีอื่นๆ ด้วย คุณสมบัติที่กำหนดเองของ CSS หรือเอาต์พุต JSON มีประโยชน์สำหรับการใช้งานโดยทางโปรแกรม
รูปภาพของฉันถูกอัพโหลดไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ การแตกไฟล์เกิดขึ้นในเบราว์เซอร์ของคุณ
จานสีจะเข้ากับเอกลักษณ์ของแบรนด์หรือไม่?
การแยกอัลกอริทึมเป็นการอธิบาย ไม่ใช่การกำหนด ผลลัพธ์จะอธิบายรูปภาพ แบรนด์อาจมีจานสีที่เกี่ยวข้องแต่แตกต่างกัน ใช้การดึงข้อมูลเป็นจุดเริ่มต้น จากนั้นปรับแต่งเพื่อให้สอดคล้องกับแบรนด์
ฉันสามารถดึงข้อมูลจากวิดีโอได้หรือไม่?
การแยกเฟรมเดียวด้วยเครื่องมือนี้เท่านั้น สำหรับการแยกชุดสีวิดีโอ ให้สุ่มเฟรมและแยกออกจากแต่ละชุด จากนั้นจึงรวมเข้าด้วยกัน