最近发现「拼豆」这个圈子比想象中下沉很多，玩的人不少：小孩、亲子、手工党、汉服 / 桌游周边都在玩。但搜了一圈在线工具，体验普遍很烂------要么把「显示色号」这种基础功能锁在 Pro 套餐里收钱，要么只给你一张糊糊的预览图，让你自己数要买多少颗豆。
身边几个朋友也在玩，时不时会问「这张图有现成图纸吗」。每次帮忙翻图库挺低效，索性自己做了一个:
支持 Perler / Hama / Artkal / MARD 四个主流品牌,免费,不需注册,中英日繁四语言。
它做了什么
丢一张照片进去,挑品牌色卡,30 秒内会拿到:
- 一张精确到色号的网格图纸(每一格画的是哪一颗豆)
- 总共要买多少颗豆
- 每个颜色各要多少颗,按官方色号列出来
- 一键复制成 TSV 购物清单,发给淘宝店家
- 或者下载 PNG / PDF,打印照着拼
写一下三个细节,免得显得是包装出来的
1. 色彩匹配用 CIEDE2000,不是 RGB 距离
最朴素的颜色匹配是算 RGB 三个数字的欧氏距离,找最近的色号。亮色区域还行,到了暗部和肤色就很糟------人眼看着完全不像,算法觉得「很接近」。
CIEDE2000 是 CIE 国际色彩组织 2000 年发布的感知距离公式,专业色彩管理软件用的就是这个。换上之后人脸的色号匹配明显合理很多,皮肤过渡不会突然蹦出马里奥红。
工具里给了三档可选:
- 快速------RGB 欧氏,预览用
- 标准------CIE94
- 高质量------CIEDE2000
大图(>96×96)自动跑在 Web Worker 里,不卡 UI。
2. 自动识别背景,不用先抠图
很多人上传的是拼图照片或电商图,主体 + 纯色背景。如果整张图都拿去量化,那一大片白底要花掉几十颗白色豆,浪费。
工具会从图片四条边的像素往里 flood-fill,识别出「连片的边缘色」作为背景自动留空。透明 PNG 直接识别 alpha 通道。多数情况扔原图就行,不用先 Photoshop。
3. 四个品牌的完整官方色卡
整理了 Perler、Hama、Artkal、MARD 四家的官方色卡,加起来约 490 色。按界面语言智能默认:
- 中文 → Artkal(国内最好买到)
- 日文 → Hama
- 英文 → Perler
拼到一半想换品牌,重新选一下色卡,整张图会用新品牌的色号重新匹配,不用从头上传。
为什么长成这样
整个站走「像素拼豆」风:硬边框、solid offset 阴影、像素字体(中日韩用了开源的 Fusion Pixel 12,拉丁字体用 Press Start 2P)、网格底纹。圆豆本身保留圆形------从顶部看拼豆板上就是圆的,这点不能让步。
技术栈:
- Next.js 16(App Router)
- Cloudflare Workers(OpenNext 部署)
- image-q(量化算法库)
- jsPDF(PDF 导出)
整站静态部署,没账号系统、没数据库。
免费,不需注册,不限次数。
有 bug 或者哪里用得不顺手,欢迎留言告诉我,我都会改。
觉得有用,欢迎转给身边玩拼豆的朋友 :)