Apply a duotone effect to an image

Map image luminance between a chosen dark and light colour.

freeworks offlinenothing uploaded
ToolDuotone Filter
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Each pixel’s luminance is estimated from weighted RGB channels and linearly interpolated between dark and light RGB values. Alpha remains unchanged and the transformed image is encoded as PNG.

  • Navy and orange form the initial palette.
  • The interpolation is a two-colour map, not a colour-management profile.

Worked example

Map luminance to navy and orange
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Dark color: #000033
Light color: #ff6600
Output
												PNG data URL interpolated between navy and orange

When to use this

Posters map photographs to brand colours, thumbnails use consistent two-tone treatment, and colour demos visualize luminance mapping.

Edge cases

  • Different hues with equal weighted luminance map to the same output.
  • Transparent pixels retain alpha while RGB is remapped.
  • Low-contrast endpoints make the result visually flat.

References