Behind the Scenes

I Built a Bead Pattern Generator That Turns Photos into Patterns in Seconds

By the POMODIARY Team · · 4 min read

Lately I have noticed that fuse beads (拼豆, "pindou", the Perler or Hama beads you arrange on a pegboard and iron together) have a much broader following than I expected. Plenty of people are into them: kids, parents doing crafts with their children, general makers, and people making accessories for hanfu (traditional-style Chinese clothing) or board games. But after searching around for online tools, I found the experience was mostly poor. Some lock a basic feature like showing color codes behind a paid Pro plan. Others give you nothing but a blurry preview image and leave you to count how many beads you need to buy.

A few friends of mine also make bead art, and every so often one of them asks, "Is there a ready-made pattern for this picture?" Digging through pattern libraries for them each time was inefficient, so I simply built one myself:

bitbead.pomodiary.com

It supports the Perler, Hama, Artkal, MARD and COCO palettes. The generator itself is free to use, needs no sign-up, and comes in English, Simplified Chinese, Traditional Chinese and Japanese. (An optional Bitbead Pro plan was added later; it covers unlimited saved projects, larger canvases, high-resolution PNG exports and printable PDF charts.)

This post was first written in Chinese for the developer's WeChat Official Account (a blog-style publishing channel inside the WeChat messaging app) and adapted for English readers.

What it does

Drop in a photo, choose a bead brand's palette, and within 30 seconds you get:

  • A grid pattern accurate down to the color code (which bead goes in every single cell)
  • The total number of beads you need to buy
  • How many beads you need of each color, listed by the official color codes
  • A one-click copy of a TSV shopping list you can send straight to a bead shop (in China, that usually means a seller on Taobao, the big online marketplace)
  • Or a PNG / PDF download to print out and follow as you place beads (high-resolution PNG and printable PDF exports are now part of Bitbead Pro)

Three details, so this does not sound like marketing

1. Color matching uses CIEDE2000, not RGB distance

The most naive way to match colors is to compute the Euclidean distance between the three RGB numbers and pick the nearest color code. That works fine for bright areas, but it falls apart in shadows and skin tones: to the human eye the result looks nothing like the original, while the algorithm thinks it is "very close".

CIEDE2000 is a perceptual color-difference formula published in 2000 by the CIE (the International Commission on Illumination), and it is what professional color-management software uses. After switching to it, color matches on faces became noticeably more sensible, and skin gradients no longer suddenly sprout a patch of Mario red.

The tool offers three levels to choose from:

  • Fast: RGB Euclidean distance, for previews
  • Standard: CIE94
  • High quality: CIEDE2000

Large images (bigger than 96×96) automatically run in a Web Worker, so the interface does not freeze.

2. Automatic background detection, no cut-out needed

A lot of people upload photos of jigsaw-style artwork or product shots from online stores: a subject on a solid-color background. If you quantize the whole image, that big white backdrop eats up dozens of white beads for nothing.

The tool runs a flood fill inward from the pixels along all four edges of the image, identifies "contiguous edge color" as the background, and leaves it empty automatically. For transparent PNGs it reads the alpha channel directly. In most cases you can throw in the original image as-is, with no need to open Photoshop first.

3. The major palettes, plus COCO 291

I compiled the Perler, Hama, Artkal and MARD palettes, along with the COCO 291 color-code system that is common for the small beads popular in China, for a total of 1,406 palette entries (about 886 unique HEX values). The default palette is chosen sensibly from the interface language:

  • Chinese → MARD 221 (the color codes most common in China)
  • Japanese → Hama
  • English → Perler

If you want to switch brands halfway through, just pick a different palette and the whole pattern is re-matched to the new brand's color codes. There is no need to upload the image again.

Why it looks the way it does

The whole site follows a "pixel bead" style: hard borders, solid offset shadows, pixel fonts (the open-source Fusion Pixel 12 for Chinese, Japanese and Korean, and Press Start 2P for Latin text), and a grid background. The beads themselves stay round. Seen from above on a pegboard, a bead is round, and that is one point I was not willing to compromise on.

The tech stack:

  • Next.js 16 (App Router)
  • Cloudflare Workers (deployed with OpenNext)
  • image-q (a color quantization library)
  • jsPDF (for PDF export)

At launch, the whole site was deployed statically, with no account system and no database.

Generating patterns and drawing are free, with no sign-up. The Pro plan added later is optional and covers unlimited saved projects, larger canvases, high-resolution PNG exports and printable PDF charts; see the Bitbead pricing page for current plans.

Website: bitbead.pomodiary.com. You can also read more on the Bitbead product page.

Keep reading