免費圖片調色盤提取器

工作原理

顏色提取完全在你的瀏覽器中執行，對從 Canvas API 讀取的原始畫素資料應用手寫的 k-means++ 聚類演算法——沒有伺服器、沒有第三方庫。由於演算法使用確定性偽隨機數產生器（mulberry32）而非 Math.random，相同的圖片和顏色數量設定總是得到相同的調色盤。

1. 1
   Canvas 讀取畫素資料

   圖片被繪製到離屏 HTML Canvas 元素上，並將最長邊縮小到最多 200px。Canvas API 的 getImageData() 以原始 RGBA 位元組返回每個畫素，完全透明的畫素（alpha < 128）會在聚類開始前被丟棄。
2. 2
   k-means++ 對畫素聚類

   k-means++ 初始化器確定性地選取質心，然後演算法最多迭代 20 次：每個畫素分配到 RGB 空間中最近的質心，再將質心重新計算為所有分配畫素的平均值。收斂到相同十六進位制值的簇會被合併，因此結果中的每個色塊都是唯一的。
3. 3
   計算每種顏色的後設資料

   每個質心都會轉換為 HEX、HSL 及其佔總畫素的比例（百分比）。按標準公式計算 WCAG 相對亮度，並在每個色塊旁顯示與黑色和白色的對比度。
4. 4
   匯出與取色器輸出

   調色盤可以複製為 CSS 自定義屬性、SCSS 變數、Tailwind 設定片段或 JSON。點選取色器會將你在預覽上的點選映射回全解析度畫布上的準確源畫素座標，並將該畫素的顏色新增到單獨的已取顏色列表中。可以透過 Canvas toBlob() 下載 PNG 色條。

相關工具