이미지 색상 추출 (팔레트)
사진·이미지에서 대표 색상 팔레트를 뽑고 HEX·RGB로 복사합니다. 색상 개수 조절, 스포이드, CSS 변수 일괄 복사. 브라우저에서만 처리.
사진·이미지에서 대표 색상 팔레트를 뽑아냅니다. 브랜드 컬러 정하기, 디자인 배색, 블로그 톤앤매너 잡기에 유용합니다. 이미지는 브라우저 안에서만 처리되어 서버로 업로드되지 않습니다.
스포이드 이미지를 클릭하면 그 지점의 색을 뽑습니다
이미지 색상 추출 (팔레트)란?
마음에 드는 사진이나 디자인 이미지에서 주요 색상을 뽑아내고 싶을 때 쓰는 색상 팔레트 추출 도구입니다. 이미지를 올리면 가장 많이 쓰인 대표 색상들을 자동으로 골라 HEX·RGB 코드와 함께 보여 줍니다. 브랜드 컬러를 정하거나, 무드보드·배색을 짜거나, 블로그·PPT의 톤앤매너를 맞출 때 유용합니다. 뽑을 색상 개수를 3~16개로 조절할 수 있고, 각 색 옆에는 그 색이 이미지에서 차지하는 대략적 비중(%)이 표시됩니다. 스와치를 클릭하면 HEX 코드가 바로 복사되고, 전체 팔레트를 HEX 목록·RGB 목록·CSS 변수·배열 형태로 한 번에 복사할 수 있어 코드에 바로 붙여넣기 좋습니다. 정확히 원하는 지점의 색이 필요하면 스포이드로 이미지의 특정 픽셀을 클릭해 색을 뽑을 수도 있습니다. 모든 처리는 브라우저 안에서만 이뤄져 이미지가 서버로 업로드되지 않습니다. 설치·회원가입 없이 무료입니다.
사용 방법
- 색상을 추출할 이미지를 끌어다 놓거나 클릭해서 선택합니다.
- 뽑을 색상 개수를 슬라이더로 조절합니다.
- 스와치를 클릭해 HEX를 복사하거나, "전체 복사"로 팔레트를 한 번에 가져옵니다.
- 특정 지점의 색이 필요하면 아래 스포이드에서 이미지를 클릭합니다.
이미지 색상 추출 (팔레트) 사용 가이드
실제 작업에서 이 도구를 어떻게 쓰는지, 무엇을 조심해야 하는지 정리했습니다.
대표 색상은 어떻게 골라지나
이 도구는 이미지를 작게 줄인 뒤 각 픽셀의 색을 비슷한 것끼리 묶고(양자화), 가장 많이 등장한 묶음의 평균색을 대표 색으로 뽑습니다. 그래서 사진의 전반적인 분위기를 이루는 색이 위쪽에 오고, 각 색 옆의 %는 그 색이 이미지에서 차지하는 대략적인 비중입니다.
이 방식은 빠르고 직관적이지만 근사치입니다. 아주 정밀한 배색이 필요하면 여러 개를 뽑아 비교하거나, 스포이드로 원하는 지점의 정확한 색을 직접 집으세요.
- 색상 개수를 늘리면 미묘한 색조까지, 줄이면 핵심 색만 뽑힙니다.
- 스와치를 클릭하면 HEX가 복사되고, "전체 복사"로 팔레트를 한 번에 가져옵니다.
- CSS 변수 형식으로 복사하면 :root { --color-1 … } 형태라 스타일시트에 바로 붙습니다.
이럴 때 씁니다
브랜드 컬러를 사진 한 장에서 뽑아 로고·배너에 통일감을 주거나, 무드보드의 색을 코드로 옮기거나, 블로그·PPT의 배경·강조색을 사진 톤에 맞출 때 유용합니다.
모든 처리가 브라우저 안에서만 이뤄지므로 미공개 시안이나 개인 사진에서도 안전하게 색을 뽑을 수 있습니다. HEX 코드가 정확히 어떤 색인지 서로 변환해 보려면 색상 변환기(color)를 함께 쓰세요.
자주 묻는 질문
대표 색상은 어떻게 뽑나요?
이미지를 작게 줄인 뒤 비슷한 색끼리 묶어, 가장 많이 쓰인 순서로 대표 색을 고릅니다. 정밀한 디자인 도구의 결과와 다소 다를 수 있는 근사치입니다.
CSS 변수로 바로 쓸 수 있나요?
네. 복사 형식을 "CSS 변수"로 고르면 :root { --color-1: … } 형태로 복사되어 스타일시트에 바로 붙여넣을 수 있습니다. HEX 목록·RGB·배열 형식도 지원합니다.
특정 부분의 색만 알고 싶어요.
아래 스포이드 영역에서 이미지를 클릭하면 그 지점의 정확한 HEX·RGB 색을 뽑아 복사할 수 있습니다.
이미지가 서버로 업로드되나요?
아니요. 모든 처리는 브라우저 안에서만 이뤄지며 이미지가 서버로 전송·저장되지 않습니다.