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 allows selecting a color using the browser’s color-picking widget support.

Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.

Parameters:

For details on other options for customizing the component see the customization guides.

Core

• alpha (boolean): Whether the ColorPicker should show a color slider.

• disabled (boolean): Whether the widget is editable

• format (str): The format of the color value. One of:

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

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

  • rgba: RGBA color value with alpha (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): A hexadecimal RGB color value

Display

• label (str): The title of the widget

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

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

Styling

• sx (dict): Component level styling API.

• theme_config (dict): Theming API.

Aliases

For compatibility with Panel certain parameters are allowed as aliases:

• button_style: Alias for variant

• button_type: Alias for color

• name: Alias for label

---

When clicked the ColorPicker opens a browser-dependent color-picking widget:

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

colorpicker

ColorPicker.value returns a hexadecimal RGB value:

colorpicker.value

#99ef78

Format

The ColorPicker supports inputting values in a variety of formats. To configure which color specification is used when choosing a new color set the format:

pmui.Column(
  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

To also set the opacity enable the alpha option:

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

Color Options

You can set the color parameter to visually distinguish the ColorPicker when active. Available 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

The variant parameter controls the visual style of the input. 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"),
)

Controls

The ColorPicker widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

pmui.Row(colorpicker.api(jslink=True), colorpicker)

References

Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity.

Learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.

See also the Material UI ColorPicker Reference and API documentation for inspiration.

---

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