แยกชุดสีจากรูปภาพ ฟรี

วิธีการทำงาน

การดึงสีทำงานในเบราว์เซอร์ทั้งหมดด้วยอัลกอริทึมจัดกลุ่ม k-means++ ที่เขียนขึ้นเอง ใช้กับข้อมูลพิกเซลดิบที่อ่านจาก Canvas API — ไม่มีเซิร์ฟเวอร์ ไม่มีไลบรารีภายนอก ภาพและการตั้งค่าจำนวนสีเดิมให้ชุดสีเดิมเสมอ เพราะอัลกอริทึมใช้ตัวสร้างเลขสุ่มเทียมแบบกำหนดแน่นอน (mulberry32) แทน Math.random

1. 1
   Canvas อ่านข้อมูลพิกเซล

   ภาพถูกวาดลงบนองค์ประกอบ HTML Canvas นอกจอและลดขนาดให้ด้านยาวสุดไม่เกิน 200px getImageData() ของ Canvas API คืนทุกพิกเซลเป็นไบต์ RGBA ดิบ และพิกเซลที่โปร่งใสทั้งหมด (alpha < 128) ถูกทิ้งก่อนเริ่มจัดกลุ่ม
2. 2
   k-means++ จัดกลุ่มพิกเซล

   ตัวเริ่มต้น k-means++ กำหนดจุดศูนย์กลางแบบแน่นอน แล้วอัลกอริทึมวนซ้ำสูงสุด 20 ครั้ง: แต่ละพิกเซลถูกกำหนดให้จุดศูนย์กลางที่ใกล้ที่สุดในพื้นที่ RGB แล้วคำนวณจุดศูนย์กลางใหม่เป็นค่าเฉลี่ยของพิกเซลที่กำหนดให้ กลุ่มที่ยุบเป็นค่า hex เดียวกันจะถูกรวม ตัวอย่างสีแต่ละตัวในผลลัพธ์จึงไม่ซ้ำกัน
3. 3
   คำนวณข้อมูลของแต่ละสี

   จุดศูนย์กลางแต่ละจุดถูกแปลงเป็น HEX, HSL และสัดส่วนของพิกเซลทั้งหมด (เปอร์เซ็นต์) ความสว่างสัมพัทธ์ WCAG คำนวณตามสูตรมาตรฐาน และอัตราส่วนคอนทราสต์เทียบกับทั้งสีดำและสีขาวแสดงคู่กับทุกตัวอย่างสี
4. 4
   ส่งออกและผลลัพธ์จากที่ดูดสี

   ชุดสีคัดลอกได้เป็น CSS custom property ตัวแปร SCSS ส่วนตั้งค่า Tailwind หรือ JSON ที่ดูดสีแบบคลิกจะจับคู่ตำแหน่งที่คุณคลิกบนตัวอย่างกลับไปยังพิกัดพิกเซลต้นฉบับที่แน่นอนบน canvas ความละเอียดเต็ม แล้วเพิ่มสีของพิกเซลนั้นในรายการสีที่เลือกแยกต่างหาก แถบชุดสี PNG ดาวน์โหลดได้ผ่าน Canvas toBlob()

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