이미지에서 색상 추출 (대표 색상 추출 도구)

이미지를 업로드하면 사진이나 그림에서 사용된 대표 색상(도미넌트 컬러)을 자동으로 추출합니다. 모든 처리는 브라우저 내에서 이루어지며, 이미지는 서버로 전송되지 않습니다.

마지막 업데이트: 2026-09-03

이미지에서 색상을 추출하는 방법

사진이나 일러스트, 로고 이미지에서 「자주 사용된 색상」을 알고 싶을 때, 스포이트 도구로 한 색씩 뽑아내는 작업은 번거롭습니다. 이 도구는 이미지를 업로드하기만 하면 이미지에서 넓은 면적을 차지하는 대표 색상(도미넌트 컬러)을 자동으로 나열해 주며, HEX 코드와 RGB 값을 바로 복사해 CSS나 Figma, Photoshop 등 사용 중인 디자인 도구에 곧바로 붙여넣을 수 있게 해 줍니다.

내부적으로는 이미지를 브라우저의 Canvas 요소에 그린 뒤 픽셀 데이터를 읽어 들입니다. 비슷한 색상은 하나의 그룹으로 묶어(양자화) 그룹별 등장 횟수를 세고, 빈도가 높은 그룹을 대표 색상으로 선택합니다. 투명 PNG의 투명한 부분은 이 집계에서 자동으로 제외되므로, 배경이 비치는 이미지라도 피사체 자체의 색상을 중심으로 결과가 나옵니다. 큰 이미지는 분석 전에 내부적으로 축소되므로 수 메가픽셀 크기의 사진도 거의 즉시 처리됩니다. 모든 계산이 브라우저 안에서 이루어지기 때문에 이미지 데이터가 기기 밖으로 나가는 일이 없어, 민감하거나 사적인 사진에도 안심하고 사용할 수 있습니다.

이미지에서 색상을 추출하는 단계

이미지를 업로드합니다 드롭 영역에 이미지 파일을 드래그 앤 드롭하거나, 클릭하여 파일 선택 대화 상자에서 이미지를 고릅니다.
추출할 색상 수를 선택합니다 "추출할 색상 수"에서 4, 8, 12 중 하나를 선택합니다. 이미지를 다시 업로드하지 않아도 선택에 따라 결과가 즉시 다시 계산됩니다.
추출된 색상 견본을 확인합니다 등장 빈도가 높은 순서대로 색상 견본이 나열됩니다. 각 견본에는 HEX 코드와 RGB 값이 함께 표시됩니다.
HEX 코드를 복사합니다 견본 아래의 복사 버튼을 클릭하면 해당 HEX 코드가 클립보드에 복사되어 CSS나 디자인 도구에 바로 붙여넣을 수 있습니다.

더 잘 활용하기 위한 팁

각 색상 견본 아래의 복사 버튼을 클릭하면 HEX 코드를 클립보드에 복사할 수 있어, CSS나 디자인 도구에 바로 붙여넣을 수 있습니다.
추출할 색상 수를 4, 8, 12 중에서 선택할 수 있습니다. 단순한 로고 팔레트에는 4색, 사진처럼 복잡한 색조를 자세히 살펴보고 싶다면 12색을 선택하면 차이를 확인하기 쉽습니다.
PNG 이미지의 투명한 부분은 자동으로 제외되므로, 추출된 색상은 배경이 아닌 피사체 자체의 색상에 집중됩니다.
모든 처리는 Canvas API를 사용해 기기의 브라우저 내에서 완결되며, 이미지 데이터가 외부 서버로 전송되는 일은 전혀 없습니다. 민감한 이미지도 안심하고 사용할 수 있습니다.
추출된 색상은 등장 빈도가 높은 순서대로 정렬됩니다. 앞쪽에 표시되는 색상일수록 이미지에서 더 넓은 면적을 차지합니다.

이런 상황에서 활용할 수 있습니다

로고 이미지로 배색안 만들기

기존 로고 이미지를 업로드하면 로고에 사용된 색상을 HEX 코드로 뽑아낼 수 있어, 웹사이트나 슬라이드의 배색을 로고에 맞춰 통일하고 싶을 때 유용합니다.

제품 사진에서 브랜드 컬러 후보 찾기

패키지나 제품 사진의 대표 색상을 살펴보면 기업 색상이나 캠페인 페이지의 강조 색상을 검토할 때 구체적인 참고 자료가 됩니다.

일러스트나 사진의 색상 균형 파악하기

추출할 색상 수를 4색과 12색으로 전환하면 이미지 전체의 대략적인 색조와, 세부까지 포함한 색상 구성을 모두 확인할 수 있습니다.

CSS나 디자인 도구로 색상 전달하기

추출한 HEX 코드를 복사해 CSS 변수나 Figma·Photoshop의 색상 선택기에 그대로 붙여넣을 수 있어, 색상을 눈대중으로 옮겨 적는 수고를 덜 수 있습니다.

용어집

도미넌트 컬러: 이미지에서 가장 넓은 면적을 차지하거나 가장 자주 등장하는 대표적인 색상을 말합니다. 이 도구가 추출해 나열하는 견본은 바로 이 도미넌트 컬러에 해당하며, 이미지에서 차지하는 비중 순으로 정렬됩니다.
HEX 코드: 색상의 RGB 각 성분을 16진수 두 자리씩으로 나타내는 표기법입니다. 예를 들어 "#3366cc"처럼 "#" 뒤에 빨강, 초록, 파랑 순으로 표시되며, CSS와 디자인 도구에서 널리 사용됩니다.
RGB 값: 빛의 삼원색인 빨강(Red)·초록(Green)·파랑(Blue)을 각각 0~255 사이의 숫자로 나타내는 색상 지정 방식입니다. 세 값의 조합으로 거의 모든 색을 표현할 수 있습니다.
색상 양자화: 비슷한 색상을 하나로 묶어 더 적은 수의 그룹으로 정리하는 처리를 말합니다. 이 도구는 RGB 각 성분을 32 단위 그룹으로 나누어, JPEG 압축 등으로 생기는 미세한 색상 차이를 같은 색으로 집계합니다.
알파값(투명도): 이미지의 픽셀마다 불투명도를 나타내는 값입니다. 투명 PNG처럼 배경이 비치는 부분은 알파값이 낮으며, 이 도구는 색상 집계 대상에서 해당 픽셀을 자동으로 제외합니다.
Canvas API: 브라우저에서 이미지나 그래픽을 그리고 분석하기 위한 자바스크립트 기능입니다. 이 도구는 이를 이용해 이미지를 픽셀 단위로 읽어 들이고, 서버로 전송하지 않은 채 기기 안에서 색상을 추출합니다.

자주 묻는 질문

이 도구는 이미지를 대략적인 색상 그룹으로 양자화한 뒤, 가장 빈도가 높은 그룹의 평균 색상을 대표 색상으로 반환하는 간단한 알고리즘을 사용합니다. 이미지의 전체적인 색조를 빠르게 파악하는 용도로는 충분하지만, k-means와 같이 전문 색상 팔레트 도구에서 사용하는 엄밀한 클러스터링 방식만큼 정밀하지는 않다는 점을 참고해 주세요.

아니요, 저장되지 않습니다. 이 도구는 Canvas API를 사용해 이미지 로딩부터 색상 추출까지 모든 과정을 브라우저 내(클라이언트 측)에서 처리합니다. 이미지 데이터가 서버로 전송되는 일이 전혀 없으므로, 민감한 이미지도 안전하게 사용할 수 있습니다.

브라우저의 태그로 표시할 수 있는 JPEG, PNG, WebP, GIF 등 일반적인 이미지 형식이라면 대부분 읽을 수 있으며, 실제로는 사용 중인 브라우저의 파일 선택 창이 허용하는 형식에 따라 달라집니다.

네. 각 색상은 HEX 코드(예: #3366cc)로 표시되며, 클릭 한 번으로 클립보드에 복사할 수 있어 Figma, Photoshop, CSS 등 HEX 색상 값을 지원하는 모든 도구에 바로 붙여넣어 사용할 수 있습니다.

여담 ― 사진에서 브랜드 컬러를 찾는 일

사진이나 제품 패키지에서 '사용된 색상'을 추출하는 작업은 웹 디자인과 그래픽 디자인 현장에서 흔히 일어나는 일입니다. 브랜드의 비주얼 가이드라인을 만들 때, 디자이너는 흔히 기존 사진 소재나 로고에서 대표 색상을 뽑아낸 뒤, 이를 바탕으로 기업 색상이나 강조 색상의 후보를 검토합니다. 예전에는 스포이트 도구로 눈으로 하나씩 색을 뽑아내던 작업을, 지금은 이 도구가 사용하는 것과 같은 '대표 색상 추출' 알고리즘으로 자동화할 수 있게 되었습니다.

색상 추출에는 다양한 알고리즘이 있습니다. 이 도구가 채택한 '버킷 양자화 + 빈도 집계' 방식은 각 픽셀의 RGB 값을 대략적인 그룹으로 반올림하고 각 그룹이 몇 번 등장했는지 세는 단순한 방식이지만, 계산 비용이 낮고 빠르게 동작한다는 장점이 있습니다. 반면 k-means 같은 클러스터링 알고리즘을 사용하면 색 공간상의 거리를 기준으로 더 자연스러운 그룹화를 할 수 있지만, 그만큼 계산량이 늘어나 처리가 무거워집니다.

흥미로운 점은 같은 이미지라도 '몇 가지 색을 추출하는지'에 따라 인상이 완전히 달라 보인다는 것입니다. 4가지 색만 추출하면 이미지 전체의 대략적인 색조(따뜻한 계열인지 차가운 계열인지 등)가 드러나는 반면, 12가지까지 늘리면 그림자나 반사광에 의한 미묘한 색 차이까지 포착됩니다. 용도에 맞게 추출 개수를 조정하면 같은 이미지에서도 서로 다른 정밀도의 정보를 얻을 수 있습니다.

모든 여담 보기