Duotone Gradient Map

Map image brightness between two colors, choose from 24 duotone palettes, and download a full-size PNG.

Image Duotone Filter · Client runtimeSandboxed
Formatted results will render here in real time.

About this duotone gradient map

Map image brightness between two colors, choose from 24 duotone palettes, and download a full-size PNG Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.

Image processing & canvas pipeline

Applies 2D image convolution filters, pixelation, and EXIF metadata sanitization directly to raw RGBA ImageData buffers. Privacy tools apply Gaussian blur kernels or block pixelation to obscure sensitive areas (faces, license plates, credentials). EXIF metadata scrubbing parses TIFF/JPEG binary application segments (APP1, markers 0xFFE1), stripping GPS latitude/longitude, camera serial numbers, device models, and timestamps while preserving image pixel data intact. Generates ISO/IEC 18004 QR codes.

Worked image transformation example

Scenario: Map a decodable 12×9 test PNG between the default two colors.

Sample input:

Image: 12×9 PNG | Shadow: #172554 | Highlight: #fbbf24

Processing: Canvas maps each pixel with Rec.601 luma and linear RGB interpolation.

Illustrative output:

Expected RGB buckets: red→91,83,70; green→157,127,56; blue→49,55,79; yellow→225,173,41. The 12×9 PNG encoding depends on the browser.

Resolution, dimension & memory limits

Operational constraints and validation boundaries: Each image must be smaller than 30 MB (30,000,000 bytes). Browser decoding and full-resolution Canvas memory depend on the device. This is a two-color sRGB brightness ramp, not linear-light luminance, ICC grading or print proof. No animation or metadata preservation. Palette names imply no artist or album affiliation.

Duotone Gradient Map image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.

In-memory image processing boundary

File buffers and document assets in Duotone Gradient Map are processed in-memory via local browser APIs with zero file uploads to CZOA servers.

Image format & W3C Canvas standards

W3C Canvas 2D context specifications and standard image container formats:

Duotone Gradient Map verification · Audit standards

How to use it

  1. Enter, paste, or select your input data into the Duotone Gradient Map workspace controls.

Frequently asked questions

How do the 24 palettes and custom colors work?+

Operational requirements for "How do the 24 palettes and custom colors work?" are verified in local memory during execution of Duotone Gradient Map.

What controls does Duotone Gradient Map provide?+

Choose a local image smaller than 30 MB. Select one of 24 palettes or choose shadow and highlight colors yourself, then process and download PNG. Palette numbers are fixed and the two hex colors identify each ramp. The original decoded dimensions and alpha are retained. Brightness uses 0.299R + 0.587G + 0.114B on decoded sRGB channel values; each output channel interpolates between the selected colors. Example: black maps to the shadow color, white maps to the highlight color. With the default #172554 / #fbbf24 ramp, red maps to RGB 91,83,70. Process again after changing colors.

What limits apply to duotone mapping?+

Each image must be smaller than 30 MB (30,000,000 bytes).

What result and limits should I expect when using Duotone Gradient Map?+

For the four-color 12×9 fixture with default shadow and highlight, expected RGB is red→91,83,70; green→157,127,56; blue→49,55,79; yellow→225,173,41. Browser PNG encoding remains browser-dependent.