Color (lv_color)

The color module handles all color-related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors, etc.

The color module handles all color-related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors, etc.

The type lv_color_t is used to store a color in RGB888 format. This type and format are used in almost all APIs regardless of the color format the display renders in.

Creating Colors

RGB

Create colors from Red, Green and Blue channel values:

/* All channels are 0-255 */
lv_color_t c = lv_color_make(red, green, blue);


/* Same but can be used for const initialization as well */
lv_color_t c = LV_COLOR_MAKE(red, green, blue);

/* From hex code 0x000000..0xFFFFFF interpreted as RED + GREEN + BLUE */
lv_color_t c = lv_color_hex(0x123456);

/* From 3 digits. Same as lv_color_hex(0x112233) */
lv_color_t c = lv_color_hex3(0x123);

HSV

Create colors from Hue, Saturation and Value values:

//h = 0..359, s = 0..100, v = 0..100
lv_color_t c = lv_color_hsv_to_rgb(h, s, v);

//All channels are 0-255
lv_color_hsv_t c_hsv = lv_color_rgb_to_hsv(r, g, b);


//From lv_color_t variable
lv_color_hsv_t c_hsv = lv_color_to_hsv(color);

Palette

LVGL includes Material Design's palette of colors. In this system all named colors have a nominal main color as well as four darker and five lighter variants.

The names of the colors are as follows:

• LV_PALETTE_RED
• LV_PALETTE_PINK
• LV_PALETTE_PURPLE
• LV_PALETTE_DEEP_PURPLE
• LV_PALETTE_INDIGO
• LV_PALETTE_BLUE
• LV_PALETTE_LIGHT_BLUE
• LV_PALETTE_CYAN
• LV_PALETTE_TEAL
• LV_PALETTE_GREEN
• LV_PALETTE_LIGHT_GREEN
• LV_PALETTE_LIME
• LV_PALETTE_YELLOW
• LV_PALETTE_AMBER
• LV_PALETTE_ORANGE
• LV_PALETTE_DEEP_ORANGE
• LV_PALETTE_BROWN
• LV_PALETTE_BLUE_GREY
• LV_PALETTE_GREY

To get the main color use lv_color_t c = lv_palette_main(LV_PALETTE_...).

For the lighter variants of a palette color use lv_color_t c = lv_palette_lighten(LV_PALETTE_..., v). v can be 1..5. For the darker variants of a palette color use lv_color_t c = lv_palette_darken(LV_PALETTE_..., v). v can be 1..4.

Modify and mix colors

The following functions can modify a color:

// Lighten a color. 0: no change, 255: white
lv_color_t c = lv_color_lighten(c, lvl);

// Darken a color. 0: no change, 255: black
lv_color_t c = lv_color_darken(lv_color_t c, lv_opa_t lvl);

// Lighten or darken a color. 0: black, 128: no change 255: white
lv_color_t c = lv_color_change_lightness(lv_color_t c, lv_opa_t lvl);


// Mix two colors with a given ratio 0: full c2, 255: full c1, 128: half c1 and half c2
lv_color_t c = lv_color_mix(c1, c2, ratio);

Built-in colors

lv_color_white and lv_color_black return 0xFFFFFF and 0x000000 respectively.

Opacity

To describe opacity the lv_opa_t type is created from uint8_t. Some special purpose defines are also introduced:

• LV_OPA_TRANSP Value: 0, means no opacity making the color completely transparent
• LV_OPA_10 Value: 25, means the color covers only a little
• LV_OPA_20 ... OPA_80 follow logically
• LV_OPA_90 Value: 229, means the color nearly completely covers
• LV_OPA_COVER Value: 255, means the color completely covers (full opacity)

You can also use the LV_OPA_* defines in lv_color_mix as a mixing ratio.

lv_color_make lv_color_mix lv_palette_main