我做了一個拼豆圖紙產生器，照片秒變圖紙

最近發現「拼豆」這個圈子比想像中更普及，玩的人其實不少：小孩、親子、手作族、漢服和桌遊周邊都在玩。但我找了一輪線上工具，體驗普遍很差——要嘛把「顯示色號」這種基本功能鎖在 Pro 方案裡收費，要嘛只給你一張糊糊的預覽圖，讓你自己數要買多少顆豆。

身邊幾個朋友也在玩，三不五時會問「這張圖有現成的圖紙嗎」。每次幫忙翻圖庫都很沒效率，乾脆自己做了一個：

bitbead.pomodiary.com

支援 Perler / Hama / Artkal / MARD / COCO 色卡，產生器本身免費使用，不需註冊，提供簡中、繁中、英文、日文四種語言（後來另外加了一個可選的 Bitbead Pro 方案，提供無限儲存專案、更大畫布、高解析 PNG 匯出和可列印的 PDF 圖紙）。

---

它做了什麼

丟一張照片進去，挑好品牌色卡，30 秒內就會拿到：

• 一張精確到色號的網格圖紙（每一格對應哪一顆豆）
• 總共要買多少顆豆
• 每個顏色各要幾顆，按官方色號列出來
• 一鍵複製成 TSV 購物清單，直接傳給淘寶賣家
• 或是下載 PNG / PDF，印出來照著拼（高解析 PNG 和可列印的 PDF 匯出目前屬於 Bitbead Pro 功能）

---

講三個細節，免得看起來只是包裝

1. 色彩比對用 CIEDE2000，不是 RGB 距離

最陽春的顏色比對，是算 RGB 三個數值的歐氏距離，找出最接近的色號。亮色區域還過得去，到了暗部和膚色就很糟——人眼看起來完全不像，演算法卻覺得「很接近」。

CIEDE2000 是國際照明委員會（CIE）在 2000 年發表的感知色差公式，專業色彩管理軟體用的就是它。換上之後，人臉的色號比對明顯合理許多，皮膚的漸層不會突然冒出一塊瑪利歐紅。

工具裡提供三種模式：

• 快速——RGB 歐氏距離，預覽用
• 標準——CIE94
• 高品質——CIEDE2000

大圖（>96×96）會自動丟到 Web Worker 執行，不會卡住使用者介面。

2. 自動辨識背景，不用先去背

很多人上傳的是拼豆作品照或電商商品圖，主體加上純色背景。如果整張圖都拿去量化，那一大片白底就要耗掉幾十顆白色豆，很浪費。

工具會從圖片四個邊緣的像素往內做 flood-fill，把「連成一片的邊緣色」辨識為背景並自動留空。透明 PNG 則直接讀取 alpha 通道。大部分情況直接丟原圖就好，不必先開 Photoshop。

3. 主流色卡 + COCO 291

我整理了 Perler、Hama、Artkal、MARD，以及中文圈小顆豆常見的 COCO 291 色號體系，總共 1,406 筆色卡資料（約 886 個不重複的 HEX）。預設色卡會依介面語言自動選擇：

• 中文 → MARD 221（中國常見色號）
• 日文 → Hama
• 英文 → Perler

拼到一半想換品牌，只要重新選色卡，整張圖就會用新品牌的色號重新比對，不必從頭上傳。

---

為什麼長這個樣子

整個網站走「像素拼豆」風：硬邊框、實色偏移陰影（solid offset shadow）、像素字型（中日韓用開源的 Fusion Pixel 12，拉丁字母用 Press Start 2P）、網格底紋。豆子本身保留圓形——從上方看，拼豆板上的豆就是圓的，這點不能妥協。

技術架構：

• Next.js 16（App Router）
• Cloudflare Workers（以 OpenNext 部署）
• image-q（量化演算法函式庫）
• jsPDF（PDF 匯出）

上線時整個網站是靜態部署，沒有帳號系統，也沒有資料庫。

---

產生圖紙和繪製都免費，不需註冊；後來加上的 Pro 方案是選用的，提供無限儲存專案、更大畫布、高解析 PNG 匯出和可列印的 PDF 圖紙，目前的方案內容請見 Bitbead 定價頁。

網址：bitbead.pomodiary.com，產品介紹請見 Bitbead。