Best way to use a color selector with a few color values

Using Streamlit
2

@ujaved I would suggest a custom package that allows for clickable custom buttons using HTML from vivien000 on Github:

source: GitHub - vivien000/st-click-detector

Note: you can install with: pip install st-click-detector

Then you can run my simple example below that looks like this with X to escape the options:

image
image887×589 5.3 KB

Please adjust my example code as needed for your purpose e.g. colors inside HTML.
You can change red, green, blue and yellow to your hex colors as needed.
Additionally you can store the chosen color in e.g. a session state and use that for your graph color or other app-elements as needed.

import streamlit as st
from st_click_detector import click_detector

content = """
        <div style='display: flex; flex-direction: column; align-items: center;'>
            <div style='display: flex; justify-content: center;'>
                <a href='#' id='redBox' style='background-color: red; width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center;'></a>
                <a href='#' id='greenBox' style='background-color: green; width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center;'></a>
                <a href='#' id='blueBox' style='background-color: blue; width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center;'></a>
                <a href='#' id='yellowBox' style='background-color: yellow; width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center;'></a>
            </div>
            <a href='#' id='empty' style='background-color: white; width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center;'>X</a>
        </div>
        """

clicked = click_detector(content)

col1, col2, col3 = st.columns([4,4,4])
with col2:
    if clicked == 'redBox':
        # change to red
        st.write('you clicked red box')
    elif clicked == 'greenBox':
        st.write('you clicked green box')
    elif clicked == 'blueBox':
        st.write('you clicked blue box')
    elif clicked == 'yellowBox':
        st.write('you clicked yellow box')
    # hide output
    elif clicked == 'empty':
       pass

Let me know if this is what you were looking for! If so, mark it as solution please!