Embedded GUI Design and Development Tool
Download Embedded GUI Development Demos
Embedded GUI Design and Development Tool


1 min read


Nov 16, 2009 8:44:47 PM

Over the years I have worked on may user interface projects for embedded devices with touchscreens.  One question always gets asked at some point "Hey why does my fancy gradient have bands on it, it doesn't on my desktop?".  Tools like Photoshop are great but they make things look so nice.  On the target you are usally running at a reduced color depth, such as 16bit RGB, and gradients just look bad and get banded.

Banding is usually due to the color conversion from 32bit to 16bit color, it is a loss of precision.  The most common conversion from 32 bit to 16 bit is to shift off the last 2 or 3 bits for each color component.  This creates harsh transitions or jumps which end up looking like bands in the image.


Even some tools will say they dithered the image but this will not fix the problem because when you do the conversion the image is still banded (dithering a 32 bit image is not the same).  Usually I like to write a program to color convert the image to 16 bit (using shifting) and then run a standard dithering algorithm over the data such as Floyd–Steinberg.  Since you don't really want to do this on the target if you don't need to it is also a good idea to same the image as a native 16bot format after the dithering as been applied.

Keep this in mind as you add gradients to 16bit lcd displays.


Topics: Uncategorized

Brian Edmond
Written by Brian Edmond

Post a Comment