이미지에서 색상 추출 (대표 색상 추출 도구)
이미지를 업로드하면 사진이나 그림에서 사용된 대표 색상(도미넌트 컬러)을 자동으로 추출합니다. 모든 처리는 브라우저 내에서 이루어지며, 이미지는 서버로 전송되지 않습니다.
사용 팁
- 각 색상 견본 아래의 복사 버튼을 클릭하면 HEX 코드를 클립보드에 복사할 수 있어, CSS나 디자인 도구에 바로 붙여넣을 수 있습니다.
- 추출할 색상 수를 4, 8, 12 중에서 선택할 수 있습니다. 단순한 로고 팔레트에는 4색, 사진처럼 복잡한 색조를 자세히 살펴보고 싶다면 12색을 선택하면 차이를 확인하기 쉽습니다.
- PNG 이미지의 투명한 부분은 자동으로 제외되므로, 추출된 색상은 배경이 아닌 피사체 자체의 색상에 집중됩니다.
- 모든 처리는 Canvas API를 사용해 기기의 브라우저 내에서 완결되며, 이미지 데이터가 외부 서버로 전송되는 일은 전혀 없습니다. 민감한 이미지도 안심하고 사용할 수 있습니다.
- 추출된 색상은 등장 빈도가 높은 순서대로 정렬됩니다. 앞쪽에 표시되는 색상일수록 이미지에서 더 넓은 면적을 차지합니다.
자주 묻는 질문
여담 ― 사진에서 브랜드 컬러를 찾는 일
사진이나 제품 패키지에서 '사용된 색상'을 추출하는 작업은 웹 디자인과 그래픽 디자인 현장에서 흔히 일어나는 일이다. 브랜드의 비주얼 가이드라인을 만들 때, 디자이너는 흔히 기존 사진 소재나 로고에서 대표 색상을 뽑아낸 뒤, 이를 바탕으로 기업 색상이나 강조 색상의 후보를 검토한다. 예전에는 스포이트 도구로 눈으로 하나씩 색을 뽑아내던 작업을, 지금은 이 도구가 사용하는 것과 같은 '대표 색상 추출' 알고리즘으로 자동화할 수 있게 되었다.
색상 추출에는 다양한 알고리즘이 있다. 이 도구가 채택한 '버킷 양자화 + 빈도 집계' 방식은 각 픽셀의 RGB 값을 대략적인 그룹으로 반올림하고 각 그룹이 몇 번 등장했는지 세는 단순한 방식이지만, 계산 비용이 낮고 빠르게 동작한다는 장점이 있다. 반면 k-means 같은 클러스터링 알고리즘을 사용하면 색 공간상의 거리를 기준으로 더 자연스러운 그룹화를 할 수 있지만, 그만큼 계산량이 늘어나 처리가 무거워진다.
흥미로운 점은 같은 이미지라도 '몇 가지 색을 추출하는지'에 따라 인상이 완전히 달라 보인다는 것이다. 4가지 색만 추출하면 이미지 전체의 대략적인 색조(따뜻한 계열인지 차가운 계열인지 등)가 드러나는 반면, 12가지까지 늘리면 그림자나 반사광에 의한 미묘한 색 차이까지 포착된다. 용도에 맞게 추출 개수를 조정하면 같은 이미지에서도 서로 다른 정밀도의 정보를 얻을 수 있다.