How to avoid banding on smooth gradients using SquareLine

How to
1

What do you want to achieve?

Display smooth grayscale background images (e.g. smoke / fog effects) on an ST7789 display using LVGL and SquareLine Studio, without visible banding or color “blotches”, even though the display is limited to 16-bit (RGB565).

What have you tried so far?

I’m using SquareLine Studio to design the UI and export assets.
The display is an ST7789 configured correctly for 16-bit color (RGB565).
In SquareLine preview (PC), the image looks smooth and correct.
On the real display, subtle gradients (especially grayscale smoke-like images) show strong banding / uniform steps.
I verified:

  • RGB/BGR is correct
  • Byte order is correct
  • 16-bit mode is correctly set on the panel
    I tested a grayscale gradient rendered directly in LVGL:
  • Colors are correct
  • The gradient shows uniform steps, confirming RGB565 quantization
    I tried adding blur and smoothing filters in GIMP before exporting, but the banding remains.
    From what I understand, SquareLine uses the LVGL image converter, which converts images to RGB565 without dithering, causing visible banding on smooth gradients.

Screenshot or video

SquareLine preview:

image
image1288×1010 24.9 KB

Screen picture:

image
image1732×1284 208 KB

Grayscale gradient preview:

image
image1288×1010 4.72 KB

Grayscale gradient on screen:

image
image1120×854 304 KB

Others

  • SquareLine Studio version: 1.5.4
  • LVGL version: 9.2.2
  • Operating system: macOS
  • Target hardware: * ST7789 display (RGB565)
2

There’s another request for this here: Image dithering support during export

In the short term, you might try pre-dithering your resources to RGB565, or switching your display controller and driver to RGB888 mode.

3

Hi, from the SquareLine Studio screenshots it looks like the image is already converted correctly to RGB565, and what you see in Studio is essentially what the target should be able to display as well.

Based on your gradient test rendered directly in LVGL (not coming from an image), this doesn’t point to an image conversion issue. It confirms you are hitting the limitations of RGB565 quantization on the ST7789, especially in the darker tones. In your photos the low-end grayscale steps are compressed: after the first dark shade, the next visible band jumps much brighter than expected. The same behavior appears on the smoke image where the darker regions look noticeably lighter than they should.

Also note that photos often exaggerate banding due to camera exposure and post-processing, but even with that in mind your examples suggest the panel’s effective dark-level handling/gamma is the main bottleneck here rather than SquareLine’s image converter.