How to use the blend mode calculator
- Set the Backdrop (bottom layer) colour.
- Set the Source (top layer) colour.
- Choose a Blend mode, or keep All modes to see all 16 at once.
- Adjust Top layer opacity if the top layer is partly transparent.
- Read the result HEX, compare the swatches, and check the Browser rendering (mix-blend-mode) preview.
What it does and when to use it
Blend modes from image editors are also part of CSS, through mix-blend-mode and background-blend-mode. They are used for duotone images, coloured overlays on photos, text that inverts over any background, and textured backgrounds. The trouble is that the resulting colour is hard to guess. This calculator gives you the exact colour, so you can hand it to a developer, use it as a solid fallback, or check its contrast.
Seeing all 16 modes side by side is also a quick way to choose one. For simple transparency without a mode, the alpha blend calculator is the right tool. To blend two colours by a percentage, use the colour mixer. If the result will carry text, test it in the contrast checker.
How it works
All formulas follow the W3C Compositing and Blending Level 1 specification. With backdrop B and source S per channel on a 0–1 scale:
- multiply = B × S; screen = B + S − B × S
- darken = min(B, S); lighten = max(B, S)
- difference = |B − S|; exclusion = B + S − 2 × B × S
- overlay is hard-light with the layers swapped; soft-light, color-dodge and color-burn use the spec’s piecewise formulas
- hue, saturation, color and luminosity work on whole colours, using luminosity = 0.3 R + 0.59 G + 0.11 B
The blended colour is then mixed with the backdrop by the top layer’s opacity. The backdrop is treated as opaque.
Worked examples
These come from the calculator.
Multiply grey on white. Backdrop white, source #808080: multiply: #808080. White is neutral for multiply.
Screen red with blue. screen: #ff00ff. Each channel takes the lighter value, so red and blue add up to magenta.
All modes, blue #3b82f6 under amber #f59e0b. Multiply #39510b, screen #f7cff6, overlay #71a0ee, soft-light #768eee, difference #ba1ceb and color-dodge #ffffff. Lowering opacity to 50% with multiply gives #3a6980.
Limits and tips
- Results are for flat colours. Over photos, every pixel blends differently.
- Blending happens on gamma-encoded sRGB values, as browsers do by default.
- All calculations run in your browser.
Frequently asked questions
What is the difference between multiply and screen?
Which layer is the backdrop and which is the source?
How does opacity work with a blend mode?
Will the browser show the same colour?
What do hue, saturation, color and luminosity do?
Sources
- Compositing and Blending Level 1 — blend modes — W3C, accessed 2026-10-08
How do we know nothing is uploaded? Test it yourself on the privacy proof page.