Drop an image here
or click to choose · or paste (Ctrl/Cmd + V)
processed in your browser · never uploaded
Recolor a whole photo or illustration based on its brightness: dark areas, midtones, and bright areas are each assigned a different color, instantly restyling the image. It works like the "Gradient Map" adjustment in Photoshop, Clip Studio, ibisPaint, or Procreate — pick a shadow color and a highlight color (and an optional midtone) to get duotone (2-color) or 3-color cinematic color grading, plus retro, cyberpunk, or sepia looks. Internally, each pixel's luminance (L = 0.299×R + 0.587×G + 0.114×B) is normalized to 0–1 and mapped to a color along the gradient you choose. Turn off "use midtone (3-stop)" for a 2-color shadow→highlight gradient, or turn it on for a shadow→midtone→highlight gradient. Lower the "intensity" to blend the result with the original for a softer color overlay, or keep it at 100% for a full gradient map. Turn on "invert" to swap which tones get the dark and light colors. The preview updates instantly as you change colors without reloading, and the result is saved as a PNG with its transparency (alpha) preserved. Use it for finishing comics and illustrations, unifying the tone of thumbnails and posters, or making duotone UI and background assets. Nothing to install and nothing to upload — loading, converting, and saving all happen locally in your browser, so your image is never sent anywhere.
How to use
- Drop the image (PNG/JPG) you want to recolor (or click to choose, or paste with Ctrl/Cmd+V).
- Pick a "shadows" color and a "highlights" color, and optionally turn on "use midtone (3-stop)" to add a midtone color. Use "intensity" to blend with the original and "invert" to flip the tone mapping.
- Tune the colors while watching the preview, then click "Download PNG" to export with transparency preserved.
FAQ
Are my images uploaded to a server?
No. Loading, applying the gradient map, and saving all happen in your browser. The image is never uploaded, stored, or sent anywhere — everything is processed only on your device.
Is this the same as the Gradient Map in Photoshop or Clip Studio?
The idea is the same: it maps the image's brightness (luminance) to colors for shadows, midtones, and highlights. This tool supports simple 2- or 3-color gradients and runs entirely in the browser with no software to install. For complex multi-stop gradients, a dedicated app may be a better fit.
What does "intensity" change?
How strongly the gradient map is applied over the original image. At 100% the colors are fully replaced; lowering it keeps more of the original for a natural color overlay.
Is transparency (PNG alpha) preserved?
Yes. Only the color (RGB) is remapped; the alpha channel is kept as-is and exported in the PNG, so assets with transparent backgrounds stay transparent.
When should I use 2 colors (duotone) vs 3 colors?
Two colors give a clean shadow→highlight duotone with a strong, unified look. Three colors add a midtone, which is useful for sunset or cinematic grades where you want color in the mid-range. Toggle "use midtone (3-stop)" to switch.