이미지 색상 추출기
사진에서 원하는 색상을 스포이드로 정확하게 추출하거나,
어울리는 대표 색상 팔레트를 자동으로 생성해 보세요.
여기로 이미지 드래그 & 드롭
또는 클릭해서 파일 선택 / Ctrl+V 로 붙여넣기
* 이미지는 사용자의 브라우저 내에서만 안전하게 처리되며 외부 서버로 절대 전송되지 않습니다.
* 이미지 위를 클릭하면 색상이 추출됩니다. 클릭 후 키보드 방향키(↑↓←→)를 누르면 1px 단위로 정밀 이동이 가능합니다.
추출된 색상 정보
이미지 색상 추출기란?
이미지 색상 추출기는 웹 브라우저 안에서 사진이나 일러스트, 디자인 시안 등의 특정 픽셀 색상을 클릭 한 번으로 추출하여 HEX, RGB, HSL, CMYK, OKLCH 등의 색상 코드로 변환해 주는 무료 온라인 유틸리티입니다. 브라우저의 Canvas API를 사용해 데이터를 로컬 기기 내에서 처리하므로, 외부 서버로 이미지가 전송되지 않아 유출 걱정 없이 안전하게 사용할 수 있습니다.
레퍼런스 사이트의 메인 컬러를 파악하거나, 분위기 있는 사진에서 디자인용 컬러 팔레트를 영감받을 때 유용합니다. 스포이드 기능을 통한 정밀 수동 추출뿐만 아니라, 이미지 전체를 스캔하여 비중이 높은 대표 색상을 뽑아내는 '자동 팔레트 생성(Dominant Colors 추출)' 기능도 함께 지원하여 활용도가 매우 높습니다.
사용 방법
이미지 업로드
색상을 뽑아낼 사진을 상단 영역으로 드래그 앤 드롭하거나 클릭하여 첨부합니다. 복사한 이미지를 Ctrl+V 로 바로 붙여넣는 것도 가능합니다.
스포이드 수동 추출
"스포이드 추출" 탭에서 돋보기 UI를 통해 원하는 영역을 클릭합니다. 클릭 후 키보드 방향키를 누르면 인접 픽셀로 1px씩 이동하며 미세 조정이 가능합니다.
팔레트 자동 생성
"팔레트 자동 생성" 탭으로 이동하면 이미지의 주된 색상 8가지가 계산되어 나타납니다. "CSS 변수로 복사"를 눌러 퍼블리싱 작업에 바로 활용하세요.
관련 용어 사전
- HEX (16진수 색상 코드)
- 웹 디자인에서 가장 보편적으로 쓰이는 색상 표현법입니다. Red, Green, Blue 값을 각각 00부터 FF까지의 16진수로 표기하며
#FF5733처럼 6자리 문자열로 나타냅니다. - OKLCH
- Lightness(명도), Chroma(채도), Hue(색상)로 구성된 최신 CSS 컬러 규격입니다. 인간의 실제 시각적 특성과 가장 일치하도록 설계되어, 기존 HSL 방식의 고질적인 밝기 왜곡 문제를 해결했습니다.
- 대표 색상 (Dominant Color)
- 이미지나 디자인 내에서 시각적으로 가장 큰 비중을 차지하여 전체적인 인상을 결정짓는 주조색입니다. 본 도구는 이미지 전체 픽셀을 분석해 상위 8개의 컬러를 자동 추출합니다.
- 미디언 컷 알고리즘 (Median Cut)
- 수많은 픽셀 컬러를 몇 개의 한정된 컬러로 압축(양자화)할 때 쓰이는 알고리즘입니다. 3차원 RGB 색공간에서 가장 분포가 넓은 색상 축을 반으로 쪼개는 과정을 반복하여 대표 팔레트를 고르게 생성해냅니다.
자주 묻는 질문 (FAQ)
- Q.업로드한 이미지가 서버에 저장되나요?
- 아니요, 전혀 저장되지 않습니다. 모든 이미지 처리와 색상 추출 알고리즘은 사용자의 브라우저 내부(로컬 환경)의 Canvas API를 사용하여 실행됩니다. 이미지 데이터는 인터넷을 통해 외부 서버로 절대 전송되지 않으므로, 보안상 민감한 파일이나 미발표 디자인 시안도 안심하고 사용할 수 있습니다.
- Q.지원하는 이미지 파일 형식과 용량은 어떻게 되나요?
- JPG, PNG, GIF, WebP, SVG 등 일반적인 웹 이미지 형식을 모두 지원합니다. 파일 크기 제한은 최대 10MB로, 대부분의 고해상도 사진이나 디자인 시안을 처리하기에 충분한 용량을 제공합니다.
- Q.추출된 색상의 정확도는 어느 정도인가요?
- 캔버스의 픽셀 데이터를 직접 읽어오므로, 픽셀 단위로 100% 정확한 색상(sRGB 기준)을 얻을 수 있습니다. 돋보기 화면을 참고해 클릭한 뒤, 키보드 방향키(↑↓←→)를 사용하여 미세한 색상 차이가 나는 인접 픽셀로 1px씩 이동하며 가장 정확한 색을 짚어낼 수 있습니다.
- Q.제공되는 CMYK 값을 상업용 인쇄(DTP)에 바로 써도 되나요?
- 본 도구가 제공하는 CMYK 값은 RGB 값에서 근사 계산(변환 알고리즘)된 이론적 수치입니다. 실제 전문 인쇄물은 용지 종류나 컬러 프로파일(Japan Color, SWOP 등)의 영향을 크게 받으므로, 본 수치는 참고용 시안 제작에만 사용하시고 최종 인쇄 파일은 일러스트레이터 등 전용 DTP 소프트웨어에서 색상값을 다시 확인하고 보정하는 것을 강력히 권장합니다.
주요 활용 사례
퍼블리싱 및 UI/UX 디자인
클라이언트가 전달한 로고 이미지나 벤치마킹할 레퍼런스 사이트의 스크린샷에서 정확한 브랜드 컬러(HEX)를 추출하여 CSS와 피그마(Figma)에 그대로 적용합니다.
사진과 어울리는 배너 텍스트 컬러 지정
쇼핑몰 메인 배너나 블로그 썸네일을 만들 때, 배경 사진에서 Dominant Color를 추출한 뒤 이를 텍스트 상자나 버튼의 배경색으로 사용하면 톤앤매너가 완벽하게 일치하는 세련된 디자인이 완성됩니다.
영감 기록 및 일러스트레이션 배색
색감이 아름다운 풍경 사진이나 좋아하는 일러스트레이터의 작품에서 인상적인 색 조합(컬러 팔레트)을 뽑아내어, 자신의 오리지널 작품 배색의 아이디어 뼈대로 활용할 수 있습니다.
사진 보정 및 컬러 그레이딩의 기준점
사진 편집 시 특정 부위(예: 인물의 피부톤, 맑은 하늘색)의 RGB 값을 정확한 픽셀 단위 스포이드로 확인하여 화이트 밸런스를 맞추거나 톤 보정의 수치적 근거로 활용합니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.