ColorPicker#

Download this notebook from GitHub (right-click to download).


import panel as pn
import panel_material_ui as pmui

pn.extension()

The ColorPicker widget provides an intuitive interface for selecting color values in your Panel applications.

Parameters:#

For comprehensive customization options, see the customization guides.

Core#

  • alpha (boolean): Whether to display input controls for a color’s alpha (transparency) channel.

  • disabled (boolean): Whether the widget is interactive or read-only.

  • format (str): The format of the returned color value. Options include:

    • hex: Hexadecimal color value (e.g., ‘#ff0000’)

    • rgb: RGB color value (e.g., ‘rgb(255, 0, 0)’)

    • rgba: RGBA color value with alpha channel (e.g., ‘rgba(255, 0, 0, 0.5)’)

    • hsl: HSL color value (e.g., ‘hsl(0, 100%, 50%)’)

    • hsv: HSV color value (e.g., ‘hsv(0, 100%, 100%)’)

  • value (color): The current color value

Display#

  • color (str): The accent color of the color picker when active or focused.

  • label (str): The descriptive label displayed above the widget

  • size (Literal["small", "medium", "large"]): The visual size of the input field

  • variant (Literal["filled", "outlined", "standard"]): The visual style variant of the input field

Styling#

  • sx (dict): Component-level styling API for fine-grained customization.

  • theme_config (dict): Theming API for consistent design system integration.

Aliases#

For compatibility with existing Panel code, certain parameters have aliases:

  • name: Alias for label


Basic Usage#

The ColorPicker displays a color preview square that, when clicked, opens your browser’s native color selection interface. This provides a familiar and accessible way for users to choose colors:

colorpicker = pmui.ColorPicker(label='Color Picker', value='#99ef78')

colorpicker

The .value returns the selected color as a hexadecimal RGB string:

colorpicker.value
#99ef78

Format#

The ColorPicker supports multiple color format specifications to match your application’s needs. Configure the format parameter to control how color values are represented when a user makes a selection:

pmui.FlexBox(
  pmui.ColorPicker(label='HEX Color Picker', value='#99ef78', format='hex'),
  pmui.ColorPicker(label='RGB Color Picker', value='rgb(0, 24, 24)', format='rgb'),
  pmui.ColorPicker(label='RGBA Color Picker', value='rgba(90, 255, 120, 0.5)', format='rgba'),
  pmui.ColorPicker(label='HSL Color Picker', value='hsl(0, 100%, 50%)', format='hsl'),
  pmui.ColorPicker(label='HSV Color Picker', value='hsv(0, 100%, 100%)', format='hsv'),
)

Alpha Channel#

Enable transparency control by setting the alpha parameter to True. This adds an alpha channel slider to the color picker, allowing users to adjust the opacity of their selected color:

pmui.ColorPicker(label='HEX Color Picker', value='#99ef78ff', alpha=True)

Color Options#

The color parameter allows you to visually distinguish the ColorPicker component when it’s active or focused. This helps create a cohesive visual hierarchy in your application. Available color options include “default”, “primary”, “secondary”, “error”, “info”, “success”, “warning”, “light”, “dark”, and “danger”:

pmui.FlexBox(
    *[pmui.ColorPicker(label=color, color=color, value='#f3f3f3') for color in pmui.ColorPicker.param.color.objects]
)

Variant Styles#

The variant parameter controls the visual appearance of the input field, allowing you to match your application’s design aesthetic. Choose from “filled”, “outlined” (default), or “standard”:

pmui.FlexBox(
    pmui.ColorPicker(label='Filled', variant="filled"),
    pmui.ColorPicker(label='Outlined', variant="outlined"),
    pmui.ColorPicker(label='Standard', variant="standard"),
)

Size#

The size parameter controls the size of the input. Choose from “small”, “medium” (default), or “large”:

pmui.FlexBox(
    pmui.ColorPicker(label='Small', size="small"),
    pmui.ColorPicker(label='Medium', size="medium"),
    pmui.ColorPicker(label='Large', size="large"),
)

Disabled and Loading#

Like other widgets, the ColorPicker can be disabled and/or show a loading indicator:

pmui.ColorPicker(label='Color Picker', value='#99ef78', disabled=True, loading=True)

Example: Color Designer#

This example demonstrates how to use the ColorPicker widget to select a color and interactively display the selected color.

import panel as pn
import panel_material_ui as pmui

pn.extension()

text_color = pmui.ColorPicker(label="Text Color", value="#e91e63")

def get_result(color):
    return f"<span style='background:{color};color:white;padding:10px;border-radius:8px'>{color}</span>"

result = pn.bind(get_result, text_color)

pmui.Column("# 🎨 Color Designer", result, text_color,)

API Reference#

Parameters#

colorpicker.api(jslink=True)

References#

Panel Documentation:

Material UI DatePicker:


Download this notebook from GitHub (right-click to download).