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
| Command | Action |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start dev server at localhost:4321 |
npm run build |
Build the static site to ./dist/ |
npm run preview |
Preview the production build locally |
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.