Turn any image into a Perler (fuse) bead pattern — entirely in your browser. Upload a picture, tune the size, and get a pegboard-ready chart with a bead shopping list.
🔗 Live: perler.gujiakai.top · English / 中文
Everything runs client-side. Your images never leave your device.
- 🖼️ Upload or drag & drop any image (a built-in sample is included)
- 🎯 Perceptually accurate colors — every pixel is matched using CIEDE2000 distance in CIE-Lab space
- 🏷️ Seven bead color systems — Perler, MARD 221 & 291, COCO 291, Hama, Artkal S and Artkal Mini (1,392 colors in total), switchable per pattern
- 🧮 Floyd–Steinberg dithering (toggleable) for smoother photo gradients
- 📏 Pegboard-aware grid — guides every 10 pegs plus 29×29 board boundaries, so you know exactly how many standard pegboards you need
- 🛒 Bead shopping list — per-color counts, sorted by quantity; click a color to highlight where it goes on the board
- 💾 PNG export — pattern plus printable color legend in one image
- 📐 Physical size estimate for standard 5 mm midi beads
- 🫥 Transparent pixels become empty pegs, so cut-out PNGs make clean shaped patterns
- 🌐 English & 中文 —
/for English,/zh/for Chinese, switchable in the header
| System | Colors | Bead size | Codes look like | Source |
|---|---|---|---|---|
| Perler | 103 | 5 mm midi | 80-15211 + name |
beadcolors (measured) |
| MARD 221 | 221 | 5 mm midi | A1, F15 |
bitbead.app |
| MARD 291 | 291 | 2.6 mm mini | A1 … ZG8 |
bitbead.app |
| COCO 291 | 291 | 2.6 mm mini | E02, K39 |
bitbead.app |
| Hama | 89 | 5 mm midi | H01 + name |
bitbead.app |
| Artkal S | 176 | 5 mm midi | S01 + name |
bitbead.app |
| Artkal Mini | 221 | 2.6 mm mini | MA1 + 中文/EN name |
bitbead.app |
Perler is the classic American fuse-bead brand; the app ships its complete current catalog with official product codes and RGB values measured from physical beads. MARD and COCO are popular Chinese systems organized as lettered series — the 221 chart covers 5 mm midi beads, while the 291-color charts target 2.6 mm minis for high-detail work. Hama is the classic Danish brand, and Artkal is the Chinese brand best known in the pixel-art community, in both midi (S) and mini lines.
The physical-size estimate and pegboard math adapt to each system's bead size automatically. A few smaller systems (Nabbi 30, Yant 119) aren't included yet — adding one is a small change to scripts/gen-palette.mjs plus a new entry in the BRANDS map. PRs welcome.
Astro · React island · Tailwind CSS · shadcn/ui — fully static output, zero backend.
src/
├── lib/
│ ├── palette.ts # Perler bead color data (generated by scripts/gen-palette.mjs)
│ ├── color.ts # sRGB → Lab, CIEDE2000, nearest-bead matcher
│ ├── pattern.ts # grid quantization + Floyd–Steinberg dithering
│ └── render.ts # canvas board renderer + PNG export
├── components/
│ ├── PerlerStudio.tsx # the app (React island)
│ └── ui/ # shadcn/ui components
└── pages/
└── index.astro # page shell
Static output — deploys to any static host (Cloudflare Pages, Netlify, Vercel…):
- Build command:
npm run build - Output directory:
dist - Node version: 22+
- Vibe-coded with Claude Code, powered by Anthropic's Claude Fable 5 — scaffolding, color science, rendering, i18n and all seven palette integrations
- Bead color data: the beadcolors community dataset and the bitbead.app color charts
- Built on Astro, React, Tailwind CSS and shadcn/ui
Perler® and MARD are trademarks of their respective owners. This is an unofficial fan-made tool. Perler color values come from the community-maintained beadcolors dataset; the MARD 221 chart comes from bitbead.app. Both are measured approximations of the physical beads. Refresh the palettes anytime with node scripts/gen-palette.mjs.