Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
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! ?
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! ?