How Image Tinting Works: Blend Modes, Explained with Code

#javascript #ai

Tinting is about the simplest photo effect there is: take one solid color, layer it over an image, and let a blend mode decide how the two combine. It's the trick behind "warm sunset" grades, cool blue-hour looks, and sepia filters — and it's easy enough to implement that you can reproduce it in your own app with a few lines of code.

I spend a lot of time on image-editing tooling (I build PXDMD's image tools), so I'll share the mental model that makes this click, then the code.

What a "tint" actually is

A filter is a fixed, opaque preset. A tint is a recipe: three things you control independently —

A color (hex, e.g. #5B8DF0)
A blend mode (how that color combines with the pixels beneath it)
A strength (a percentage that mixes the result back toward the original)

Because it's a recipe, the same tint is perfectly reproducible on any image, any time. That deterministic quality is the whole reason people use tints for brand consistency — one recipe applied to 50 shots gives 50 results that match.

The blend modes, in plain language

Blend mode is the biggest lever. Eight show up most often:

Mode	Behavior	Typical use
Multiply	Darkens; color soaks into shadows	Vintage depth, cyanotype
Screen	Lightens; color glows from highlights	Airy, dreamy, pastel
Overlay	Multiply on shadows + screen on highlights	Balanced, keeps detail
Soft light	Gentle overlay, very subtle	Natural film-like grades
Hard light	Stronger, punchier overlay	Bold editorial looks
Color	Replaces hue/saturation, keeps luminance	Recolor while keeping exposure
Luminosity	Replaces luminance, keeps hue/saturation	Contrast/texture without recoloring
Difference	Inverts where colors differ	Experimental / glitch

The rule of thumb: screen brightens and lightens, multiply darkens and deepens, and everything else sits between them.

A minimal Canvas implementation

The browser ships these modes as globalCompositeOperation, so the core is tiny. Here's a color tint over a loaded image:

function tintImage(img, { color = "#5B8DF0", mode = "screen", strength = 0.45 }) {
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext("2d");

  // Draw the base photo.
  ctx.drawImage(img, 0, 0);

  // Layer the color with the chosen blend mode (screen, multiply, overlay, ...).
  ctx.globalCompositeOperation = mode;
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Mix the result back toward the original by (1 - strength).
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1 - strength;

  return canvas;
}

// Usage
const tinted = tintImage(photo, { mode: "screen", strength: 0.45 });

When strength is low, globalAlpha approaches 1, so the tinted layer barely shows and the original dominates. Crank strength toward 1 and the color takes over. The whole thing runs on a canvas in the browser — nothing leaves the device, which is why this kind of tool can stay free and instant.

What to watch out for

Strength too high. At 100% a single flat color can posterize the sky and flatten the image. The sweet spot is usually around 35–70%.
Saturation of the source. A strong tint over an already-saturated photo fights the source color. Desaturating the base first (dropping saturation toward 0) is how you get clean duotones and cyanotypes.
Transparency. If the image has an alpha channel (logos, cutouts, product renders), keep it — with a canvas you should composite without ever flattening the transparent pixels.

A quick reference recipe

Want a starting point for a given mood? These work well broadly:

Look	Mode	Color	Strength
Golden-hour warm	soft light	`#FF9A56`	55%
Cool steel	screen	`#5B8DF0`	45%
Deep vintage	multiply	`#9B6B3F`	65%
Cyanotype	multiply (over desaturated base)	`#17437A`	80%

Try it

If you'd rather not write the canvas math yourself, PXDMD's free Image Tinter does the same thing in the browser — color, blend mode, strength, saturation, contrast, and invert, all encoded in a shareable URL. That's the link to the tool I build; the code above is everything that happens under the hood.

Tinting is a good first effect to understand if you're learning image processing in the browser: it's a small surface area, the visuals are immediately rewarding, and it teaches you the compositing model that powers far more complex tools.

DEV Community