What happens if I set the border width to 0?

The image becomes a plain solid-color rectangle with no border, since a zero-width border draws nothing.

Can the border be a different color from the background?

Yes, background and border colors are set independently as two separate hex values.

Why did I get a 'border too thick' error?

The border width times two must be smaller than the shorter of the width and height, otherwise the borders from opposite edges would overlap or cover the entire canvas.

Do I need to include the # in the hex color?

No, both '#3366CC' and '3366CC' are accepted; the # is optional.

Custom PNG Creator - Solid Color PNG with Optional Border

Overview

Introduction

This tool creates a custom solid-color PNG image at any dimensions you choose, with an optional colored border, all rendered locally in your browser.

It's a fast way to produce a plain background, placeholder, or bordered swatch without opening an image editor.

What Is Custom PNG Creator?

A pure pixel generator that fills an entire canvas with one background color, then optionally overwrites a ring of pixels around the outer edge with a second border color.

Both colors are specified as standard 6-digit hex values, and the resulting image is always fully opaque.

How Custom PNG Creator Works

The generator first fills every pixel in the requested width and height with the background color at full opacity.

If a border width greater than zero is given, it then overwrites every pixel within that many pixels of any of the four edges with the border color, leaving the interior untouched.

When To Use Custom PNG Creator

Use it to quickly create a solid-color background image, a placeholder box, or a bordered color swatch for design mockups.

It's also handy for generating simple framed thumbnails or colored tiles for UI prototyping.

Often used alongside Colorful PNG Generator and PNG Gradient Palette Generator.

Features

Advantages

Produces an exact solid color (and optional border) with no compression artifacts or gradients.
Supports any canvas size up to 4096x4096 pixels.
Runs entirely client-side, so nothing is uploaded anywhere.

Limitations

Only supports a single flat background color and a single flat border color; it doesn't support gradients or patterned borders.
The border must fit within the canvas — very thick borders on small canvases are rejected.

Examples

Plain background swatch

Input

width=300, height=200, background=#3366CC, border=#000000, borderWidth=0

Output

A 300x200 solid blue PNG with no border

A border width of 0 skips the border-drawing step entirely.

Framed color tile

Input

width=100, height=100, background=#FFFFFF, border=#FF0000, borderWidth=5

Output

A 100x100 white PNG with a 5px solid red border

The outer 5 pixels on every edge are overwritten with the border color after the background fill.

Best Practices & Notes

Best Practices

Keep the border width well under half the shorter canvas dimension so the interior background stays clearly visible.
Use contrasting background and border colors when the goal is a visible framed tile.

Developer Notes

Both the fill and border-drawing steps operate on a plain Uint8ClampedArray pixel buffer with no DOM dependency, making the color and border-thickness math independently unit-testable; only the component wraps the result for canvas preview and PNG download.

Custom PNG Creator Use Cases

Creating a solid-color placeholder background for a design mockup
Generating a simple framed color tile or thumbnail
Producing a quick colored swatch with a visible border for comparison

Common Mistakes

Requesting a border width so large it exceeds half the canvas's shorter side, which is rejected rather than silently clamped.
Forgetting that a border width of 0 produces a plain rectangle with no visible border at all.

Tips

Use a very high-contrast border color to make small canvases easier to spot against a page background.
Combine with the PNG Dimensions Finder afterward to confirm the exported file's exact size.

Custom PNG Creator