Color depth: Why do my gradients look bad?

When building a Storyboard application on smaller MCU systems (and even some MPU's) it's not uncommon to be working with framebuffers that aren't configured to be full 32bit color. What this means is images displayed in 16 bit mode have 65, 536 colors available to them while full 32bit images have 16.7million colors. This is a fairly big difference in fidelity but fortunately, the majority of images can actually make due with 16bit color. The real problem is when we have gradients or subtle shifts between colors. Given the reduced colour palette, it's not possible to achieve a smooth blend and you end up with an effect known as banding. 

bandingComparision.jpg

Unfortunately, there isn't much that can be done to avoid this because 16-bit color simply lacks the colors to smooth out the color bands. If removing gradients and going with a flatter design isn't an option there is a technique that can be used to mitigate this visual effect. Add noise and blurring effects, this helps by introducing imperfections and shifting the bands around. Take the following horizontal gradient as an example.

blueYellow_dc_003.png

It's fairly easy to see the vertical "bands" in the gradient, this can become even more pronounced on lower end displays with low dpi. By adding some noise and applying some blurring you can shift the bands around and mitigate this effect.

Screen_Shot_2019-06-07_at_11.29.20_AM.pngScreen_Shot_2019-06-07_at_11.30.36_AM.png

If you look hard enough you can still see the noise and some bands but the image is much more pleasing.

blueYellow_dc_001.png

If you encounter color banding in your Storyboard application give this approach a try! 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.