# Color (lv_color) (/main-modules/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 type <ApiLink name="lv_color_t" /> is used to store a color in RGB888 format.
This type and format are used in almost all APIs regardless of <ApiLink name="LV_COLOR_DEPTH" />.

Creating Colors [#creating-colors]

RGB [#rgb]

Create colors from Red, Green and Blue channel values:

```c title=" " lineNumbers=1
/* 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 [#hsv]

Create colors from Hue, Saturation and Value values:

```c title=" " lineNumbers=1
//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 [#palette]

LVGL includes [Material Design's palette](https://vuetifyjs.com/en/styles/colors/#material-colors) 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:

* <ApiLink name="LV_PALETTE_RED" />
* <ApiLink name="LV_PALETTE_PINK" />
* <ApiLink name="LV_PALETTE_PURPLE" />
* <ApiLink name="LV_PALETTE_DEEP_PURPLE" />
* <ApiLink name="LV_PALETTE_INDIGO" />
* <ApiLink name="LV_PALETTE_BLUE" />
* <ApiLink name="LV_PALETTE_LIGHT_BLUE" />
* <ApiLink name="LV_PALETTE_CYAN" />
* <ApiLink name="LV_PALETTE_TEAL" />
* <ApiLink name="LV_PALETTE_GREEN" />
* <ApiLink name="LV_PALETTE_LIGHT_GREEN" />
* <ApiLink name="LV_PALETTE_LIME" />
* <ApiLink name="LV_PALETTE_YELLOW" />
* <ApiLink name="LV_PALETTE_AMBER" />
* <ApiLink name="LV_PALETTE_ORANGE" />
* <ApiLink name="LV_PALETTE_DEEP_ORANGE" />
* <ApiLink name="LV_PALETTE_BROWN" />
* <ApiLink name="LV_PALETTE_BLUE_GREY" />
* <ApiLink name="LV_PALETTE_GREY" />

To get the main color use
<ApiLink name="lv_color_t" /> `c =` <ApiLink name="lv_palette_main" display="lv_palette_main(LV_PALETTE_...)" />.

For the lighter variants of a palette color use
<ApiLink name="lv_color_t" /> `c =` <ApiLink name="lv_palette_lighten" display="lv_palette_lighten(LV_PALETTE_..., v)" />. `v` can be
1..5. For the darker variants of a palette color use
<ApiLink name="lv_color_t" /> `c =` <ApiLink name="lv_palette_darken" display="lv_palette_darken(LV_PALETTE_..., v)" />. `v` can be
1..4.

Modify and mix colors [#modify-and-mix-colors]

The following functions can modify a color:

```c title=" " lineNumbers=1
// 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 [#built-in-colors]

<ApiLink name="lv_color_white" /> and <ApiLink name="lv_color_black" /> return `0xFFFFFF` and
`0x000000` respectively.

Opacity [#opacity]

To describe opacity the <ApiLink name="lv_opa_t" /> type is created from `uint8_t`.
Some special purpose defines are also introduced:

* <ApiLink name="LV_OPA_TRANSP" /> Value: 0, means no opacity making the color
  completely transparent
* <ApiLink name="LV_OPA_10" /> Value: 25, means the color covers only a little
* `LV_OPA_20 ... OPA_80` follow logically
* <ApiLink name="LV_OPA_90" /> Value: 229, means the color nearly completely covers
* <ApiLink name="LV_OPA_COVER" /> Value: 255, means the color completely covers (full
  opacity)

You can also use the `LV_OPA_*` defines in <ApiLink name="lv_color_mix" /> as a
mixing *ratio*.

API [#api]

lv\_color\_make
lv\_color\_mix
lv\_palette\_main