이미지 컬러 팔레트 추출기

이 도구의 역할

UI 시안, 브랜드 자산, 제품 사진, 스톡 이미지 — 어떤 그림이든 드롭하면, 스타일시트, 디자인 토큰, Tailwind 테마에 바로 붙여넣을 수 있는 팔레트를 돌려줍니다. 도구는 가시 픽셀을 k-means로 클러스터링하고, 각 클러스터를 점유율과 함께 스와치로 보여주며 디자인 도구용 HEX, 레거시 CSS용 RGB / HSL, 모던 컬러 파이프라인용 OKLCH 네 가지 색 공간 표기를 함께 제공합니다.

사용 방법

1. 업로드 카드에 이미지를 드롭하거나, 카드를 클릭해 파일을 선택하거나, 이미지를 복사한 상태에서 Ctrl + V로 붙여넣습니다.
2. 컨트롤 조정: 추출할 색상 수 (3~16), 정렬 기준 (빈도 / 색상 / 명도), 필터 (투명 픽셀 제외 / 거의 흰색 제외).
3. 스와치 상단을 클릭하면 HEX가 복사됩니다. 아래의 RGB / HSL / OKLCH 행을 클릭하면 해당 표기가 복사됩니다.
4. 일괄 복사: CSS 변수 복사는 :root { --color-1: …; } 블록, JSON 복사는 {hex, rgb, weight} 배열, Tailwind 복사는 theme.extend.colors.palette 스니펫을 출력합니다.

알고리즘 설명

k-means는 가장 간단하면서도 디자이너 친화적인 팔레트를 만들어내는 클러스터링 방법입니다. 이미지는 최장 변 200픽셀로 다운샘플링됩니다 — 4K 사진은 약 4만 개의 샘플 픽셀로 압축되며, 최신 노트북에서 100ms 이내로 안정적인 중심점에 수렴할 만큼 충분합니다. 각 픽셀은 제곱 RGB 거리가 가장 짧은 중심점에 할당되고, 중심점은 클러스터 평균으로 갱신되며, 중심점이 더 이상 움직이지 않거나 24회 반복할 때까지 루프가 돕니다.

두 가지 실용적인 보정이 추가되어 있습니다. 1) ΔRGB < 6인 중심점들은 병합되어 거의 똑같이 보이는 스와치가 나란히 출력되지 않도록 합니다. 2) 선택형 사전 필터가 투명 픽셀과 거의 흰색 픽셀(휘도 > 0.95)을 제거해, 알고리즘이 피사체가 아닌 여백에 끌려가지 않도록 합니다.

출력 포맷

• HEX — 범용 호환 포맷. 스와치 상단을 클릭하면 복사됩니다.
• RGB — 공백 구분 모던 문법 rgb(160 90 44). 모든 현대 브라우저에서 지원됩니다.
• HSL — 스와치 안에서 색상 / 채도 / 명도를 빠르게 조정할 때 편리합니다.
• OKLCH — 지각적으로 균일하여 디자인 토큰과 색상 회전이 필요한 컬러 파이프라인에 적합. HSL과 달리 명도 점프가 발생하지 않습니다.
• 비중 — 각 클러스터가 원본 픽셀에서 차지한 비율. 가장 큰 값은 브랜드 액센트로, 나머지는 보조 색으로 활용하기 좋습니다.

활용 시나리오

• 클라이언트가 제공한 기존 브랜드 자산에서 주요 색상을 역산해 디자인 시스템을 재구성합니다.
• 포트폴리오 사이트나 커머스 상세 페이지에서 메인 비주얼로부터 파생한 CSS 토큰을 만듭니다.
• 경쟁사 분석 시, 자사와 경쟁사 랜딩 페이지의 색 구성 비율을 나란히 두고 차이를 파악합니다.
• 아티클 썸네일을 정한 뒤, 헤딩과 인용 블록 색을 이미지 팔레트에 맞춰 선택합니다.

프라이버시

모든 처리는 클라이언트에서 이루어집니다. 이미지는 HTMLImageElement로 디코딩되고, 보이지 않는 Canvas에 축소 그려지고, JavaScript에서 k-means가 실행됩니다. 이미지에 대한 어떤 바이트도 서버로 전송되지 않습니다. 확인하고 싶다면 네트워크 패널을 열어두세요. 새 이미지를 로드할 때마다 깨끗한 로그가 표시됩니다.

관련 도구

• 컬러 팔레트 생성기 — 하나의 기준 HEX에서 보색, 유사색, 삼각, 사각 배색을 생성.
• 컬러 셰이드 생성기 — 임의의 기준 색에서 9단계 명도 램프를 추출.
• 색상 변환기 — HEX, RGB, HSL을 실시간 미리보기와 함께 상호 변환.
• 색상 명도 대비 검사기 — 팔레트가 준비되면 각 쌍이 WCAG AA / AAA를 만족하는지 검증.