이미지 색 추출
이미지를 올리고 픽셀을 클릭해 HEX·RGB를 추출합니다.
이미지 색 추출
이미지를 올린 뒤 픽셀을 클릭하면 HEX·RGB를 표시합니다.
값을 입력한 뒤 계산하기를 눌러주세요.
사용 방법
- 이미지에서 색을 뽑을 파일을 고릅니다. 미리보기가 캔버스에 그려집니다.
- 원하는 픽셀을 클릭합니다. 십자 커서로 위치를 겨냥합니다.
- 결과에서 HEX, RGB, 클릭 위치(x, y)와 견본 색을 확인합니다.
- 필요하면 HEX 복사로 #rrggbb를 클립보드에 넣습니다.
- 초기화로 파일과 결과를 지웁니다. 이미지는 서버로 전송되지 않습니다.
핵심 개념
이미지 색 추출은 캔버스 getImageData로 클릭 좌표의 한 픽셀을 읽습니다. HEX는 16진 여섯 자리, RGB는 0~255 세 값, 위치는 캔버스 픽셀 좌표입니다. 미리보기는 가로 최대 900픽셀로 줄어들 수 있어, 원본 해상도와 좌표가 1:1이 아닐 수 있습니다. 화면상 클릭은 표시 크기에 맞춰 캔버스 좌표로 변환됩니다. 파일 오류면 이미지를 읽을 수 없다는 안내가 납니다. 클릭 전에는 HEX가 비어 있어 복사가 동작하지 않습니다. 견본 상자는 고른 HEX로 채워집니다.
팔레트만 고르면 컬러 피커, RGB↔HEX 숫자만 바꾸면 변환기, 단색 배경을 지우려면 PNG 배경 투명화가 맞습니다. 이 도구는 사진·스크린샷에서 브랜드 색을 집는 용도입니다. 파일은 브라우저에서만 열립니다. CSS에 쓸 때는 HEX 복사가 가장 빠릅니다. RGB가 필요한 캔버스·셰이더는 가운데 칸을 복사하세요. 좌표는 축소 캔버스 기준이라 포토샵 원본 픽셀과 다를 수 있습니다.
예시
로고 PNG를 올리고 파란 부분을 클릭하면 HEX가 #1a5cff처럼 나오고 RGB와 좌표가 함께 표시됩니다. HEX 복사로 CSS 변수에 붙입니다. 같은 이미지를 투명화 도구에서 배경 클릭용으로 쓸 수도 있습니다. 압축 JPEG는 경계 픽셀이 번져 인접 점을 여러 번 찍어 비교하세요. UI 스크린샷에서 버튼 색을 찍어 디자인 토큰을 맞추는 식입니다. 같은 파란 계열도 JPEG면 인접 픽셀 HEX가 1~2 달라질 수 있습니다.
자주 묻는 질문
이미지 색 추출은 픽셀을 클릭하나요?
맞습니다. 파일을 올린 뒤 미리보기에서 한 점을 클릭합니다. 올릴 때까지는 클릭해도 색이 바뀌지 않습니다. 이미지를 바꾼 뒤에는 이전 HEX가 남을 수 있어 다시 클릭하세요. 초기화가 확실합니다.
HEX RGB와 좌표가 같이 나오나요?
같이 나옵니다. HEX, RGB, 위치(x, y) 세 칸과 견본입니다. 알파(투명도)는 표시하지 않습니다. 위치 칸은 디버깅용입니다. 스프라이트 시트에서 아이콘 좌표를 대략 볼 때 씁니다.
HEX 복사 버튼이 있나요?
있습니다. HEX가 채워진 뒤 HEX 복사를 누르면 클립보드에 들어갑니다. 아직 클릭 전이면 복사되지 않습니다. 복사는 HEX만 대상입니다. RGB 문자열은 칸에서 드래그하세요.
컬러 피커와 이미지 색 추출은 무엇이 다른가요?
피커는 임의의 색을 고르고 HSL까지 보여 줍니다. 이 화면은 이미지 픽셀의 실제 색과 좌표를 읽습니다. HSL이 필요하면 복사한 HEX를 컬러 피커 HEX 칸에 붙여 넣으면 됩니다.
이미지가 서버로 올라가나요?
올라가지 않습니다. 로컬 캔버스에서만 읽습니다. 초기화하면 미리보기가 사라집니다. 대용량 원본도 미리보기 너비는 900으로 제한됩니다. 색 샘플에는 보통 충분합니다.
확대된 미리보기에서 좌표가 정확한가요?
클릭은 화면에 보이는 크기를 캔버스 픽셀로 환산합니다. 가로가 900으로 줄어든 경우 좌표는 축소된 캔버스 기준입니다. 투명 픽셀을 찍으면 RGB는 배경 합성 없이 저장된 색이 나옵니다. 알파는 버려집니다. 관련: 컬러 피커 · RGB HEX 변환 · PNG 배경 투명화
최종 검토일: 2026년 9월 4일