Duotone Palette Maker
100% PrivateColor & Design ToolsMap an image's tones onto a two-color duotone ramp and preview the result.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
The canvas mapping above is exact. This CSS recipe approximates the same look for images already on a web page:
.duotone {
position: relative;
filter: grayscale(1) contrast(1.05);
}
.duotone::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, #14213D, #FCA311);
mix-blend-mode: screen;
opacity: 0.85;
}- 1Choose the shadow color (dark areas) and highlight color (bright areas).
- 2Check the mapping ramp and the grayscale check strip.
- 3Upload an image to see the exact duotone, and move the midpoint to shift the balance.
- 4Download the result as a PNG, or copy the CSS recipe.
With shadow #14213D and highlight #FCA311 at midpoint 0.5, a pure black pixel maps to exactly #14213D, a pure white pixel to exactly #FCA311, and a mid-gray pixel (128) lands on #886227, the halfway mix of the two colors.
- Tones are judged by Rec. 601 luma, so colors with equal luma but different hues map to the same duotone value; that collapse is the duotone effect itself.
- The canvas result is the exact per-pixel mapping. The CSS recipe (grayscale filter plus a blend layer) is an approximation and can differ slightly between browsers.
- Uploaded images are processed locally at up to 900px on the longest side; the download is at that processed size.
It sets which input tone lands exactly halfway between your two colors. Lower it to push more of the image toward the highlight color, raise it to keep more of the image in shadow tones.
About this tool
The Duotone Palette Maker maps an image's tones onto a ramp between two colors: the darkest pixels become the shadow color, the brightest become the highlight color, and everything between is a proportional mix. It previews the mapping ramp, applies it to an uploaded image on canvas with an adjustable midpoint, and offers a CSS approximation for images already on a web page.
Related tools
Part of Ovatly's free tools in Color & Design Tools.