이미지 색상 추출기 · 팔레트 도구
이미지에서 지배적인 색과 평균색을 브라우저에서 추출해 각 색을 복사 가능한 HEX 값으로 보여 줍니다.
이미지 색상 추출기 · 팔레트 도구 — 아무 이미지나 끌어다 놓으면 그 색 팔레트를 즉시 뽑아냅니다 — 가장 지배적인 색들과 전체 평균색을, 각각 스와치와 클릭 한 번 HEX 복사 버튼과 함께요. 추출할 지배색 개수(2~12개)는 직접 고릅니다. 이미지는 HTML 캔버스를 이용해 전부 브라우저 안에서 읽으며 서버로 절대 업로드되지 않습니다.
이미지 색상 추출기 · 팔레트 도구란?
이미지 색상 추출기는 아무 이미지에서나 지배적인 색과 평균색을 브라우저에서 바로 뽑아 주는 무료 온라인 팔레트 추출 도구입니다. 디자이너, 프론트엔드 개발자, 그리고 브랜드나 무드보드를 만드는 누구나 사진, 로고, 스크린샷을 끌어다 놓고 몇 초 만에 HEX 팔레트를 얻을 수 있습니다. HTML 캔버스의 getImageData로 이미지 픽셀을 읽어 색을 버킷으로 양자화하고, 각 색이 얼마나 자주 등장하는지에 따라 정렬하므로 가장 많이 쓰인 색이 위로 올라옵니다. 팔레트 크기(지배색 개수, 2~12개)를 설정할 수 있고, 각 색은 복사 가능한 HEX 값과 함께 스와치로 표시되며 이미지 전체의 평균색도 함께 보여 줍니다.
이미지 색상 추출기 · 팔레트 도구 사용법
- 이미지를 드롭존에 끌어다 놓거나, 클릭해 기기에서 파일(PNG, JPEG, WebP 또는 브라우저가 열 수 있는 그 밖의 이미지)을 선택합니다.
- 팔레트 크기 입력란에 원하는 지배색 개수를 2부터 12 사이로 설정합니다.
- 평균색 행에서 이미지 전체를 섞은 단일 평균색을 HEX 값과 함께 확인합니다.
- 지배색 목록에서 가장 흔한 색부터 차례로 정렬된 색들을 각각 스와치와 HEX 값과 함께 확인합니다.
- 아무 색 옆의 복사 버튼을 클릭하면 해당 HEX 값이 클립보드에 복사됩니다.
예시
로고에서 브랜드 팔레트 뽑기
로고 PNG를 끌어다 놓고 팔레트 크기를 4로 설정하면 가장 많이 쓰인 네 가지 색을 HEX 스와치로 얻어, 디자인 토큰이나 CSS 변수에 바로 붙여 넣을 수 있습니다.
사진에서 어울리는 배경 톤 찾기
메인 사진을 불러와 평균색 행을 보면 이미지 전체와 조화로운 단일 혼합 HEX 값을 얻어, 섹션 배경이나 폴백 색으로 활용할 수 있습니다.
일러스트에서 더 큰 색 묶음 구성하기
색이 풍부한 일러스트를 끌어다 놓고 팔레트 크기를 12까지 올리면, 이미지에서 차지하는 비중 순으로 정렬된 넓은 지배색 묶음을 추출할 수 있습니다.
자주 묻는 질문
- 어떤 이미지 형식을 사용할 수 있나요?
- 브라우저가 열 수 있는 모든 이미지(드롭존은 image/*를 허용합니다)로, PNG, JPEG, WebP를 포함합니다. 이미지는 HTML 캔버스에 그려지고 그 픽셀을 로컬에서 읽어 색을 추출합니다.
- 지배색은 어떻게 골라지나요?
- 도구는 이미지 픽셀을 읽어 비슷한 색을 같은 버킷으로 묶고, 각 버킷에 들어간 픽셀 수로 정렬합니다. 상위 버킷이 지배색이 되어 가장 흔한 색부터 표시되며, 각각 그 버킷의 평균색으로 나타납니다.
- 색은 몇 개까지 추출할 수 있나요?
- 팔레트 크기를 2~12개의 지배색 사이에서 설정합니다. 그 목록과 별개로 이미지 전체의 평균색이 항상 따로 표시됩니다.
- 색이 원본 이미지와 조금 다르게 보이는 이유는 무엇인가요?
- 속도를 위해 큰 이미지는 읽기 전에 축소되고 비슷한 색은 한 묶음으로 합쳐지므로, 각 스와치는 정확한 한 픽셀의 색이 아니라 묶음의 평균색입니다. 결과는 픽셀 단위 색 추출이 아니라 충실한 대표 팔레트입니다.
- 제 이미지가 어딘가로 업로드되나요?
- 아니요. 이미지는 HTML 캔버스를 사용해 브라우저 안에서 100% 처리됩니다. deftdeck이나 어떤 서버에도 업로드되지 않으므로 오프라인에서도 작동하며 이미지가 비공개로 유지됩니다.