Skip to main content

Grayscale: 1-bit, 2-bit, 4-bit in Framework

The plugin design Framework supports 16 levels of grayscale, with and without dithering depending on hardware/firmware capabilities and plugin settings.

Mario avatar
Written by Mario
Updated over 2 weeks ago

The plugin design Framework is a very powerful tool for designing plugins that not only look good, but also function reliably across multiple device sizes and capabilities. This includes tradeoffs that users make when they prefer faster refresh over more color detail.

Part of designing for that framework is understanding the classes that are exact matches to device capabilities.

*--gray-55 is meant to represent multiple classes, such as bg--gray-55 or text--gray-55, with the asterisk (*) acting as a placeholder.

1-Bit (Black & White)

This option uses dithering to approximate 14 shades of gray.

If you only wish to use non-dithered classes, they will be in the format:

  • *--black

  • *--white

2-Bit (Grayscale - 4 shades)

This option uses dithering to approximate 12 additional shades of gray.

If you only wish to use non-dithered classes, they will be in the format:

  • *--black

  • *--white

  • *--gray-30 (darker gray)

  • *--gray-55 (lighter gray)

4-Bit (Grayscale - 16 shades)

Supported by our TRMNL X product, no dithering is necessary to display 16 shades of gray.

A Note About Temperature Settings

Some displays may offer the ability to adjust the temperature of the display due to features added to the firmware, allowing the user to nudge the grays slightly lighter or darker to match their personal preferences or to compensate for variations between e-ink displays.

While the Framework classes will always align, the exact shade of gray will vary from device to device.

Did this answer your question?