blend conformance
A blend mode is a formula, so a browser either computes it or it does not. The blender checks yours every time it loads, and draws a mode with the browser only where the browser gets it right.
Why check at all
Browsers draw blend modes with their own compositing code (the canvas’s globalCompositeOperation). It is fast, and on most engines it is exact. But the W3C Compositing and Blending specification is the only definition of what “soft light” or “colour” means, and where an engine rounds differently or takes a shortcut, the same photos and the same slider give a different picture on the machine next to yours. On a tool whose whole output is the blend, that would be the product being wrong.
The two fixtures
- The ramp, for the twelve separable modes. A 256 × 256 frame holds every backdrop value from 0 to 255 across and every layer value down. For a mode that works one channel at a time, that frame is the complete truth table: every pair of values that can ever meet. The browser blends it, and every pixel is compared with the arithmetic in this site’s reference.
- The colour cube, for the four component modes. Hue, saturation, colour and luminosity read all three channels at once, so no single-channel table describes them. Instead, 4,096 backdrop colours (16 levels a channel) are blended against four different orderings of the same cube — 16,384 colour pairs a mode — and all three channels are compared.
What happens with the answer
The tolerance is one unit in 255. A mode whose largest difference anywhere is within it is drawn by the browser. A mode that misses by more is computed by the blender’s own pixel loop instead, from the same reference arithmetic — slower, and identical on every engine — and the line under the mode rail says which modes that applied to and by how much. If the check cannot run at all (an unreadable canvas, or a privacy setting that adds noise to what a page reads back), the blender says so and claims nothing.
Linear light is a different case: it needs a conversion before and after the formula that the browser’s compositing cannot do, so with linear light chosen every mode is computed in the pixel loop.
Measured results
Peak difference per mode, in units of 1/255, as shown in the table under the rail on the blend-modes page. These are recorded by hand on the named machine and date; nothing is gathered from visitors’ browsers. Engines not listed have not been measured yet — open the blend-modes page in yours and the same table shows your own numbers.
| Mode | Chromium 153 (headless)Linux x86_64, build check machine · 31 Oct 2026 |
|---|---|
| Multiply | 1/255 |
| Darken | 0/255 |
| Colour burn | 1/255 |
| Screen | 0/255 |
| Lighten | 0/255 |
| Colour dodge | 1/255 |
| Overlay | 1/255 |
| Hard light | 1/255 |
| Soft light | 1/255 |
| Difference | 0/255 |
| Exclusion | 2/255 — pixel loop |
| Hue | 1/255 |
| Saturation | 1/255 |
| Colour | 1/255 |
| Luminosity | 1/255 |
On that machine every mode but exclusion is drawn by the browser; exclusion differs by up to 2/255 and is computed by the pixel loop. Normal is plain compositing rather than blending and is not checked.
The check compares fully opaque colours. Partly transparent pixels go through the same compositing equation on both paths, but are not separately measured. Firefox and Safari rows will be added when they have been measured on named devices.