Skip to main content

ColorPicker

A full-featured color picker with palette, sliders, labels, and optional history.

ColorPicker
Basic ColorPicker

Inherits: LayoutControl

Properties

Events

Example​

import flet as ft
from flet_color_pickers import ColorLabelType, ColorPicker, PaletteType


def main(page: ft.Page):
    page.title = "ColorPicker"
    page.padding = 20

    def on_color_change(e: ft.ControlEvent):
        print(f"color: {e.data}")

    def on_history_change(e: ft.ControlEvent):
        # e.data is a list of hex strings
        print(f"history: {e.data}")

    def on_hsv_color_change(e: ft.ControlEvent):
        print("hsv: ", e.control.hsv_color)

    picker = ColorPicker(
        color="#ff0000",
        # hsv_color=HsvColor(alpha=1, hue=0, saturation=1, value=1),
        color_history=[
            "#ff0000",
            "#00ff00",
            "#0000ff",
            "#ffff00",
            "#00ffff",
            "#ff00ff",
        ],
        on_color_change=on_color_change,
        palette_type=PaletteType.RGB_WITH_GREEN,
        on_history_change=on_history_change,
        on_hsv_color_change=on_hsv_color_change,
        label_types=[
            ColorLabelType.HEX,
            ColorLabelType.RGB,
        ],
        picker_area_border_radius=ft.BorderRadius.all(20),
    )

    page.add(ft.SafeArea(content=picker))


if __name__ == "__main__":
    ft.run(main)

Properties​

colorclass-attributeinstance-attribute​

color: Optional[ColorValue] = None

The currently selected color.

color_historyclass-attributeinstance-attribute​

color_history: Optional[list[ColorValue]] = None

A list of colors to display as a history palette.

To be notified when the palette changes, set on_history_change.

color_picker_widthclass-attributeinstance-attribute​

color_picker_width: Optional[Number] = None

Width of the color picker in virtual pixels.

display_thumb_colorclass-attributeinstance-attribute​

display_thumb_color: bool = True

Whether to display the thumb color in slider.

enable_alphaclass-attributeinstance-attribute​

enable_alpha: bool = True

Whether to enable alpha (opacity) slider.

hex_input_barclass-attributeinstance-attribute​

hex_input_bar: bool = True

Whether to show the hex input bar.

hsv_colorclass-attributeinstance-attribute​

hsv_color: Optional[HsvColor] = None

The currently selected HSV color.

Provide an HsvColor instance with fields: alpha, hue, saturation, value.

label_text_styleclass-attributeinstance-attribute​

label_text_style: Optional[TextStyle] = None

Text style for labels.

label_typesclass-attributeinstance-attribute​

label_types: Optional[list[ColorLabelType]] = None

Color label types to display.

palette_typeclass-attributeinstance-attribute​

palette_type: Optional[PaletteType] = None

Palette type for the picker area.

picker_area_border_radiusclass-attributeinstance-attribute​

picker_area_border_radius: Optional[BorderRadiusValue] = None

Border radius for the picker area.

picker_area_height_percentclass-attributeinstance-attribute​

picker_area_height_percent: Optional[Number] = None

Height of the picker area as a percentage of the picker width.

Events​

on_color_changeclass-attributeinstance-attribute​

on_color_change: Optional[ControlEventHandler[ColorPicker]] = None

Called when the picker color is changed.

The data property of the event handler argument contains the color value as a hex string.

on_history_changeclass-attributeinstance-attribute​

on_history_change: Optional[ControlEventHandler[ColorPicker]] = None

Called when the history palette is changed.

The data property of the event handler argument contains the list of color values as hex strings.

on_hsv_color_changeclass-attributeinstance-attribute​

on_hsv_color_change: Optional[ControlEventHandler[ColorPicker]] = None

Called when the picker HSV color is changed.

The data property of the event handler argument contains the HSV values as a dict with keys: alpha, hue, saturation, value.