ChromaFlow

ChromaFlow는 브라우저에서 이미지를 분석해 웹 UI용 색상 팔레트를 생성하는 정적 웹앱입니다. 서버 업로드 없이 클라이언트에서만 처리되며, 추출된 결과를 JSON으로 다운로드할 수 있습니다.

주요 기능

• 이미지 입력: 클릭 업로드, 드래그 앤 드롭, 클립보드 붙여넣기 지원
• 추출 색상 수 조절: 슬라이더로 4~10개 범위 설정
• 팔레트 생성: 버킷 기반 양자화 + 유사색 제거 + 부족 색상 보충
• 정렬 및 역할 매핑: 밝기(상대 휘도) 기준 정렬 후 Base, Surface, Primary 등 역할 부여
• 색상 정보 제공: HEX, HSL, 흰색/검정 배경 대비비(Contrast Ratio)
• 원클릭 복사: HEX 복사(Clipboard API 우선, 실패 시 fallback)
• 결과 내보내기: 생성 시각 포함 JSON 파일 다운로드

데모 동작 흐름

1. 이미지를 업로드(또는 드롭/붙여넣기)합니다.
2. 앱이 이미지를 캔버스에 축소 렌더링해 주요 색상을 추출합니다.
3. 유사색을 정리하고 요청한 개수만큼 팔레트를 구성합니다.
4. 카드 형태로 역할/색상값/대비비를 확인하고, 필요 시 HEX를 복사하거나 JSON을 다운로드합니다.

실행 방법

정적 파일만으로 구성되어 있어 별도 빌드가 필요 없습니다.

로컬 실행

python3 -m http.server 8000

브라우저에서 http://localhost:8000 접속.

배포

아래 정적 호스팅 환경에 바로 배포할 수 있습니다.

• GitHub Pages
• Netlify
• Vercel (Static)
• Cloudflare Pages

프로젝트 구조

.
├── index.html    # UI 마크업
├── styles.css    # 다크 테마 스타일
├── script.js     # 이미지 처리/팔레트 생성 로직
└── README.md

팔레트 생성 로직 요약

• 이미지 최대 변 길이를 240px로 제한해 성능을 확보합니다.
• RGB를 일정 버킷 크기(20)로 양자화해 빈도 기반 후보를 만듭니다.
• 색상 거리 임계값(26)으로 유사색을 제거합니다.
• 유사색 제거 후 부족하면 빈도순 후보에서 추가해 요청 개수를 맞춥니다.
• 상대 휘도 기준으로 정렬한 뒤 역할명을 순서대로 할당합니다.

JSON 출력 형식

다운로드 파일명: chromaflow-palette.json

{
  "generatedAt": "2026-01-01T00:00:00.000Z",
  "colorCount": 6,
  "colors": [
    {
      "role": "Base",
      "hex": "#1A2338",
      "rgb": "rgb(26, 35, 56)",
      "hsl": "hsl(222 37% 16%)",
      "contrastOnWhite": "13.42",
      "contrastOnBlack": "1.56"
    }
  ]
}

사용 시 참고 사항

• 클립보드 복사는 브라우저/권한/프로토콜(HTTPS)에 따라 제한될 수 있습니다.
• 매우 단순한 이미지(단색, 투명 픽셀 다수 등)는 팔레트 다양성이 낮을 수 있습니다.
• GIF 업로드는 첫 프레임 기준으로 처리됩니다.

라이선스

현재 저장소에 별도 라이선스 파일이 없으므로 필요 시 LICENSE를 추가해 주세요.