<p>Two suggestions:</p>

<ol>
<li><p>If your data is from an image you are displaying on a standard monitor, the chances are it is (or you are implicitly assuming that it's) in sRGB format. This <a href="https://en.wikipedia.org/wiki/SRGB#The_sRGB_transfer_function_(%22gamma%22)" rel="nofollow noreferrer">means that the colour components are not linear</a>. Ideally, you should first map into a linear colour space, do your filtering (e.g. blurring) operations, and then map back.<br>
*(If you just want to try a cheap and cheerful approach, squaring each of the R G B components is not a terrible approach to "linearise" the values</p>

<ul>
<li>obviously, use sqrt() to map back)*.<br>
The alpha channel can be assumed to be linear.</li>
</ul></li>
<li><p>Once in linear colour space, the next thing you want to do before filtering is to convert the pixels to a pre-multiplied-alpha format (AKA "<em>associated colour</em>").<br>
Basically, given 8bpc {A,R,G,B} pixel input, produce  {A, A*R/255, A*G/255, A*B/255}.  You then do your averaging on this premultiplied data as above on all four channels, and then map back by dividing through by the resulting alpha (if A=0 then, choose, RGB=0).</p></li>
</ol>

<p>This <em>should</em> produce a better result. 
For more info I suggest reading through Jim Blinn's <a href="https://graphics.stanford.edu/courses/cs248-02/blinn_theory.pdf" rel="nofollow noreferrer">"Compositing, Part1: Theory"</a>.<br>
Particularly, note the line "<em>Additionally, we must use associated colors for any filtering or interpolation operations</em>"</p>

<p><em>Update</em>: Seems I've posted a <a href="https://computergraphics.stackexchange.com/a/5517/209">similar answer before</a> </p>

CC BY-SA 4.0
2019-02-15T08:58:00.753Z
2019-04-08T06:51:20.210Z
2019-04-08T06:51:20.210Z
Simon F
<p>I'm writing a simple box blur for a graphics library.
The formula makes the average of a range of pixels by adding the ARGB amounts and then dividing by the blur range</p>

<p>For example, with a blur range of 3;</p>

<pre><code>pixel1 FF FF 00 00 +
pixel2 FF 00 FF 00 +
pixel3 FF 00 00 FF
/ 3 =
result FF 55 55 55
</code></pre>

<p>Which is correct.
A typical result shows as;</p>

<p><a href="https://i.sstatic.net/Z3A8X.png" rel="noreferrer"><img src="https://i.sstatic.net/Z3A8X.png" alt="enter image description here"></a></p>

<p>However, I am having difficulty with coming up with a formula to blur an image with alpha transparency.
The formula above gives this result for a yellow box on a transparent background;</p>

<p><a href="https://i.sstatic.net/OAlFT.png" rel="noreferrer"><img src="https://i.sstatic.net/OAlFT.png" alt="enter image description here"></a></p>

<p>You can see that the yellow is surrounded by black colour - because the red and green are being diminished to 0. The result should actually look like so;</p>

<p><a href="https://i.sstatic.net/CTVCu.png" rel="noreferrer"><img src="https://i.sstatic.net/CTVCu.png" alt="enter image description here"></a></p>

<p>So; the formula of <code>(pixel + pixel + pixel) / range</code> is not working for alpha-blended images.</p>

<p>Can anyone please give a correct formula?</p>

<p>Thanks!</p>

CC BY-SA 4.0
2019-02-25T07:00:00.583Z
Possible duplicate of [Gaussian blur with transparency](https://computergraphics.stackexchange.com/questions/5509/gaussian-blur-with-transparency)
Ext3h
<transparency><blur>
Blur with alpha transparency
ca1e
# Blur with alpha transparency

(Asked by: username_0 on 2019-02-15)

I'm writing a simple box blur for a graphics library.
The formula makes the average of a range of pixels by adding the ARGB amounts and then dividing by the blur range

For example, with a blur range of 3;

```
pixel1 FF FF 00 00 +
pixel2 FF 00 FF 00 +
pixel3 FF 00 00 FF
/ 3 =
result FF 55 55 55

```

Which is correct.
A typical result shows as;

[![enter image description here](https://i.sstatic.net/Z3A8X.png)](https://i.sstatic.net/Z3A8X.png)

However, I am having difficulty with coming up with a formula to blur an image with alpha transparency.
The formula above gives this result for a yellow box on a transparent background;

[![enter image description here](https://i.sstatic.net/OAlFT.png)](https://i.sstatic.net/OAlFT.png)

You can see that the yellow is surrounded by black colour - because the red and green are being diminished to 0. The result should actually look like so;

[![enter image description here](https://i.sstatic.net/CTVCu.png)](https://i.sstatic.net/CTVCu.png)

So; the formula of `(pixel + pixel + pixel) / range` is not working for alpha-blended images.

Can anyone please give a correct formula?

Thanks!

**Tags:** transparency, blur

> **Comments:**
> **username_1**: Possible duplicate of [Gaussian blur with transparency](https://computergraphics.stackexchange.com/questions/5509/gaussian-blur-with-transparency)  

---

## 1 answers

### Answer by username_2 on 2019-02-15. Score: 7

Two suggestions:

1. If your data is from an image you are displaying on a standard monitor, the chances are it is (or you are implicitly assuming that it's) in sRGB format. This [means that the colour components are not linear](https://en.wikipedia.org/wiki/SRGB#The_sRGB_transfer_function_(%22gamma%22)). Ideally, you should first map into a linear colour space, do your filtering (e.g. blurring) operations, and then map back.  
   \*(If you just want to try a cheap and cheerful approach, squaring each of the R G B components is not a terrible approach to "linearise" the values

   * obviously, use sqrt() to map back)\*.  
     The alpha channel can be assumed to be linear.
2. Once in linear colour space, the next thing you want to do before filtering is to convert the pixels to a pre-multiplied-alpha format (AKA "*associated colour*").  
   Basically, given 8bpc {A,R,G,B} pixel input, produce {A, A\*R/255, A\*G/255, A\*B/255}. You then do your averaging on this premultiplied data as above on all four channels, and then map back by dividing through by the resulting alpha (if A=0 then, choose, RGB=0).

This *should* produce a better result.
For more info I suggest reading through Jim Blinn's ["Compositing, Part1: Theory"](https://graphics.stanford.edu/courses/cs248-02/blinn_theory.pdf).  
Particularly, note the line "*Additionally, we must use associated colors for any filtering or interpolation operations*"

*Update*: Seems I've posted a [similar answer before](https://computergraphics.stackexchange.com/a/5517/209)


---

