Is it possible to add a color picker?

Custom Components
1

Can I get something like this on a page? Or any other color picker?
Using 3 rgb-sliders is less comfortable. Any ideas?

image
image720Ă—240 30.6 KB

2

Hi @Concubine, welcome to the forums !

There is no way to interactive selection on a 2D plane for now, this looks like a perfect use case for a simple Streamlit plugin when Plugin architecture is in place.

In the meantime, you may be able to hack this a little bit, as there is a ColorPicker in Bokeh

import streamlit as st
from bokeh.models.widgets import ColorPicker

color_picker = ColorPicker(color="#ff4466", title="Choose color:", width=200)
st.bokeh_chart(color_picker)

… maybe you could pass the value of the color picker back to your Python code using a hidden st.text_box using the cool Custom Widgets Hack - Login,

(well it may be a bit more involved, I can’t find the value of the selected color on the HTML page and could not get the Bokeh JS callbacks to update an input in Streamlit to work in 5 minutes of reading the doc :confused: …I may try again later :slight_smile:)

1 Like
3

Color picker is now native in Streamlit : st.beta_color_picker

2 Likes
4

Dear @andfanilo,

I really love this one solution!
However, I don’t know how to get the parameters from users picking.

After we use this one st.bokeh_chart(color_picker), how can we further use it?
Thank you so much!

BR,
Chieh

5

Was looking for the same feature.

@andfanilo do you know when the “beta” will be removed? Kinda looking for something I can use in Prod.

6

Hi @Chieh,

I think you should be using st.color_picker but if you really want to use the bokeh ColorPicker widget you can use streamlit-bokeh-events component.and use this script.

import streamlit as st
from bokeh.models.widgets import ColorPicker
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events

selected_color = "#ff4466" 
color_picker = ColorPicker(color=selected_color, title="Choose color:", width=200)
color_picker.js_on_change("color", CustomJS(code="""
    document.dispatchEvent(new CustomEvent("COLOR_PICKED", {detail: {pickedColor: cb_obj.color}}))
    """))
result = streamlit_bokeh_events(
    color_picker,
    events="COLOR_PICKED",
    key="picker",
    refresh_on_update=False,
    override_height=75,
    debounce_time=0)

if result:
    if "COLOR_PICKED" in result:
        selected_color = result.get("COLOR_PICKED")["pickedColor"]

st.write(selected_color)

It will look like this.

color

Ugly ? Yes. Gets the job done? Yes. :smiley:

@tobyglei
You can use st.color_picker instead of st.beta_color_picker safely.

image
image700Ă—126 3.66 KB

3 Likes
7

Hi @ash2shukla,

Thanks for your reply and solutions!
I really love it that I am going to try it! :smiley:

Thanks again!

BR,
Chieh

1 Like