Image Duotone Effect

Default contrast at 0 is a linear ramp between the two colors. Raising contrast steepens the transition — useful when your image has a lot of mid-grays that turn into muddy mixed colors. Lowering it gives softer, more painterly gradients. The midpoint slider shifts where the split happens for unevenly-exposed photos.

It uses feColorMatrix to convert the image to grayscale (using BT.709 luminance coefficients), then feComponentTransfer with a table function to remap each channel to a 2-point gradient between your shadow and highlight RGB values. The result: same effect as the canvas version, but without rasterizing — and animatable via CSS transitions on the SVG filter.

Ones with clear tonal separation — a bright subject against a dark ground, strong shadows, a recognisable silhouette. The effect throws away hue entirely and maps only lightness, so a photo whose subject is distinguished from its background by colour rather than by brightness collapses into an unreadable shape. Convert a candidate to greyscale first: if it reads there, it will read as a duotone.

Usually much smaller as a PNG, because the result contains a narrow ramp between two colours rather than the full palette of a photograph, and that compresses extremely well. As a JPEG the saving is smaller and the artefacts more visible, since the format is tuned for photographic detail rather than for smooth two-colour gradients. Export duotones as PNG unless the image is large enough that size dominates.