이미지

이미지 색상 추출기

이미지를 업로드하고 원하는 위치를 클릭하면 해당 픽셀의 색상 코드를 추출합니다. 주요 색상도 자동으로 분석합니다.

파일은 서버로 업로드되지 않습니다

모든 처리는 브라우저 안에서만 진행됩니다.

이미지를 드래그하거나 클릭해서 업로드

JPG, PNG, GIF, WebP, SVG 지원

이미지 위에 마우스를 올리거나 클릭하세요

사용 방법

이미지 파일을 드래그하거나 클릭해서 업로드합니다. (JPG, PNG, WebP 등)
이미지 위에 마우스를 올리면 해당 픽셀의 색상이 실시간으로 표시됩니다.
원하는 위치를 클릭하면 색상이 오른쪽 패널에 저장됩니다.
HEX, RGB, HSL 형식을 클릭해 클립보드에 복사할 수 있습니다.
주요 색상은 이미지 업로드 시 자동 분석됩니다.

이 도구로 한 번에 끝내는 작업

이미지 색상 추출기를 다른 도구와 연결해 한 흐름으로 처리해 보세요.

이미지에서 브랜드 색상 추출 + 접근성 검증

사진·로고에서 색상 뽑아 → HEX/Tailwind 확인 → WCAG 명암비 검사.

3단계 작업

이미지 색상 추출기 자세히 알아보기

이미지 색상 추출기는 사진이나 디자인 시안에서 원하는 지점을 클릭해 그 픽셀의 정확한 색상 코드를 HEX·RGB·HSL 세 가지 표기로 뽑아주는 도구입니다. 마우스를 올리면 실시간으로 색이 표시되고, 클릭하면 오른쪽 패널에 저장돼 여러 색을 한 번에 모을 수 있습니다. 이미지 업로드 시 주요 색상(컬러 팔레트)도 자동으로 분석해 함께 제공합니다.

더 알아보기

내부적으로 Canvas API의 getImageData로 픽셀 RGBA 값을 직접 읽기 때문에 정확도가 100%이며, 색상 분석은 클러스터링으로 대표 색을 추출합니다. 이미지는 모두 브라우저 안에서만 처리돼 외부로 전송되지 않습니다.

이럴 때 사용하세요

•디자인 시안·레퍼런스 이미지에서 정확한 브랜드 컬러를 뽑아내야 할 때
•사진의 분위기에 맞는 컬러 팔레트를 자동 추출해 디자인에 활용하고 싶을 때
•스크린샷 속 UI 색상을 그대로 코드에 반영하고 싶을 때
•포트폴리오·무드보드 정리할 때 사진별 대표색을 정리할 때
•옷·인테리어 사진에서 마음에 드는 색상의 정확한 HEX 코드를 알고 싶을 때

이미지 색상 추출기 자주 묻는 질문

HEX·RGB·HSL 중 어떤 걸 써야 하나요?

웹·CSS 작업이라면 HEX 또는 RGB가 일반적이고, 명도·채도를 조절해야 한다면 HSL이 직관적입니다. 본 도구는 세 형식을 모두 동시에 보여줍니다.

주요 색상은 몇 개까지 추출되나요?

이미지에서 색 빈도가 높은 대표 5~6개 색을 자동으로 추출합니다. 정확한 픽셀 단위 색이 필요하면 직접 클릭해 추출하세요.

이미지가 큰데 처리 가능한가요?

네. 브라우저가 표시할 수 있는 크기라면 처리됩니다. 다만 매우 큰 이미지는 자동 리사이즈된 후 색을 추출할 수 있어 정확도에 영향을 줄 수 있습니다.

투명한 픽셀(알파)도 추출되나요?

네. RGBA 값을 모두 읽으며 알파 채널은 RGB로 환산해 표시합니다. 완전 투명한 영역을 클릭하면 검정에 가까운 값이 나올 수 있습니다.

이미지가 서버로 전송되나요?