pixel → HEX · RGB · HSL
이미지 색상 추출기
사진의 픽셀을 클릭하면 그 색을 읽을 수 있습니다. #0060fd 픽셀은 rgb(0, 96, 253)과 hsl(217, 100%, 50%)로 표시됩니다. 이미지를 추가해 원하는 사진에서 색을 추출하세요.
- rgb(0, 96, 253) = #0060fd
- rgb(255, 128, 0) = #ff8000
- #0060fd 75% + #ffffff 25%
클릭, 탭, 방향키로 고를 수 있습니다. 이미지는 이 탭에서만 그려지며 업로드되지 않습니다.
Scanned by 
NortonTM Safe Web
한눈에 보기
- 가격
- 비용 없음
- 계정
- 필요 없음
- 업로드
- 없음 — 이미지는 브라우저 탭에서 그려지며 어디로도 전송되지 않습니다
- 형식
- 브라우저가 디코딩할 수 있는 PNG, JPEG, WebP, GIF, AVIF, BMP, SVG
- 이미지 크기
- 긴 변 최대 1600픽셀로 그리며, 파일은 200 MB와 120메가픽셀(1억 2천만 픽셀)까지
- 팔레트
- 약 20,000픽셀 표본에 대한 메디안 컷으로 고른 주요 색상 여섯 가지
추출한 색상과 팔레트 방식
이 행들은 도구와 같은 코드로 만들었습니다. 팔레트 표는 파랑 픽셀 열두 개와 흰색 픽셀 네 개로 된 4 × 4 픽셀 이미지를 사용합니다.
| 픽셀 색상 | HEX | RGB | HSL |
|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) |
| #ff8000 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| #00a86b | #00a86b | rgb(0, 168, 107) | hsl(158, 100%, 33%) |
| #767676 | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
| #fdd835 | #fdd835 | rgb(253, 216, 53) | hsl(49, 98%, 60%) |
| 팔레트 색상 | 픽셀 비율 |
|---|---|
| #0060fd | 75% |
| #ffffff | 25% |
이미지에서 색상을 추출하는 방법
이미지 추가
PNG, JPEG, WebP, GIF, AVIF, BMP 또는 SVG 파일을 상자에 놓거나, 찾아보기로 선택하거나, 클립보드의 이미지를 붙여넣으세요. 직접 추가하기 전에는 샘플 이미지가 표시됩니다.
클릭, 탭 또는 방향키 사용
한 지점을 클릭하거나 탭하거나 사진 위를 드래그하세요. 사진에 포커스가 있으면 방향키로 십자선을 한 픽셀씩, Shift와 방향키로 열 픽셀씩 움직입니다. 타일에는 그 색이 HEX, RGB, HSL로 표시됩니다.
색상 또는 팔레트 항목 복사
타일의 복사 버튼을 누르거나 팔레트 견본을 눌러 HEX 코드를 복사하세요. 팔레트에는 사진 전체의 주요 색상 여섯 가지가 각 색이 차지하는 비율과 함께 나열됩니다.
색상은 어떻게 읽나요
브라우저가 파일을 디코딩하고, 페이지는 이 탭의 캔버스 요소에 그것을 그립니다. 긴 변이 1600픽셀보다 큰 사진은 맞춰서 축소되므로, 매우 큰 사진에서 읽은 색은 이웃 픽셀이 평균된 축소본에서 나옵니다. 그다음 페이지는 캔버스에 십자선 아래 한 픽셀의 빨강, 초록, 파랑, 알파 값을 요청해 HEX, RGB, HSL로 표시합니다. 투명도가 있는 픽셀은 알파 값과 함께 표시됩니다. 캔버스는 색을 알파와 곱해 저장하므로 일부 투명한 픽셀의 채널은 한 단위 어긋나게 읽힐 수 있습니다. 불투명도 50%에서 200은 199로 읽힙니다.
팔레트는 메디안 컷을 사용합니다. 페이지는 n번째 픽셀마다 살펴보며 최대 약 20,000개를 표본으로 삼고, 절반 넘게 투명한 픽셀은 제외합니다. 이 색들을 하나의 상자에 담고, 한 채널에서 분포 폭이 가장 넓은 상자를 그 채널의 중앙값에서 반복해 자릅니다. 상자가 여섯 개가 되거나 서로 다른 두 색을 가진 상자가 없을 때까지 계속합니다. 각 상자는 그 안의 픽셀 평균으로 표시되며, 표본 픽셀 중 차지하는 비율과 함께 큰 순서로 나열됩니다. 같은 사진이면 결과는 항상 같습니다. 서로 다른 색이 여섯 개보다 적은 이미지는 더 짧은 팔레트가 되며, 애니메이션 이미지는 정지 사진 한 장으로 읽습니다.
이미지 색상 추출기 질문
이미지 속 색의 HEX 코드는 어떻게 얻나요?
이미지를 추가한 뒤 원하는 지점을 클릭하세요. HEX 타일에 그 픽셀의 코드가 예를 들어 #0060fd로 표시되고, 복사 버튼으로 클립보드에 담을 수 있습니다. 지점을 고르지 않고 주요 색상을 얻으려면 팔레트의 견본을 누르세요.
어떤 이미지 형식이 지원되나요?
브라우저가 디코딩할 수 있는 PNG, JPEG, WebP, GIF, AVIF, BMP, SVG입니다. AVIF는 브라우저 버전에 따라 다릅니다. PDF나 TIFF 같은 다른 파일은 메시지와 함께 거부됩니다. 200 MB를 넘거나 120메가픽셀(1억 2천만 픽셀)을 넘는 파일도 거부됩니다.
여섯 가지 팔레트 색상은 어떻게 고르나요?
약 20,000픽셀 표본에 대한 메디안 컷으로 고릅니다. 색들을 가장 넓은 채널의 중앙값에서 여섯 개의 상자가 될 때까지 나누고, 각 상자는 그 안의 픽셀 평균이 됩니다. 견본 아래의 백분율은 그 상자가 표본 픽셀에서 차지하는 비율입니다. 대부분 투명한 픽셀은 건너뜁니다.
가까운 두 픽셀의 색이 조금 다른 이유는 무엇인가요?
사진이나 JPEG 같은 압축 이미지는 픽셀마다 조금씩 달라서, 같아 보이는 두 지점도 채널마다 몇 단위 차이가 날 수 있습니다. 대표 색이 필요하면 여러 지점을 클릭하거나, 많은 픽셀을 평균하는 팔레트를 사용하세요.
이미지가 어딘가에 업로드되나요?
아니요. 파일은 브라우저가 이 탭에서 디코딩하고 그리며, 색은 그 그림에서 읽을 뿐 서버로는 아무것도 전송되지 않습니다. 페이지를 닫거나 새로 고치면 이미지는 사라집니다.
화면에서 선택하기 버튼은 무슨 기능인가요?
EyeDropper 기능을 제공하는 브라우저에서는 이 버튼으로 다른 창을 포함한 화면의 아무 지점을 클릭해 그 색을 볼 수 있습니다. 해당 기능이 없는 브라우저에는 버튼이 표시되지 않으며, 사진에서 고르는 기능은 어디서나 동작합니다.