사진의 픽셀 색상은 어떻게 찾나요?
선택한 사진은 브라우저 Canvas에 그려집니다. 사용자가 화면의 한 지점을 누르면 표시된 Canvas 크기와 실제 픽셀 크기의 비율을 계산해 대응하는 x, y 좌표를 찾고 getImageData로 빨강, 초록, 파랑과 투명도 채널을 읽습니다. 읽은 RGB 값은 HEX와 HSL로도 변환되어 같은 색을 여러 디자인 환경에서 사용할 수 있습니다. 파일과 추출 결과는 외부 서버나 API로 전송하지 않습니다.
아주 큰 사진은 모바일 메모리 사용과 반응 속도를 위해 긴 변을 최대 1,600픽셀로 줄여 분석합니다. 따라서 결과 좌표는 축소된 이미지 기준이고, 축소 과정의 보간 때문에 원본 한 픽셀과 아주 조금 다를 수 있습니다. 정확한 원본 픽셀 검사가 필요한 전문 작업은 전용 이미지 편집기를 사용하고, 이 도구는 화면 디자인용 색상 후보를 빠르게 확인하는 용도로 이용하세요.
사용 방법
사진 불러오기
JPG, PNG 또는 WebP 파일을 선택합니다. 이미지가 입력 카드 안에 표시될 때까지 기다립니다.
지점 선택
사진에서 색을 알고 싶은 지점을 마우스로 클릭하거나 손가락으로 터치합니다. 선택 위치가 표시됩니다.
코드 복사
결과 카드의 HEX, RGB, HSL과 투명도를 확인하고 복사 버튼으로 한 번에 저장합니다.
구체적인 상황으로 이해하는 활용 예시
다음 세 상황은 도구의 처리 과정과 결과 해석을 설명하기 위한 가상 예시입니다. 입력 조건을 바꾸면 결과도 달라지므로 자신의 조건과 비교해 확인하세요.
1. 단색 이미지의 중심을 선택
불투명 빨강 RGB 255·0·0으로 만든 PNG의 중심을 선택하면 #FF0000과 투명도 100%를 기대할 수 있습니다. 사진 가장자리나 압축 흔적이 있는 JPG에서는 인접 픽셀이 다른 값을 가질 수 있습니다. 기준색을 검증할 때는 여러 색이 섞이는 경계보다 넓은 단색 부분을 선택하세요.
2. 4,000×3,000 사진의 분석 좌표
이 도구는 긴 변을 최대 1,600으로 줄여 분석하므로 해당 사진은 1,600×1,200픽셀 Canvas가 됩니다. 화면의 좌표 800·600은 축소된 이미지의 중심 부근이며 원본 좌표 800·600을 뜻하지 않습니다. 비율상 원본 2,000·1,500 부근에 해당하지만 보간 때문에 원본 단일 픽셀 값과 차이가 날 수 있습니다.
3. 키보드로 선택 지점을 옮기는 경우
Canvas에 초점을 둔 뒤 오른쪽 방향키를 누르면 분석 이미지에서 한 픽셀씩 이동하고 Shift를 함께 누르면 10픽셀씩 이동합니다. 좌표 100·100에서 오른쪽으로 한 번 이동하면 101·100, Shift와 오른쪽이면 111·100이 됩니다. Enter나 Space로 그 위치를 선택한 뒤 색상 코드를 확인할 수 있습니다.
정확한 지점을 고르기 어려우면 먼저 원본을 잘라 관심 영역을 크게 만든 뒤 다시 불러오세요. 키보드 사용자는 이미지 캔버스에 초점을 둔 다음 방향키로 한 픽셀씩, Shift와 방향키로 열 픽셀씩 이동할 수 있으며 Enter 또는 Space로 현재 위치의 색을 확인할 수 있습니다. 이 기능은 마우스를 쓰기 어려운 환경에서도 같은 결과를 제공합니다.
주의사항
JPEG 압축은 경계 주변에 미세한 색상 노이즈를 만들 수 있어 인접 픽셀 결과가 다를 수 있습니다. 투명 PNG는 RGB 외에 알파 비율도 확인하세요. 타인의 로고나 이미지를 사용할 때 색상 추출 가능 여부와 별개로 저작권·상표권을 지켜야 합니다.