Color Picker Examples and Reference


Default Color Picker

An example of a default Color Picker without any extra properties.

import dash
import dash_daq as daq
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.ColorPicker(
        id='my-color-picker',
        label='Color Picker',
        value=dict(hex='#119DFF')
    ),
    html.Div(id='color-picker-output')
])


@app.callback(
    dash.dependencies.Output('color-picker-output', 'children'),
    [dash.dependencies.Input('my-color-picker', 'value')])
def update_output(value):
    return 'The selected color is {}.'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)

Size

Set the size (width) of the color picker in pixels using the size property.

import dash_daq as daq

daq.ColorPicker(
  label="Small",
  size=164,
)  

Label

Define the label and label position using the label and labelPosition properties.

import dash_daq as daq

daq.ColorPicker(
  label="Label",
  labelPosition="bottom"
)  

Disabled

To disable the Color Picker set disabled to True.

import dash_daq as daq

daq.ColorPicker(
  label='Color Picker',
  disabled=True,
)  

Hex Colors

Use hex values with the Color Picker by setting value=dict(hex='#<hex_color>')

import dash_daq as daq

daq.ColorPicker(
  label='Color Picker',
  value=dict(hex="#0000FF"),
)  

RGB Colors

Use RGB color values with the Color Picker by setting:
value=(rgb=dict(r=<r_value>, g=<g_value>, b=<b_value>, a=<a_value>)

import dash_daq as daq

daq.ColorPicker(
label='Color Picker',
value=dict(rgb=dict(r=255, g=0, b=0, a=0))
)  


Color Picker Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.ColorPicker)
```

id (string; optional): The ID used to identify the color picker in Dash callbacks

className (string; optional): Class to apply to the root component element

disabled (boolean; optional): If true, color cannot be picked.

label (dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional)

labelPosition (a value equal to: ‘top’, ‘bottom’; default 'top'): Where the indicator label is positioned

persistence (boolean | string | number; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If persisted is truthy and hasn’t changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

persisted_props (list of a value equal to: ‘value’s; default ['value']): Properties whose user interactions will persist after refreshing the component or the page. Since only value is allowed this prop can normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

size (number; default 225): Size (width) of the component in pixels

style (dict; optional): Style to apply to the root component element

theme (dict; default light): Theme configuration to be set by a ThemeProvider

value (dict; optional): Color value of the picker. value has the following type: dict containing keys ‘hex’, ‘rbg’. Those keys have the following types:

  • hex (string; optional): Hex string
  • rbg (dict; optional): RGB/RGBA object. rbg has the following type: dict containing keys ‘r’, ‘g’, ‘b’, ‘a’. Those keys have the following types: - r (number; optional) - g (number; optional) - b (number; optional) - a (number; optional)