Image color overlay.

A flat overlay paints a translucent color over the image and washes the detail out. This tool replaces each pixel's hue and saturation and keeps its lightness, so shadows stay dark and highlights stay bright. The image reads as the brand color with its depth intact.

Yes. The picker has a hex field, so a brand color such as #1da1f2 can be typed in exactly and the whole image takes that hue and saturation. Note the code and apply it to every image in a set for a consistent look.

Pure white and pure black have no room for color, since their lightness is 100 or 0, so they stay white and black. Mid-tones take the tone fully. A very light or very dark image will therefore look only faintly tinted; it is the image, not the tool.

Apply the same hex code at the same strength to each image. The tone changer is deterministic, so every photo takes the same hue and saturation, and a set of stock photos comes out as one consistent series for a site, a deck or a social feed.

Fully transparent pixels are skipped and stay transparent. Partly transparent pixels get the new tone and keep their alpha value, so a logo or icon with a transparent background comes out toned on the same transparent background.

The picker opens with eight swatches: Sepia (#cca47d), Slate (#6b7280), Ocean (#2563eb), Teal (#0d9488), Forest (#15803d), Sunset (#ea580c), Rose (#e11d48) and Violet (#7c3aed). Any of them is a starting point; drag in the picker or type a hex code for your own tone.

Strength blends the toned pixels with the original ones. At 100 the image is fully toned; at 50 half the original color shows through, which reads as a tint rather than a monochrome; at 0 nothing changes. Lower it for a subtle cast, raise it for a full single-color image.

Each pixel is converted to hue, saturation and lightness. The tool keeps the pixel's lightness and replaces its hue and saturation with the tone color's, so dark areas stay dark, bright areas stay bright and everything shifts to one color. That is why the result keeps its depth instead of looking like a flat wash of color.

No. Your browser decodes the file and does the pixel work with its Canvas API, and the page makes no request with it. You can load the page, go offline and keep working; the download is written from memory on your device.

No. The Image color overlay is free and opens without a sign-in, an account or an install.

Nothing. The Image color overlay holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

Up to 100 MB per file, the limit the tool states under its drop area. A larger file is refused with a plain message instead of being decoded.

No, it takes one file at a time. If you drop or choose several, only the first is used; run the tool again for the next one.

The edit is written as a PNG because PNG stores every pixel exactly, with a full alpha channel, so the result can be edited again without a second round of loss.

No. The browser decodes the image and the tool writes a new file from its pixels, so camera EXIF, GPS position and text chunks in the original are not copied into the result. Keep the original file if you need them.

No. The result has the same width and height in pixels as the source.

Closest to the Image color overlay: PNG color tone changer, Hero image color effects, Website image color styling, Monochrome image maker. Each opens on its own page, free and in the browser.

The Image color overlay is one of 47 in its group. The group's page, /tools/png, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.