이미지 색상 추출이란
사진이나 그림 파일에서 사용된 색상의 정확한 HEX·RGB 코드를 알아내는 도구입니다. 디자인 시안의 색을 따오거나, 브랜드 컬러를 코드로 정리하거나, 사진의 분위기에 맞는 색 조합을 찾을 때 유용합니다. 특정 지점의 색을 짚어내는 스포이드와 이미지 전체의 대표 색을 자동으로 뽑는 팔레트 기능을 함께 제공하며, 모든 처리는 브라우저 안에서만 이뤄져 이미지가 외부로 전송되지 않습니다.
사용 방법
- ① 이미지를 선택하거나 카드 영역으로 끌어다 놓습니다(JPG·PNG·WebP 등 지원).
- ② 이미지의 원하는 지점을 클릭(모바일은 터치)하면 스포이드가 그 픽셀의 HEX·RGB 색상을 보여줍니다.
- ③ 색상 코드 칩을 누르면 클립보드로 복사됩니다.
- ④ 아래 자동 추출 팔레트에서 개수를 조절하고 대표 색상 스와치를 클릭해 복사하거나, CSS 변수·JSON·Tailwind·PNG로 내보냅니다.
추출 원리
스포이드는 캔버스에 그린 이미지에서 클릭한 좌표의 픽셀 색상값을 직접 읽어 HEX와 RGB로 변환해 보여 줍니다. 자동 팔레트는 이미지 전체 픽셀을 훑되 각 색상 채널을 일정 단위로 묶어 세는 색상 양자화 방식으로 가장 자주 등장하는 색을 골라냅니다. 이때 서로 너무 비슷한 색은 걸러 다양한 대표 색이 나오게 하며, 픽셀이 아주 많은 큰 이미지는 일정 간격으로 표본을 뽑아 빠르게 계산합니다. 큰 이미지는 화면에 맞게 비율을 유지한 채 축소해 표시하지만 색상값 자체는 원본 픽셀에서 읽으므로 정확합니다. 투명한 픽셀은 집계에서 제외되어, 배경이 비어 있는 PNG에서도 실제로 쓰인 색만 뽑힙니다.
활용 팁
- 스포이드 — 로고나 버튼 등 특정 부분의 정확한 색을 짚어낼 때.
- 자동 팔레트 — 사진 전체의 분위기를 담은 색 조합을 빠르게 얻을 때. 추출 색상 수(4~12개)와 명도순 정렬을 조절할 수 있습니다.
- 복사한 코드는 CSS, 디자인 툴, 문서 어디에나 붙여넣어 사용할 수 있습니다.
- PNG로 저장 — 추출한 팔레트를 HEX 라벨이 붙은 색상 띠 이미지로 내려받아 공유·보관할 수 있습니다.
- 웹 개발이라면 CSS 변수나 Tailwind 설정으로, 문서 정리라면 JSON 배열로 내보내면 그대로 붙여 쓰기 좋습니다.
설치 없이 무료로
프로그램을 설치하거나 회원 가입을 할 필요 없이 웹 브라우저만 있으면 바로 사용할 수 있는 무료 도구입니다. 크롬·엣지·사파리 등 최신 브라우저에서 동작하고 PC와 모바일 어디서나 같은 방식으로 쓸 수 있으며, 이미지가 기기 밖으로 나가지 않으므로 아직 공개하지 않은 시안이나 개인 사진도 안심하고 다룰 수 있습니다. 디자인 작업뿐 아니라 마음에 드는 사진의 색 조합을 참고 자료로 모아 둘 때도 손쉽게 활용할 수 있습니다.
자주 묻는 질문
이미지가 서버로 전송되나요?
아니요. 색상 추출과 팔레트 생성은 모두 사용자의 브라우저에서만 처리되며 이미지가 인터넷으로 업로드되지 않습니다.
스포이드로 특정 지점의 색을 알 수 있나요?
네. 이미지를 클릭하거나 모바일에서 터치하면 해당 픽셀의 색상이 HEX와 RGB 코드로 표시되고, 코드를 누르면 복사됩니다.
대표 색상은 어떻게 추출되나요?
이미지 전체 픽셀의 색상을 일정 단위로 묶어 빈도를 계산하는 색상 양자화 방식으로 가장 자주 등장하는 대표 색상 6~8개를 자동으로 뽑습니다.
추출한 색상 개수를 바꿀 수 있나요?
네. 슬라이더로 4~12개 사이에서 추출할 색상 수를 조절할 수 있고, 명도순 정렬 옵션으로 밝기 순서대로 정렬할 수 있습니다.
어떤 형식으로 내보낼 수 있나요?
각 색상 코드를 개별 복사하거나, 팔레트 전체를 CSS 변수·JSON 배열·Tailwind 설정 형태로 복사할 수 있고, HEX 라벨이 붙은 팔레트 PNG 이미지로도 저장할 수 있습니다.
어떤 이미지 형식을 지원하나요?
JPG, PNG, WebP 등 브라우저가 표시할 수 있는 일반 이미지 형식을 지원합니다.