1 3 Color Picker Explained

Key Concepts

• Color Picker Widget: A user interface element that allows users to select a color.
• Hexadecimal Color Code: A six-digit code representing a color in RGB format.
• Default Color: The initial color displayed when the widget is loaded.
• Interactive Use: How to use the color picker to create interactive applications.

Color Picker Widget

The st.color_picker widget in Streamlit is used to create a color picker that allows users to select a color. This widget is particularly useful in applications where color selection is required, such as designing user interfaces, visualizing data with color, or allowing users to customize their experience.

Hexadecimal Color Code

The color picker widget typically returns the selected color in hexadecimal format (e.g., #FF5733). This six-digit code represents the red, green, and blue components of the color. Each pair of digits represents a value between 00 and FF (0 to 255 in decimal), with the first pair representing red, the second pair representing green, and the third pair representing blue.

Default Color

The default color is the initial color displayed when the widget is loaded. This can be set using the value parameter. If no default color is specified, the widget may default to a neutral color like black (#000000) or white (#FFFFFF).

Interactive Use

Using st.color_picker, you can create interactive applications where users can select colors that affect the output. For example, you can create a simple color selector that changes the background color of your app based on the user's choice.

Examples

Example 1: Basic Color Picker

import streamlit as st

selected_color = st.color_picker("Choose a color")
st.write(f"You selected: {selected_color}")
    

Example 2: Setting a Default Color

import streamlit as st

default_color = "#FF5733"
selected_color = st.color_picker("Choose a color", value=default_color)
st.write(f"You selected: {selected_color}")
    

Example 3: Interactive Color Selector

import streamlit as st

selected_color = st.color_picker("Choose a background color")
st.write(f"You selected: {selected_color}")
st.markdown(f"<style>body {{ background-color: {selected_color}; }}</style>", unsafe_allow_html=True)
    

Analogies

Think of st.color_picker as a digital version of a paint palette where users can pick a specific color. The hexadecimal color code is like the color's unique identifier, ensuring consistency across different systems. The default color is like the initial color on the palette when you open it, and the interactive use is like painting a digital canvas with the selected color.

By mastering st.color_picker, you can enhance your Streamlit applications by providing users with a convenient and intuitive way to select colors, making your apps more interactive and visually appealing.