Duotone Generator
Build a duotone gradient map from two colors, with CSS and image preview
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Pick a dark color and a light color and it builds a duotone gradient map bridging the two, plus a 5-step color scale. Copy the CSS gradient code and an overlay-style duotone CSS, and upload a photo to preview it converted to a real duotone right in your browser.
How to use
- Click a preset or pick a dark color and light color yourself to set the two tones.
- Adjust the gradient angle to set the direction the colors flow.
- Grab the code with 'Copy gradient' or 'Copy duotone CSS'.
- Upload a photo to see it converted to the two colors, then save it as a PNG.
FAQ
- What exactly is a duotone?
- It's a color-grading technique that keeps only a photo's brightness information and maps the dark areas to a first color and the light areas to a second, expressing the image in two tones. It's often used for a cohesive mood on magazines, album covers, and web banners.
- What's the difference between the CSS method and the image conversion?
- The CSS overlay (grayscale + mix-blend-mode) leaves the original image intact and only makes it look like a duotone on screen. The image conversion actually maps the pixel values, producing a finished file you can even save.
- Is my uploaded photo sent to a server?
- No. Reading the image, converting the colors, and saving all happen inside your browser (on a canvas), and no file is ever uploaded to a server. The higher the contrast between your two tones, the crisper the result, so keep that in mind.