Build a Streamlit App to Find the Closest CSS Color Name Using Python 🎨✨

Colors are everywhere in web and app development — but what if you pick a random color and want to know its closest official CSS color name? Instead of guessing or endlessly searching, let’s build a fun Streamlit app that does this for you in seconds!

Why This App?🎨🎨
Quickly find the closest CSS4 color name for any color you choose.
Visual comparison of your color and the matched CSS color side-by-side.
Great for designers, developers, or anyone curious about colors!

Tools We’ll Use
Streamlit — super easy framework to build interactive web apps with Python.
matplotlib — provides a comprehensive dictionary of CSS4 color names and their hex codes.
Python standard library — for math and color conversions.

How It Works
User picks a color using a color picker (or enters an RGB/hex code).
The app converts the selected color into RGB values normalized between 0 and 1.
We compare this to every CSS4 color in matplotlib.colors.CSS4_COLORS.
Calculate the Euclidean distance between the RGB values to find the closest match.
Display the closest CSS color name, its hex code, and a side-by-side color preview.

The Code

import streamlit as st
import matplotlib.colors as mcolors
from math import sqrt
def hex_to_rgb(hex_color):
    return mcolors.to_rgb(hex_color)
def rgb_distance(rgb1, rgb2):
    return sqrt(sum((a - b) ** 2 for a, b in zip(rgb1, rgb2)))
def closest_css_color(target_rgb):
    css4_colors = mcolors.CSS4_COLORS
    closest_name = None
    min_dist = float('inf')
    for name, hex_val in css4_colors.items():
        rgb = hex_to_rgb(hex_val)
        dist = rgb_distance(rgb, target_rgb)
        if dist < min_dist:
            min_dist = dist
            closest_name = name
    return closest_name, css4_colors[closest_name]
st.set_page_config(page_title="Closest Color Name Finder 🎨")
st.title("🎨 Closest CSS Color Name Finder")
st.markdown("Pick a color and we'll tell you the closest CSS4 color name!")
hex_input = st.color_picker("Pick a color:", "#6495ED")
rgb_input = mcolors.to_rgb(hex_input)
rgb_255 = tuple(int(c * 255) for c in rgb_input)
st.write(f"RGB: {rgb_255}")
closest_name, closest_hex = closest_css_color(rgb_input)
st.subheader("🔍 Closest CSS Color Name")
st.write(f"**{closest_name}** (`{closest_hex}`)")
st.markdown("### 🎨 Color Comparison")
col1, col2 = st.columns(2)
with col1:
    st.markdown("**Your Color**")
    st.markdown(f"<div style='background-color:{hex_input};height:100px;border-radius:10px;'></div>", unsafe_allow_html=True)
with col2:
    st.markdown("**Closest Named Color**")
    st.markdown(f"<div style='background-color:{closest_hex};height:100px;border-radius:10px;'></div>", unsafe_allow_html=True)

Output :

How to Run the App
Make sure you have Python installed.
Install Streamlit and matplotlib if you don’t have them:

pip install streamlit matplotlib

Save the above code as color_name_finder.py
Run it with:

streamlit run color_name_finder.py

What Next?
Add image upload to extract dominant colors.
Show top 5 closest CSS colors instead of just one.
Include color harmony suggestions based on the chosen color.

This app is a great starter project to learn Streamlit and get familiar with color manipulation in Python — give it a try and play with colors!

If you enjoyed this, please leave a reaction or comment! Happy coding! 🚀