이미지 색상 추출기 루페로 정확하게, HEX／RGB／HSL 한 번에 복사

이미지 색상 추출기란?

디자이너, 개발자, 발표 자료 제작자를 위한 무료 온라인 색상 추출 도구입니다. 이미지를 드래그하여 업로드하고 원하는 색상 위에 마우스를 올리면 실시간 확대 루페가 정확한 픽셀 색상을 보여줍니다. 클릭 한 번으로 HEX, RGB, HSL 코드가 자동 복사되고 아래 팔레트에 추가되어 여러 색상을 나란히 비교할 수 있습니다.

🔒 이 도구는 100% 브라우저 내에서만 동작하며, 이미지는 어떤 서버로도 업로드되지 않아 파일과 개인정보가 완전히 보호됩니다.

누구에게 필요한 도구인가요?

• 디자이너·일러스트레이터：클라이언트 참고 이미지, 브랜드 가이드, 경쟁사 스크린샷에서 정확한 브랜드 컬러를 빠르게 추출.
• 마케터·발표 자료 제작자：회사 로고에서 메인 컬러를 추출해 발표 자료를 브랜드 이미지에 맞게 통일.
• 프론트엔드 개발자：디자인 시안 스크린샷에서 CSS에 필요한 HEX 코드를 바로 추출, 디자인 툴을 열 필요 없음.
• 사진작가·아티스트：사진의 색조 분포를 분석해 색보정 작업의 참고 자료로 활용.

HEX, RGB, HSL이란?

모두 색상을 표현하는 표준 형식입니다. HEX(예: #4E8AB5)는 웹 디자인에서 가장 널리 쓰이는 16진수 코드이며, RGB는 빨강·초록·파랑 값(0~255)으로 색을 표현하고, HSL은 색조·채도·명도로 표현해 사람의 직관에 더 가깝습니다. 더 알고 싶다면 Wikipedia: Web colors를 참고하세요.

사용 방법

1. 이미지를 업로드 영역에 드래그하거나 이미지 선택 버튼을 클릭합니다.
2. 이미지 위 원하는 위치에 마우스를 올리면 루페가 실시간으로 정확한 색상을 보여줍니다.
3. 클릭하면 HEX 코드가 자동으로 복사되며 아래 팔레트에 추가됩니다. 각 색상은 HEX/RGB/HSL을 개별 복사하거나 삭제할 수 있습니다.

자주 묻는 질문 (FAQ)

Q1: 제 이미지가 서버로 업로드되나요?

아닙니다. 이 도구는 브라우저 기본 Canvas API를 사용해 기기 내에서 픽셀 색상을 읽습니다. 이미지 파일은 절대 외부로 전송되지 않으며, 페이지를 새로고침하면 데이터가 자동으로 사라집니다.

Q2: 화면에서 추출 버튼이 왜 보이지 않나요?

이 기능은 브라우저 기본 EyeDropper API를 사용하며, 현재 Chrome·Edge 등 95 버전 이상의 Chromium 기반 브라우저에서만 지원됩니다. Firefox와 Safari는 아직 지원하지 않습니다. 버튼이 보이지 않아도 메인 이미지 색상 추출 기능은 정상적으로 사용할 수 있습니다.

Q3: 이미지 압축이나 형식이 색상 정확도에 영향을 주나요?

약간의 영향이 있습니다. JPG처럼 손실 압축 방식은 원본 디자인 파일과 색상이 미세하게 달라질 수 있습니다. 정확한 색상이 필요하다면 PNG와 같은 무손실 형식의 원본 이미지를 사용하는 것을 권장합니다.