언제 쓰나
거래처가 보낸 사진에서 브랜드 컬러 후보를 뽑을 때, 무드 보드 / 인스피레이션 이미지의 dominant color 를 디자인 시스템에 reverse-engineer 할 때, 일러스트 의 색 분포를 객관적으로 확인할 때, 사진 위 텍스트 색을 정할 때 (배경의 주요 색을 알아야 텍스트 대비를 결정).
color-palette 와 차별점
| 도구 | 입력 | 출력 | |---|---|---| | color-palette | 한 색 (brand color) | 11-stop 톤 스케일 (Tailwind 50~950) | | image-palette | 이미지 한 장 | dominant N 색 (3~12) |
정반대 방향. 하나는 한 색을 펼치고, 다른 하나는 이미지를 압축.
알고리즘
- k-means 클러스터링 (sRGB 공간 직접). 결정론적 init (mulberry32 시드 42), max 20 iteration.
- 256×256 downsample — nearest-neighbor. 100K+ 픽셀도 1 초 안에.
- Web Worker — 메인 스레드 안 멈춤. 큰 이미지에서 UI 잔잔.
- alpha < 128 픽셀 제외 — PNG 투명 / SVG 빈 공간이 결과에 영향 안 줌.
출력 3 형식
- hex 리스트 — 한 줄에 하나. 빠른 메모용.
- CSS variables —
--brand-1: #...; /* weight 35.2% */. weight 주석. - Tailwind v4 @theme —
--color-brand-1: oklch(...);블록. 즉시 Tailwind config 에 붙여넣기 가능.
안 맞는 경우
- 정밀한 디자인 시스템 — k-means 는 dominant color 를 뽑지만 완벽한 brand spec 은 아님. 시작점으로만, 디자이너가 미세 조정.
- 로고에서 정확한 색 추출 — 로고는 보통 SVG. SVG 의 raw
fill속성을 파싱하는 게 정확. 본 도구는 raster 픽셀 기반. - 시간순 색 변화 (영상의 frame) — 본 도구는 정적 이미지. 영상은 frame 추출 후 한 장씩.
보안
사진 / 디자인 시안 / 무드 보드를 업로드해도 외부로 전송되지 않습니다. Canvas getImageData → Web Worker k-means 산수만 — 외부 API 호출 0KB.
이미지는 페이지 안에서만
사진 / 디자인 시안 / 무드 보드를 업로드해도 외부로 전송되지 않습니다. Canvas getImageData → Web Worker k-means 산수만 — 외부 API 호출 0KB. 결과 색 토큰도 페이지 안에 머무릅니다.