이미지 픽셀 격자 픽셀 단위로 이미지를 확대하고 개별 픽셀 색상을 표시하는 격자 오버레이를 사용합니다.
이미지 픽셀 격자
픽셀 단위로 이미지를 확대하고 개별 픽셀 색상을 표시하는 격자 오버레이를 사용합니다.
이미지 업로드
검사할 이미지를 드롭하거나 선택하여 픽셀 단위로 확인합니다.
확대하기
그리드 선과 색상 값을 함께 볼 수 있는 개별 픽셀을 확대하여 봅니다.
픽셀 검사
픽셀 위에 마우스를 올려 정확한 색상 값과 좌표를 확인합니다.
What Is 이미지 픽셀 격자?
픽셀 단위로 이미지의 색상을 표시하는 도구로, 확대된 격자 오버레이를 통해 개별 픽셀 색상을 볼 수 있습니다.任意 영역으로 줌인하여 각 픽셀의 정확한 색상과 격자선을 확인할 수 있으며, 호버하면 RGB/HEX 색상 및 X,Y 좌표가 표시됩니다. 아이콘 디자이너, 픽셀 아티스트, 픽셀 단위로 검사하는 모든 사람에게 필수적인 도구입니다. 데이터 추출에는 Canvas API를 사용하며, 부드러운 줌을 위한 CSS 변환을 사용합니다.
Why Use 이미지 픽셀 격자?
-
그리드 선이 표시되는 확대된 뷰
-
호버하여 정확한 RGB/Hex 색상과 좌표를 확인
-
개요에서 픽셀 단위까지 원활하게 확대
-
픽셀 아트와 아이콘 디자인에 필수적인 도구
Common Use Cases
픽셀 아트
픽셀 아트의 개별 픽셀을 검사하고 확인합니다.
아이콘 디자인
픽셀 단위에서 정렬과 색상을 확인합니다.
품질 관리
렌더링 아티팩트와 압축 효과를 검사합니다.
색상 일치
임의의 위치에서 정확한 픽셀 색상을 추출합니다.
Technical Guide
이미지는 자연 해상도로 Canvas에 그려집니다. 확대된 Canvas는 높은 배율(10-40배)로 특정 부분을 렌더링합니다. 각 픽셀은 색칠된 사각형으로 그리며 격자선을 표시합니다. 마우스 위치는 줌 인자와 뷰포트 오프셋을 사용하여 화면 좌표에서 이미지 좌표로 변환됩니다. 호버한 픽셀의 색상은 getImageData를 통해 읽어옵니다. 드래그 시 뷰포트 원점 오프셋을 조정하여 패닝할 수 있습니다.
Tips & Best Practices
-
1명확한 픽셀 그리드를 위해 최대 확대 배율까지 확대
-
2픽셀을 클릭하여 해당 색상 값을 복사
-
3안티 앨리어싱과 서브픽셀 렌더링 디버깅
-
4픽셀 완벽한 아이콘 확인에 적합
Related Tools
Frequently Asked Questions
Q 얼마나 확대할 수 있나요?
Q 색상 값을 볼 수 있나요?
Q 모든 이미지 형식 지원?
Q 색상을 복사할 수 있나요?
Q 큰 이미지도 처리할 수 있나요?
About This Tool
이미지 픽셀 격자 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.