이미지 · 2026년 7월 11일 · 읽는 시간 4분
사진에서 색상 추출, 이제 포토샵 없이도 된다
레퍼런스 사이트에서 본 배경색이 마음에 드는데, 정확히 어떤 색인지 HEX 코드를 알고 싶다.
색상 추출이 필요한 상황
디자인 작업하다 보면 자주 생긴다.
- 로고/브랜드 이미지 → 정확한 브랜드 컬러 추출
- 레퍼런스 사진 → 마음에 드는 색상 HEX 코드 확인
- 제품 사진 → 배경색 또는 주요 컬러 추출
- UI 디자인 → 기존 화면에서 색상 일치시키기
- 그림/일러스트 → 팔레트 구성 참고용
- 인테리어/패션 → 어울리는 색 조합 찾기
포토샵 스포이드 도구 쓰면 되긴 하는데, 그러려면 포토샵이 있어야 하고, 실행하는 데만 30초가 넘는다.
기존 방법의 문제
- 포토샵 → 유료, 무거움, 간단한 색 추출 하나에 과함
- Figma → 디자인 파일 열어야 쓸 수 있음, 이미지에서 바로 스포이드 불편
- 브라우저 개발자 도구 → 웹 화면에서는 가능하지만 이미지 파일은 별도로 못 함
- 온라인 색상 추출 사이트 → 서버에 파일 올려야 함, 느림
- 윈도우 색 선택 도구 → HEX 코드로 바로 복사 안 됨
그냥 이미지 올리고 클릭하면 HEX 코드 나오는 거 없나 해서 만들었다.
이런 기능으로 만들었다
Canvas API로 이미지를 렌더링하고 클릭한 픽셀의 색상값을 읽어온다. 파일이 서버로 안 간다.
주요 기능:
- 클릭 스포이드 → 이미지에서 원하는 픽셀 클릭하면 색상 추출
- HEX 코드 복사 → 클릭 한 번으로 클립보드에 복사
- RGB 값 확인 → R/G/B 각각의 값 표시
- HSL 값 확인 → 색조/채도/명도
- 색상 히스토리 → 추출한 색상 목록 저장
- 주요 색상 팔레트 → 이미지 전체에서 자주 등장하는 색상 자동 추출
활용 예시:
- 브랜드 가이드라인 색상 코드 확인
- 사진에서 팔레트 생성 → CSS에 바로 적용
- 로고 색상 추출 → 시안 작업에 활용
- 인테리어 사진 → 벽지/가구 색상 코드 추출
실제로 써보니
좋은 점:
- 클릭 한 번으로 HEX 코드까지 → 복사도 바로 됨
- 여러 색상 히스토리 유지 → 비교하면서 쓸 수 있음
- 자동 팔레트 추출 → 이미지 전체 색감 파악 빠름
- 파일 서버 업로드 없음 → 사내 자료, 개인 사진 모두 안심
한계:
- 그라디언트 영역은 정확한 색 하나 집기 어려움
- 모바일에서 작은 영역 정밀 클릭은 불편할 수 있음
- CMYK 값은 지원 안 함 → 인쇄 작업엔 별도 변환 필요
사용법
- 이미지 업로드 (드래그 앤 드롭 가능)
- 원하는 색상 영역 클릭
- HEX/RGB/HSL 코드 확인 및 복사
스포이드 도구는 항상 필요한데, 포토샵 없어도 이제 된다.
써보기
이미지에서 HEX 코드, 클릭 한 번으로.
#색상추출 #스포이드 #HEX코드 #이미지색상 #컬러피커 #디자인도구