Taylor zhu

Posted on Sep 1 AI-assisted

I Built a Free Tool to Turn Photos into Perler Bead Patterns

#webdev #javascript #nextjs #showdev

Turning a photo into a usable Perler bead pattern sounds simple: resize the image, match every pixel to a bead color, and draw a grid.

However, while building the tool, I found that generating a practical pattern involves more than just pixelating an image.

I needed to solve several problems:

How can image colors be matched to real bead colors?
How can users control the size and complexity of the pattern?
How can the tool calculate the number of beads required?
How can the final pattern be exported for printing?

The result is PerlerBeads.net, a free browser-based tool that converts photos and illustrations into printable Perler bead patterns.

The Image-Processing Pipeline

The converter follows these main steps:

Load the uploaded image in the browser.
Resize large images before processing.
Sample pixels according to the selected grid size.
Match every sampled color to an available bead color.
Generate the bead grid and count the required colors.
Export the result as PNG or PDF.

The image processing runs directly in the browser using the Canvas API. This provides fast feedback and avoids sending the uploaded image to a separate image-processing server.

Matching Image Colors to Bead Colors

A simple color matcher might compare the numerical distance between two RGB colors:

function rgbDistance(
  first: [number, number, number],
  second: [number, number, number]
) {
  return Math.sqrt(
    (first[0] - second[0]) ** 2 +
    (first[1] - second[1]) ** 2 +
    (first[2] - second[2]) ** 2
  );
}

This method is fast, but the closest RGB value is not always the color that looks closest to the human eye.

For better results, the converter uses perceptual color matching. Colors are converted into the LAB color space and compared using the CIEDE2000 color-difference formula.

In simple terms, the algorithm asks:

Which available bead color looks most similar to this image color?

The simplified matching logic looks like this:

function findClosestBeadColor(
  pixelLab: [number, number, number],
  palette: BeadColor[]
) {
  let closestColor = palette[0];
  let smallestDifference = Infinity;

  for (const color of palette) {
    const difference = deltaE2000(pixelLab, color.lab);

    if (difference < smallestDifference) {
      smallestDifference = difference;
      closestColor = color;
    }
  }

  return closestColor;
}

This produces more natural results for skin tones, shadows, muted colors, and colors with similar brightness.

Controlling the Color Palette

A mathematically accurate color match is not always the most practical choice.

Some bead colors may be difficult to purchase. A generated pattern may also contain several colors that look almost identical.

The tool therefore allows users to limit the available palette and exclude individual colors before generating the final pattern.

A pattern using 18 carefully selected colors is often easier to build than a pattern using 40 slightly different colors.

Choosing the Grid Size

Grid size has a major effect on the final result.

A smaller grid:

Uses fewer beads
Is faster to assemble
Removes fine details
Works well for icons and simple characters

A larger grid:

Preserves more details
Produces smoother shapes
Requires more beads and boards
Takes longer to assemble

Each cell in the generated grid represents one real bead. This makes it possible to estimate the physical size and material requirements before starting the project.

Generating a Material List

Once every grid cell has a color ID, the converter can count how many beads of each color are required.

const beadCounts = new Map<string, number>();

for (const cell of grid.cells) {
  if (!cell.colorId) continue;

  beadCounts.set(
    cell.colorId,
    (beadCounts.get(cell.colorId) ?? 0) + 1
  );
}

The generated material list can include:

Bead color name
Color code
Required quantity
Total number of beads

This connects the digital pattern with the real crafting process. Users can check which colors they need before assembling the pattern.

Exporting the Pattern

A useful export needs more than a screenshot of the preview.

The exported pattern can include:

A clearly separated bead grid
Pattern dimensions
Color labels
Total bead count
Quantity for each bead color

PNG is convenient for saving and sharing, while PDF is usually better for printing and assembling larger patterns.

Try the Tool

You can try the finished converter here:

👉 Try the Free Perler Bead Pattern Generator

It runs directly in the browser and supports adjustable grid sizes, palette controls, bead quantity statistics, and printable exports.

I’m continuing to improve the conversion quality and editing experience. If you are interested in image processing, pixel art, color matching, or creative coding, I’d love to hear your feedback.

Thanks for reading!

DEV Community