<p>It's generally a good idea to add noise like this when you're using a gradient, to avoid visible banding in the gradient, especially on smartphones. Often smartphone screens claim to be 24-bit colour but the panel itself is actually only 16 or 20 bit.</p>

<p>The chief difference between the example and your attempt to reproduce it is that your noise is in RGB space, while the example only adds luminance noise (i.e. brightness). You could achieve this by using HSV colours and only adding to the V channel, or with RGB colours and adding the same amount to each channel.</p>

CC BY-SA 4.0
2019-02-04T16:52:12.293Z
Thanks, looks like adding the same value to each channel worked: https://i.imgur.com/1OydskY.png
Anvaka
CC BY-SA 4.0
2019-02-06T03:11:18.297Z
Out of curiosity, how did you determine that it was luminance noise?
Julien Guertault
CC BY-SA 4.0
2019-02-06T08:31:25.557Z
@JulienGuertault Just look at it.
Dan Hulme
CC BY-SA 4.0
2019-02-04T13:09:09.137Z
2019-02-04T13:09:09.137Z
Dan Hulme
<p>I found this picture </p>

<p><img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/9a556e13045459.5603449940365.jpg" alt="picture"></p>

<p>When you zoom in to any part of the image, the background looks a bit noisy/grainy. See pixels around "violent violet" label:</p>

<p><img src="https://i.sstatic.net/1j518.png" alt="grains"></p>

<p>I'm trying to understand how to achieve the same effect programmatically?</p>

<p>I was trying to change pixel color in rgb space by adding tiny gaussian offset, but it still doesn't look nearly as natural as in the image above:</p>

<p><img src="https://i.sstatic.net/Qpy4P.png" alt="failed attempts"></p>

<p>I feel like I'm missing something very simple, but I don't even know where to start? How is this done in general?</p>

<p>Maybe you can play with this jsbin to show me how this is done: <a href="https://jsbin.com/fatecojolo/edit?js,output" rel="nofollow noreferrer">https://jsbin.com/fatecojolo/edit?js,output</a> ?</p>

CC BY-SA 4.0
2019-02-04T04:44:08.670Z
Perhaps working in HSV space would give results more like in the image?
user1118321
CC BY-SA 4.0
2019-02-04T05:28:56.610Z
I tried with HSL without much luck, but I might have missed something. The linked jsbin has the functions to transform to/from hsl space. What should I try?
Anvaka
CC BY-SA 4.0
2019-02-04T08:52:10.100Z
What does this have to do with a gradient?
bernie
CC BY-SA 4.0
2019-02-04T11:56:26.677Z
It is just some white or blue noise remapped to some narrow range added to color probably. Same value added to all rgb components gives first picture result.
mdkdy
<rendering><image-processing><post-processing>
Adding noise to gradient
Anvaka
# Adding noise to gradient

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

I found this picture

![picture](https://mir-s3-cdn-cf.behance.net/project_modules/disp/9a556e13045459.5603449940365.jpg)

When you zoom in to any part of the image, the background looks a bit noisy/grainy. See pixels around "violent violet" label:

![grains](https://i.sstatic.net/1j518.png)

I'm trying to understand how to achieve the same effect programmatically?

I was trying to change pixel color in rgb space by adding tiny gaussian offset, but it still doesn't look nearly as natural as in the image above:

![failed attempts](https://i.sstatic.net/Qpy4P.png)

I feel like I'm missing something very simple, but I don't even know where to start? How is this done in general?

Maybe you can play with this jsbin to show me how this is done: <https://jsbin.com/fatecojolo/edit?js,output> ?

**Tags:** rendering, image-processing, post-processing

> **Comments:**
> **username_1**: Perhaps working in HSV space would give results more like in the image?  
> **username_0**: I tried with HSL without much luck, but I might have missed something. The linked jsbin has the functions to transform to/from hsl space. What should I try?  
> **username_2**: What does this have to do with a gradient?  
> **username_3**: It is just some white or blue noise remapped to some narrow range added to color probably. Same value added to all rgb components gives first picture result.  

---

## 1 answers

### Answer by username_4 on 2019-02-04. Score: 4 | Accepted answer

It's generally a good idea to add noise like this when you're using a gradient, to avoid visible banding in the gradient, especially on smartphones. Often smartphone screens claim to be 24-bit colour but the panel itself is actually only 16 or 20 bit.

The chief difference between the example and your attempt to reproduce it is that your noise is in RGB space, while the example only adds luminance noise (i.e. brightness). You could achieve this by using HSV colours and only adding to the V channel, or with RGB colours and adding the same amount to each channel.

> **Comments:**
> **username_0**: Thanks, looks like adding the same value to each channel worked: https://i.imgur.com/1OydskY.png  
> **username_5**: Out of curiosity, how did you determine that it was luminance noise?  
> **username_4**: @username_5 Just look at it.  

---

