이미지를 선택하면 가장 많이 사용된 주요 색상 6가지를 자동으로 추출합니다. 모든 처리는 브라우저에서 이루어지며 이미지가 서버로 전송되지 않습니다.
이미지 색상 추출 사용법
- 위 파일 선택 버튼으로 이미지를 업로드합니다 (JPG·PNG·WEBP·GIF 등).
- 잠시 후 이미지에서 가장 자주 사용된 주요 색상 6가지가 표시됩니다.
- 각 색상을 클릭하면 HEX 코드가 클립보드에 복사됩니다.
- 다른 이미지로 다시 시도하려면 파일 선택 버튼을 다시 클릭합니다.
주요 기능
- 이미지에서 주요 색상 6가지 자동 추출
- 한 번 클릭으로 HEX 코드 복사
- 업로드 후 즉시 결과 표시 (수 ms 이내)
- 완전 로컬 처리 — 이미지가 서버로 전송되지 않음
- 모든 이미지 포맷 지원 (브라우저가 디코딩 가능한 모든 형식)
활용 예시
- 제품 사진에서 메인 컬러를 뽑아 브랜드 팔레트 구성
- 참고 이미지의 색감을 그대로 디자인에 적용
- 사진 분위기에 맞는 UI 액센트 색 결정
- 인스타그램 피드의 톤앤매너 분석
- 일러스트·캐릭터의 컬러 스킴 추출
알고리즘
이미지를 작은 크기(최대 200px)로 다운샘플링한 후 각 픽셀의 RGB 값을 16단계로 양자화(quantization)합니다. 이후 가장 빈도가 높은 색을 골라내며, 이미 선택된 색과 너무 가까운 색은 자동으로 제외하여 시각적으로 구분되는 6가지 색이 표시됩니다.
자주 묻는 질문
어떤 이미지 포맷을 지원하나요?
브라우저가 디코딩할 수 있는 모든 포맷을 지원합니다 — JPG, PNG, WEBP, GIF, BMP, SVG 등. 모바일에서 촬영한 HEIC 파일은 일부 브라우저에서 지원되지 않을 수 있습니다.
업로드한 이미지가 서버에 저장되나요?
아니요. 모든 처리는 사용자의 브라우저(JavaScript Canvas API)에서만 이루어지며 이미지가 외부로 전송되지 않습니다. 개인 사진이나 기밀 디자인 시안도 안전하게 사용 가능합니다.
추출되는 색의 개수를 조절할 수 있나요?
현재는 6가지 색이 고정되어 있습니다. 이는 디자인에서 가장 자주 사용되는 팔레트 크기를 기준으로 한 값입니다. 향후 옵션 추가를 검토하고 있습니다.
결과가 실제 이미지와 약간 달라 보이는 이유?
이미지를 16단계로 양자화하기 때문에 매우 가까운 색은 같은 그룹으로 묶입니다. 이는 의도된 동작이며, 너무 비슷한 색이 여러 개 나오는 것을 방지하여 실용적인 팔레트를 제공합니다.