Interactive tool

Streamlit theme generator

Pick a brand colour. Get a harmonious palette, shade ramp, alert colours, and ready-to-ship config for Streamlit, Plotly, Matplotlib, and Altair.

Brand Color
H:221°S:83%L:53%
Generated Palette
Colors:

Same S & L, evenly spaced hues. Click a swatch to set as primary.

Shade VariationsCenter L: 50%

Drag to adjust the centre shade lightness. The main (500) shade is larger.

Your brand colour and shade preference are saved as cookies on this device.

Base
900
800
700
600
500
400
300
200
100
50
266°
900
800
700
600
500
400
300
200
100
50
311°
900
800
700
600
500
400
300
200
100
50
356°
900
800
700
600
500
400
300
200
100
50
41°
900
800
700
600
500
400
300
200
100
50
86°
900
800
700
600
500
400
300
200
100
50
131°
900
800
700
600
500
400
300
200
100
50
176°
900
800
700
600
500
400
300
200
100
50
Alert Colors

Uses your brand's exact S & L — alerts feel native to the palette.

Success
#14d75b
#b8f4ce · 50
Warning
#ebb924
#f9f0d7 · 50
Caution
#eb7724
#f9e5d7 · 50
Danger
#eb2424
#f9d7d7 · 50
Text & Neutrals

Near-black base for text, borders, and dividers. Sets textColor in your config.

H:240°S:28%L:14%
Neutral
900
800
700
600
500
400
300
200
100
50
Options
Mode
Rounding
Font
Preview
localhost:8501
Filters
Run
Dashboard
Metric 1
72.4%
Metric 2
38.9%
Metric 3
91.2%
Success
Warning
Caution
Danger
Primary
Secondary
.streamlit/config.toml
[theme]
primaryColor = "#2563eb"
backgroundColor = "#ffffff"
secondaryBackgroundColor = "#f0f2f6"
textColor = "#1a1a2e"
font = "sans serif"

HSL harmony · S:83% L:53% · Shade centre: 50% · Alerts: brand

Frequently asked questions

How do I change the theme of a Streamlit app?expand_more

Create or edit .streamlit/config.toml in your project root and add a [theme] section with keys like primaryColor, backgroundColor, secondaryBackgroundColor, and textColor. Use this generator to produce that block automatically — then paste it directly into your config file.

What is primaryColor in Streamlit config.toml?expand_more

primaryColor sets the accent colour used for interactive widgets — sliders, buttons, checkboxes, and the active state of select boxes. It accepts any six-digit hex value, for example primaryColor = "#E8440A". This generator lets you derive it from any brand colour and preview it live.

Can I use a custom colour palette in Plotly charts inside Streamlit?expand_more

Yes. Pass a list of hex values to the color_discrete_sequence parameter on any Plotly Express call, or set px.defaults.color_discrete_sequence globally at the top of your script. This generator exports a ready-to-use PLOTLY_COLORS list that stays in harmony with your Streamlit theme.

Does Streamlit support dark mode?expand_more

Yes. Set backgroundColor = "#0e1117" and secondaryBackgroundColor = "#1a1c23" in the [theme] block of config.toml. This generator has a built-in dark mode toggle that automatically adjusts all exported values — config.toml, Plotly, Matplotlib, and Altair — to match.

More tools

grid_view
Badge designerDesign badge grids with Material Icons, colour presets, and dark mode — copy the generated Python code into your Streamlit app.Open tool →
title
Header designerDesign st.markdown() headers with icons, subtitles, badges, dividers, and background styles — copy the Python code into your Streamlit app.Open tool →