아직 선택한 색상이 없습니다
이미지 미리보기
이미지를 여기에 놓으세요
또는 클릭하여 찾아보기
JPG | PNG | WebP | GIF
#000000
마우스를 움직여 색상 미리보기 · 클릭해 선택하고 기록에 저장
현재 색상
HEX
—
RGB
—
HSL
—
색상 기록 (최대 12개)
이미지 색상 추출이란?
이미지 색상 추출을 사용하면 이미지의 어느 부분에든 마우스를 올려 해당 픽셀의 정확한 색상을 즉시 확인할 수 있습니다. 클릭해 색상을 고정하고 HEX, RGB, HSL로 복사하세요. 색상 기록 패널은 선택한 색상을 최대 12개까지 저장해 쉽게 참조할 수 있습니다 — 디자이너, 개발자, 사진이나 스크린샷에서 색상을 맞춰야 하는 모든 사람에게 유용합니다.
이미지 색상 추출 사용 방법
- 드롭 영역을 클릭하거나 파일을 끌어다 놓아 이미지를 업로드하세요.
- 이미지 위로 마우스를 움직이면 떠 있는 배지와 측면 패널에서 실시간 색상 미리보기를 볼 수 있습니다.
- 이미지의 아무 곳이나 클릭해 해당 색상을 선택하고 기록에 저장하세요.
- 복사 버튼을 사용해 HEX, RGB 또는 HSL 값을 클립보드에 복사하세요.
- 기록 패널에서 아무 색상 견본을 클릭하면 해당 색상이 메인 화면에 복원됩니다.
색상 추출 이해하기 ▾
예시
입력
브랜드 스크린샷을 업로드하고 로고 색상 위에 마우스를 올리세요
출력
#1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) —복사할 준비 완료
일반적인 사용 사례
- 로고나 스크린샷에서 정확한 브랜드 색상을 식별하세요
- UI 디자인에 맞게 사진에서 배경색을 매칭하세요
- 디자인 목업에서 CSS 색상 값을 추출하세요
- 여러 색상을 클릭하고 기록 패널을 사용해 미니 팔레트를 만드세요
이 도구를 사용하는 이유
- Canvas getImageData를 사용한 픽셀 단위 정확한 색상 추출 —반올림 없음.
- 세 가지 출력 형식(HEX, RGB, HSL)과 각각의 원클릭 복사 기능.
- 전체가 브라우저에서 실행됩니다 —이미지는 기기 밖으로 나가지 않습니다.
자주 묻는 질문
내 이미지가 서버에 업로드되나요?
아니요. 모든 처리는 HTML5 Canvas API를 사용해 전적으로 브라우저에서 실행됩니다. 이미지는 기기 밖으로 나가지 않습니다.
추출된 색상 값은 얼마나 정확한가요?
값은 픽셀 단위로 정확합니다 — 이 도구는 Canvas getImageData API를 사용해 커서 아래 픽셀의 정확한 RGBA 값을 읽은 다음, 이를 수학적으로 HEX, RGB, HSL로 변환합니다.
팔레트 추출기와 어떻게 다른가요?
팔레트 추출기는 이미지에서 주요 색상을 자동으로 샘플링합니다. 이 도구는 원하는 특정 픽셀을 직접 클릭해 정확한 색상을 얻을 수 있어, 어떤 색상을 추출할지 정밀하게 제어할 수 있습니다.
복사 버튼은 어떤 형식을 사용하나요?
각 형식은 바로 사용할 수 있는 문자열로 복사됩니다. HEX는 #RRGGBB, RGB는 rgb(R, G, B), HSL은 hsl(H, S%, L%)로 복사됩니다.