我做了一个拼豆图纸生成器，把照片秒变图纸

最近发现「拼豆」这个圈子比想象中下沉很多，玩的人不少：小孩、亲子、手工党、汉服 / 桌游周边都在玩。但搜了一圈在线工具，体验普遍很烂——要么把「显示色号」这种基础功能锁在 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 里，不卡 UI。

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 阴影、像素字体（中日韩用了开源的 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。