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

[ujaved]

Summary

The streamlit color picker is very neat, but sometimes it’s overkill. For one, the user has to click on the box to see the entire color palette. Then to select a color they have a continuous range to pick from, which may overwhelm the user. Thirdly, finalizing a color selection involves clicking on the board and then clicking outside the widget area.

I want to have a simple selection menu, with just a few discrete color values that a user can see and choose one from by clicking on a color (visualized below)

I

What’s the best way to achieve this? Any help would be really appreciated.
Thanks!

[tonyhollaar]

@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:

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!

[ujaved]

@tonyhollaar thanks a lot!