Kivy - Color Picker

Kivy's ColorPicker widget is an inbuilt dialog box that lets you choose a color in more than one ways. It provides a chromatic color wheel from which to choose the required color. It also has slider controls, which can adjust to get the desired color value. Sliders are also available for transparency and color values in HSV scheme.

Each of these color attributes have a text box in which you can directly enter a numeric color value ranging between 0 and 255.

The ColorPicker widget appears like this −

Kivy Color Wheel

The ColorPicker class is defined in the "kivy.uix.colorpicker" module.

from kivy.uix.colorpicker import ColorPicker
colour = ColorPicker(**kwargs)

To render the above color dialog, just add the ColorPicker object to the parent window. If its color property is bound to an event handler, the color value can be used for further processing like changing the color of a certain object with the chosen color.

In addition to color, the ColorPicker object has hsv and hex_color properties. In the following snippet, the color, hsv and hex_color values are printed on the console when a color is chosen.

For a color selected from the wheel, the RGB, HSV, A and hex values are displayed in the text boxes as well as indicated by the slider positions.

Kivy Color Picker

The callback method prints the values on the console −

RGBA = [1, 0.5, 0.5, 1]
HSV = (0.0, 0.5, 1)
HEX = #ff7f7fff

ColorPicker Properties

  • r − The Red value of the color currently selected. It is a BoundedNumericProperty and can be a value from 0 to 1. It defaults to 0.

  • g − The Green value of the color currently selected. "g" is a BoundedNumericProperty and can be a value from 0 to 1.

  • b − The Blue value of the color currently selected. "b" is a BoundedNumericProperty and can be a value from 0 to 1.

  • a − The Alpha value of the color currently selected. "a" is a BoundedNumericProperty and can be a value from 0 to 1.

  • hsv − The hsv holds the color currently selected in hsv format. hsv is a ListProperty and defaults to (1, 1, 1).

  • hex_color − The hex_color holds the currently selected color in hex. hex_color is an AliasProperty and defaults to #ffffffff.

  • color − The color holds the color currently selected in rgba format. color is a ListProperty and defaults to (1, 1, 1, 1).

  • font_name − Specifies the font used on the ColorPicker. font_name is a StringProperty.

  • wheel − The wheel holds the color wheel. wheel is an ObjectProperty and defaults to None.

Example

Let us the ColorPicker widget to select any desired color, either from the wheel or from the sliders, or by directly entering the color values; and apply it to the label on the parent window.

The Kivy application window contains a label and a button placed in a grid layout. On the on_press event of the button a popup is displayed.

The popup is designed with a ColorPicker and a button in another grid layout. The popup button applies the chosen color to the label on application window before dismissing the popup.

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.popup import Popup
from kivy.uix.colorpicker import ColorPicker
from kivy.core.window import Window

Window.size = (720, 350)

class ColorPickApp(App):
   def build(self):
      self.layout = GridLayout(cols=1, padding=10)
      self.l1 = Label(
         text='www.tutorialspoint.com',
         font_size=32, color=[.8, .6, .4, 1]
      )
      self.layout.add_widget(self.l1)
      self.button = Button(text="Click Here")
      self.layout.add_widget(self.button)
      self.button.bind(on_press=self.onButtonPress)
      return self.layout
      
   def onButtonPress(self, button):
      layout = GridLayout(cols=1, padding=10)
   
      self.clr = ColorPicker()
      closeButton = Button(text="OK", size_hint=(.1, .05))
      
      layout.add_widget(self.clr)
      layout.add_widget(closeButton)
   
      self.popup = Popup(
         title='Hello', content=layout, auto_dismiss=False
      )
      self.popup.open()
   
      closeButton.bind(on_press=self.on_close)
   def on_close(self, event):
      self.l1.color = self.clr.hex_color
      self.popup.dismiss()
      
ColorPickApp().run()

Output

The initial display of this Kivy app would show a label and a button. When you click the button, the ColorPicker widget will popup.

Select the desired color and press OK. You will see the Label text changing its color accordingy.

Kivy Color Picker Select
Advertisements