Color Picker Examples and Reference
Default Color Picker
An example of a default Color Picker without any extra properties.
using Dash
using DashDaq
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash(external_stylesheets=external_stylesheets)
app.layout = html_div([
daq_colorpicker(
id="my-color-picker",
label="Color Picker",
value=(hex ="#119DFF",)
),
html_div(id="color-picker-output")
])
callback!(app,
Output("color-picker-output", "children"),
[Input("my-color-picker", "value")]) do value
return "The selected color is $value"
end
run_server(app, "0.0.0.0", debug=true)
Size
Set the size (width) of the color picker in pixels using the size property.
using Dash
using DashDaq
app = dash()
app.layout = daq_colorpicker(
label="Small",
size=164,
)
run_server(app, "0.0.0.0", debug=true)
Label
Define the label and label position using the label and labelPosition properties.
using Dash
using DashDaq
app = dash()
app.layout = daq_colorpicker(
label="Label",
labelPosition="bottom"
)
run_server(app, "0.0.0.0", debug=true)
Disabled
To disable the Color Picker set disabled to true.
using Dash
using DashDaq
app = dash()
app.layout = daq_colorpicker(
label="Color Picker",
disabled=true,
)
run_server(app, "0.0.0.0", debug=true)
Hex Colors
Use hex values with the Color Picker by setting value=Dict(hex='#<hex_color>')
using Dash
using DashDaq
app = dash()
app.layout = daq_colorpicker(
label="Color Picker",
value=(hex="#0000FF",),
)
run_server(app, "0.0.0.0", debug=true)
RGB Colors
Use RGB color values with the Color Picker by setting:
value=Dict("rgb"=(r=<r_value>, g=<g_value>, b=<b_value>, a=<a_value>))
using Dash
using DashDaq
app = dash()
app.layout = daq_colorpicker(
label="Color Picker",
value=Dict("rgb"=>(r=255, g=0, b=0, a=0))
)
run_server(app, "0.0.0.0", debug=true)
ColorPicker Properties
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
id (String; optional):
The ID used to identify the color picker in Dash callbacks.
value (Dict; optional):
Color value of the picker.
value is a Dict with keys:
-
hex(String; optional):
Hex string. -
rbg(Dict; optional):
RGB/RGBA object.rbgis a Dict with keys:-
a(Real; optional) -
b(Real; optional) -
g(Real; optional) -
r(Real; optional)
-
disabled (Bool; optional):
If true, color cannot be picked.
size (Real; default 225):
Size (width) of the component in pixels.
theme (Dict; default light):
Theme configuration to be set by a ThemeProvider.
label (Dict; optional):
Description to be displayed alongside the control. To control styling,
pass an object with label and style properties.
label is a String | Dict with keys:
-
label(String; optional) -
style(Dict; optional)
labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'top'):
Where the indicator label is positioned.
className (String; optional):
Class to apply to the root component element.
style (Dict; optional):
Style to apply to the root component element.
persistence (Bool | String | Real; 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 (Array of values equal to: ‘value’; 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’ or ‘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.