How is this different from the PNG Grayscale Creator?

The Grayscale Creator maps every pixel to a neutral gray (equal red, green, and blue). This tool instead maps each pixel's brightness onto a gradient between two colors you choose — a shadow tone for dark areas and a highlight tone for bright areas — producing a tinted duotone look rather than neutral gray.

What are 'shadow' and 'highlight' colors?

The shadow color replaces the darkest pixels (originally near-black) and the highlight color replaces the brightest pixels (originally near-white); every pixel in between is a proportional blend of the two based on its original luminance.

Does this affect transparency?

No, the alpha channel is copied through unchanged; only the RGB color of each pixel is remapped.

What's a classic duotone color pairing?

Deep blue shadows with warm cream or orange highlights is a popular poster-style duotone look, but any two colors work — try your brand's primary and a near-white/near-black variant of it for a tinted brand image.

Monochrome PNG Creator - Duotone a PNG Between Two Colors

Overview

Introduction

This tool converts an uploaded PNG into a true two-color monochrome, also known as a duotone: dark areas take on a shadow color you choose, bright areas take on a highlight color, and everything in between blends smoothly.

It's a distinctly different look from a standard grayscale conversion, since the result keeps a deliberate color tint throughout.

What Is Monochrome PNG Creator?

A client-side pixel transform that first computes each pixel's perceptual luminance (using the same weighted red/green/blue formula as the standard grayscale conversion), then uses that brightness value as a blend factor between two colors.

The result keeps every pixel's original position and alpha, only remapping its RGB color onto the shadow-to-highlight gradient.

How Monochrome PNG Creator Works

Each pixel's luminance is computed as 0.299R + 0.587G + 0.114B, then normalized to a 0-1 range.

That normalized value linearly interpolates each of the shadow and highlight colors' red, green, and blue channels, so a pixel with 0 luminance becomes exactly the shadow color and a pixel with full luminance becomes exactly the highlight color.

When To Use Monochrome PNG Creator

Use it to create a stylized, poster-like duotone effect from a photo, matching a brand's color palette.

It's also useful for producing a tinted placeholder or loading-state version of an image, or a consistent monochrome treatment across a set of photos.

Often used alongside Grayscale PNG Creator, PNG Color Tone Changer and PNG Hue Changer.

Features

Advantages

Produces a distinctly tinted, designed look rather than neutral gray.
Any two colors can be used, so the effect can match any brand or aesthetic.
Runs entirely client-side; the uploaded image never leaves your device.

Limitations

Only two colors are used; there's no support for a 3+ color 'tritone' gradient in this tool.
Because it's based purely on luminance, two originally different-hued pixels with the same brightness will end up as the exact same output color.

Examples

Classic blue-and-cream duotone

Input

A landscape photo, shadow #1a2b4c, highlight #f5e6c8

Output

The photo re-tinted so its darkest areas are deep blue and brightest areas are warm cream

Every pixel's original brightness determines where it falls between the two chosen colors.

Brand-color monochrome icon

Input

A black-and-white icon, shadow #000000, highlight #ff5500

Output

The icon's white areas become orange while black areas stay black

Since the icon only has near-black and near-white pixels, the result is essentially a solid-color recolor rather than a full gradient.

Best Practices & Notes

Best Practices

Pick a shadow/highlight pair with clearly different brightness for the most visible duotone contrast.
Try inverting shadow/highlight (swap the two hex values) for a quick negative-style variant.

Developer Notes

The luminance formula intentionally matches createGrayscalePng's 'luminance' method so the two tools produce a consistent brightness mapping; only the final color assignment differs (a two-color lerp instead of a single gray value).

Monochrome PNG Creator Use Cases

Creating a branded duotone treatment for marketing images
Producing a stylized loading/placeholder version of a photo
Tinting a black-and-white icon set to match a color scheme

Common Mistakes

Choosing two colors with similar brightness, which produces a flat, low-contrast result even though the hues differ.
Expecting hue information to be preserved — the effect is purely brightness-driven, so colorful source images lose their original hues entirely.

Tips

For a striking poster effect, pick a dark, saturated shadow color and a light, desaturated highlight color.
Preview a few different color pairs quickly since the conversion is instant.

Monochrome PNG Creator