CSS 색상 이름 찾기 앱 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹/앱 디자이너, Python 개발자, 색상 조합에 관심 있는 사람들

핵심 요약

• Streamlit과 matplotlib을 사용하여 CSS4 색상 이름을 자동으로 찾는 웹 앱 개발
• RGB 유사도 계산을 통해 사용자 입력 색상과 가장 가까운 CSS 색상 매칭 (코드: rgb_distance 함수)
• 차트 비교 기능으로 사용자 색상과 매칭된 색상의 시각적 비교 제공

섹션별 세부 요약

1. 문제 정의 및 필요성

• CSS 색상 이름을 수동으로 찾아야 하는 번거로움 해결
• 디자이너/개발자가 색상 선택 시 참고할 수 있는 도구 제공

2. 사용 도구 및 기술 스택

• Streamlit: Python 기반 웹 앱 개발 프레임워크
• matplotlib: CSS4 색상 딕셔너리 제공 (mcolors.CSS4_COLORS)
• 수학 모듈: 유사도 계산을 위한 Euclidean distance 알고리즘

3. 앱 동작 원리

• 사용자 색상 입력 (RGB/HEX) → RGB 정규화 → CSS4 색상과 유사도 계산 → 최적 매칭 반환
• 유사도 계산: sqrt(sum((a - b)^2 for a, b in zip(rgb1, rgb2)))

4. 주요 코드 구조

• HEX → RGB 변환: mcolors.to_rgb(hex_color)
• 색상 매칭 함수:

```python

def closest_css_color(target_rgb):

for name, hex_val in mcolors.CSS4_COLORS.items():

dist = rgb_distance(mcolors.to_rgb(hex_val), target_rgb)

if dist < min_dist: min_dist = dist; closest_name = name

```

• Streamlit UI 구성: 색상 피커, RGB 표시, 병렬 비교 차트

5. 실행 방법

• 설치: pip install streamlit matplotlib
• 실행: streamlit run color_name_finder.py

결론

• Streamlit으로 빠르게 구현 가능한 색상 매칭 앱 예제
• Euclidean distance 알고리즘 활용 시 시각적 비교 기능 추가 가능
• 확장성: 이미지에서 주요 색상 추출, 상위 5개 색상 매칭 기능 추가 가능