이미지 색상 추출기
사진의 아무 픽셀이나 누르면 그 색을 읽습니다. 예를 들어 RGB 11, 122, 106은 HEX로 #0B7A6A이고, 주요 색 6개도 함께 보여 줍니다. 이미지는 브라우저 밖으로 나가지 않습니다.
사용 방법
- 기기에서 이미지를 고르거나, 샘플 이미지 사용 버튼으로 먼저 써 봅니다.
- 그림 위를 클릭하거나 터치하면 그 픽셀의 색을 읽습니다. 컴퓨터에서는 방향키로 한 픽셀씩, Shift를 누르고 방향키를 누르면 열 픽셀씩 위치를 옮길 수 있습니다.
- HEX, RGB, HSL 값을 복사하거나, 팔레트의 색 칩을 눌러 대표 색상 6개 중 하나를 불러옵니다.
계산 방법
그림을 브라우저 안의 숨겨진 캔버스에 그린 뒤, 포인터 아래 픽셀의 빨강·초록·파랑 값을 0~255 숫자로 읽어 옵니다. HEX는 같은 세 숫자를 16진수로 쓴 것입니다. 11, 122, 106은 #0B7A6A가 됩니다.
HSL은 같은 색을 색상(0~360도), 채도, 명도(%)로 나타냅니다. 색의 성격은 그대로 두고 더 밝게, 어둡게, 덜 진하게 만들 때 편리합니다.
팔레트는 중앙값 분할(median cut)과 비슷한 상자 분할 방식으로 만듭니다. 모든 픽셀을 상자 하나에 넣고, 값의 퍼짐이 가장 큰 상자를 가장 넓은 채널의 가운데에서 계속 나눠 상자가 6개가 되면 멈춥니다. 각 색 칩은 상자 하나의 평균색이며 이미지에서 차지하는 비중이 큰 순서로 늘어섭니다. 큰 사진은 일부 픽셀만 표본으로 쓰고 투명한 픽셀은 무시합니다.
자주 묻는 질문
이미지가 어딘가로 업로드되나요?
아니요. 파일은 브라우저 기능으로 열어 기기 안의 캔버스에 그립니다. 업로드도 저장도 없습니다.
디자인 프로그램에서 보는 색과 값이 조금 다릅니다.
이 도구는 브라우저가 해석한 픽셀 값을 읽습니다. 이미지에 Display P3 같은 색상 프로필이 들어 있거나 JPEG로 압축되었다면 원본 디자인 파일과 숫자가 조금 다를 수 있습니다. 가장 정확한 값은 PNG에서 뽑으세요.
클릭한 곳과 뽑힌 위치가 정확히 같지 않습니다.
큰 이미지는 화면에 맞게 줄여 보여 주기 때문에 화면의 한 픽셀이 이미지의 여러 픽셀에 해당할 수 있습니다. 색은 화면에 표시된 축소본에서 가져옵니다.
웹페이지나 내 화면에서 바로 색을 뽑을 수 있나요?
먼저 화면을 캡처한 뒤 이 도구에서 여세요. 브라우저 페이지는 다른 탭이나 앱의 픽셀을 읽을 수 없습니다.