How Image Tinting Works: Blend Modes, Explained with Code

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. Top comments (0)