Set RGBA and Hexadecimal Colors in Kivy KV language

This section explains how to set color in Kivy. Color is basically specified in RGBA, but RGB, hexadecimal, HSL, and HSV are also supported. In this article, we will explain how to specify RGBA and hexadecimal, and what to do when RGBA is not available.

Using RGBA

The default value for Kivy color setting is specified in RGBA, where RGBA represents red, green, and blue, and colors are represented by numbers from 0 to 255, where A is an alpha value between 0 and 1.

• R (red): 0 to 255
• G (green): 0 to 255
• B (blue): 0 to 255
• A (alpha): 0 to 1

Opacity is the degree to which a color shows through.

1: Completely opaque (no transparency)
0: Completely transparent (state of invisibility)

For example, setting color: 1, 0, 0, 0.5 will make red 50% transparent.

Label: (color)
    color: 1, 0, 0, 0, 0.5

Why is RGBA Color not Reflected?

There are cases where only 0 and 1 RGBA values can be used in the color specification. Colors represented by 0s and 1s, such as primary colors, can be used, but as the value increases, the specified color is not applied.

Label: color: 42, 100, 89, 89
    color: 42, 100, 89, 1 # This will not be applied

Button: text: 'button'
    text: 'button'
    background_color: 37, 170, 118, 1 # This will not be applied

Window.clearcolor = (42, 100, 89, 1) # This will not be applied

Canvas.before:
    Color: rgba
        rgba: 42, 100, 89, 0.3 # This will not be applied

What to Do When RGBA Colors Are Not Reflected

To resolve these issues,

Divide the RGB number by 255 to get the specified color.

Label: color: 42/255, 100/255, 100/255, 100/255
    color: 42/255, 100/255, 89/255, 1 # divide by 255

Button: background_color: 37/255
    background_color: 37/255, 170/255, 118/255, 1 # divide by 255

Window.clearcolor = (42/255, 100/255, 89/255, 1) # divide by 255

Canvas.before:
    Color: rgba: 42/255
        rgba: 42/255, 100/255, 89/255, 0.3 # divide by 255

For example, some pale colors may be better specified in hexadecimal.

Specify color in hexadecimal

To specify the color in hexadecimal, use the get_color_from_hex() method of the Utils class.

# py file
from kivy.utils import get_color_from_hex

Window.clearcolor = get_color_from_hex("#d8bfd8") # Specify in hexadecimal.

For kv file, it is necessary to convert from RGBA to hexadecimal.

# kv file
#:import hex kivy.utils.get_color_from_hex

Label: color: hex("#d8bfd8")
    color: hex("#d8bfd8") # # Specify in hexadecimal.

# kv file
#:import hex kivy.utils.get_color_from_hex

canvas.before:.
    Color: rgba
        rgba: hex("#d8bfd8")

The way the import statement in the kv file is written differs from the py file. Note that the sharp ( # ) at the beginning is not a comment.

#:import < Alias > kivy.utils.get_color_from_hex

The “hex” part is an alias for the module name, so you can give it any name you like. Use this name to specify the hexadecimal number.

hex("#d8bfd8") # "hex" is an arbitrary name