I found this picture


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


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

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 ?

  • $\begingroup$ Perhaps working in HSV space would give results more like in the image? $\endgroup$ – user1118321 Feb 4 at 4:44
  • $\begingroup$ 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? $\endgroup$ – Anvaka Feb 4 at 5:28
  • $\begingroup$ What does this have to do with a gradient? $\endgroup$ – bernie Feb 4 at 8:52
  • $\begingroup$ 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. $\endgroup$ – narthex Feb 4 at 11:56

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.

  • $\begingroup$ Thanks, looks like adding the same value to each channel worked: i.imgur.com/1OydskY.png $\endgroup$ – Anvaka Feb 4 at 16:52
  • $\begingroup$ Out of curiosity, how did you determine that it was luminance noise? $\endgroup$ – Julien Guertault Feb 6 at 3:11
  • $\begingroup$ @JulienGuertault Just look at it. $\endgroup$ – Dan Hulme Feb 6 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.