이미지 색상 추출기(스포이트)

사용 방법

1. "이미지 선택"으로 이미지를 고릅니다. 끌어다 놓거나, 복사한 이미지를 붙여넣기(Ctrl+V / Cmd+V)해도 됩니다.
2. 이미지 위에서 포인터를 움직이면 11 × 11 돋보기에서 주변 픽셀을 확인할 수 있습니다. 작은 부분은 배율을 2×~8×로 올리면 고르기 쉽습니다.
3. 원하는 위치를 클릭(탭)하면 HEX·RGB·HSL 값이 표시되고, 각각 "복사" 버튼으로 복사할 수 있습니다.
4. 키보드로는 이미지에 포커스를 두고 방향키로 커서를 옮긴 뒤 Enter 키로 가져옵니다.
5. 가져온 색은 "기록"에 최대 20개까지 남습니다. 이미지의 주요 색상은 비율과 함께 "주요 색상"에 표시됩니다.

지원 형식과 제한

• 지원 형식: JPEG·PNG·WebP(한 번에 1장). HEIC·GIF·BMP는 지원하지 않습니다.
• 긴 변이 4,096px를 넘거나 약 1,600만 화소를 넘는 이미지는 줄인 사본에서 색을 가져오므로, 세밀한 무늬나 경계에서는 원본 색과 조금 다를 수 있습니다.
• 브라우저가 화면 표시용(sRGB)으로 변환한 뒤의 값을 보여 줍니다. 색 프로파일이 들어 있는 이미지는 이미지 편집 프로그램과 수치가 조금 다를 수 있습니다.
• 반투명 픽셀은 불투명도(알파)까지 함께 표시합니다. 이때 HEX는 8자리(마지막 두 자리가 불투명도)이며, 브라우저 내부 처리 방식 때문에 색 값이 1 정도 어긋날 수 있습니다.
• 주요 색상은 이미지를 최대 160px로 줄인 뒤 비슷한 색을 묶은 근삿값입니다. 이미지 안에 똑같은 값의 픽셀이 있다는 뜻은 아닙니다.
• 기록은 저장하지 않으며, 페이지를 닫거나 새로 고치면 사라집니다.

계산·변환 방식

이미지를 작업용 캔버스에 그린 뒤, 클릭한 위치를 화면 표시 크기에서 캔버스 픽셀 좌표로 바꿔 그 픽셀의 RGBA 값을 읽습니다. 배율을 바꿔도 같은 픽셀을 가리킵니다.

HSL은 RGB에서 계산해 정수로 반올림합니다.

주요 색상은 불투명도 50% 미만인 부분을 뺀 픽셀을 k-means 방식으로 8개 그룹으로 나눠 구합니다. 시작 색을 많이 나오는 색부터 정하므로 같은 이미지는 언제나 같은 결과가 나옵니다. 비율은 각 그룹에 속한 픽셀의 비율입니다.