이미지 색상 추출
이미지에서 주요 색상 팔레트를 추출합니다
이미지를 드래그하거나 클릭하여 업로드
📖 이미지 대표색, 평균값이 아니라 클러스터링을 쓰는 이유 가이드 보기
이미지 색상 추출기
이미지를 80×80px로 축소한 뒤 Canvas getImageData로 픽셀 배열을 읽고, K-means와 유사한 방식으로 반복 군집화(10회 반복)해 주요 색상을 뽑습니다. 초기 중심점은 픽셀 배열을 요청한 색상 수만큼 균등 간격으로 샘플링해 잡고, 매 반복마다 모든 픽셀을 가장 가까운 중심점에 배정한 뒤 각 군집의 평균 RGB로 중심점을 다시 계산합니다. 이미지의 실제 고유 색상 수가 요청한 색상 수보다 적으면(단색 로고, 아이콘, 플랫 일러스트 등) 여러 중심점이 같은 색으로 수렴하거나 픽셀을 하나도 배정받지 못하는 "빈 군집"이 생길 수 있는데, 이런 경우를 그대로 표시하면 같은 색 스와치가 여러 번 겹치거나 비중 0%짜리 유령 색상 칩이 뜨게 되므로 색상별로 픽셀 수를 합산해 중복은 하나로 합치고 픽셀이 전혀 배정되지 않은 군집은 결과에서 제외합니다.
자주 묻는 질문
색상 추출 알고리즘은 정확히 어떻게 동작하나요?
이미지를 80×80px로 축소해 픽셀 수를 줄인 뒤, 요청한 색상 수만큼 초기 중심점을 균등 샘플링으로 잡고, "모든 픽셀을 가장 가까운 중심점에 배정 → 각 군집의 평균색으로 중심점 갱신"을 10회 반복하는 K-means 유사 클러스터링을 사용합니다.
요청한 색상 수보다 실제로 적게 나올 수 있나요?
네. 이미지의 고유 색상이 요청 수보다 적으면(예: 단색 배경 로고에 색상 수 10 설정) 여러 초기 중심점이 같은 색으로 수렴합니다. 이 경우 동일 색상은 하나로 합치고 픽셀을 전혀 배정받지 못한 중심점은 결과에서 제외하므로, 최종 팔레트 칩 수가 설정값보다 적게 나오는 것이 정상입니다.
대표 색상(dominant color)과 평균 색상은 다른가요?
네, 다릅니다. 대표 색상은 클러스터링으로 찾은, 이미지에서 실제로 많이 나타나는 색상 군집의 중심값이고, 평균 색상은 모든 픽셀 RGB를 단순 산술 평균한 값입니다. 예를 들어 빨강과 파랑이 반반인 이미지는 평균 색상이 보라색으로 나오지만, 이 도구가 추출하는 팔레트에는 실제 이미지에 존재하는 빨강과 파랑이 각각 표시됩니다.
투명 픽셀도 포함되나요?
아니요. 알파 채널 값이 128 이하인(50% 미만 불투명도) 픽셀은 군집화 대상에서 제외됩니다. PNG 투명 배경 이미지에서 배경이 팔레트에 섞여 나오는 것을 막기 위한 처리입니다.
파일이 서버로 전송되나요?
아니요. 이미지를 80×80px로 축소한 뒤 Canvas의 getImageData로 픽셀 배열을 직접 읽어 클러스터링하므로, 원본 이미지가 브라우저 밖으로 전송되지 않습니다.
비율(%)은 무엇을 나타내나요?
해당 색상 군집에 배정된 픽셀 수를 전체(불투명) 픽셀 수로 나눈 값입니다. 80×80으로 축소된 샘플 기준이므로 원본 해상도의 정확한 픽셀 비율과는 약간 다를 수 있습니다.
RGB 값도 볼 수 있나요?
현재는 HEX 코드만 제공됩니다. RGB나 HSL 등 다른 형식이 필요하면 color-converter 도구로 변환할 수 있습니다.
어떤 이미지 형식을 지원하나요?
PNG, JPG, WebP, GIF 등 브라우저의 <img> 태그와 Canvas가 디코딩할 수 있는 모든 이미지 형식을 지원합니다.