사용 방법

이미지를 선택하거나 상자에 끌어다 놓으세요.
이미지 위로 포인터를 움직이면 돋보기가 주변 픽셀을 보여줍니다.
클릭하거나 탭하여 색상을 선택하고 HEX, RGB 또는 HSL로 복사하세요.
아래로 스크롤하여 주요 색상을 확인하고, 원하는 개수를 선택한 다음 복사하거나 CSS 변수로 다운로드하세요.

작동 방식

이미지는 브라우저의 캔버스에 그려지며 포인터 아래 정확한 픽셀의 색상을 읽습니다. 확대경은 11 × 11 픽셀 영역을 확대하여 보여주고 선택한 픽셀에 윤곽선을 표시합니다. 한 변이 4096픽셀보다 큰 이미지는 먼저 축소되므로 아주 큰 사진에서 선택한 픽셀 하나는 원본 픽셀 몇 개의 평균입니다.

주요 색상은 k-평균 군집화로 찾습니다. 픽셀을 먼저 32,768개의 작은 색상 버킷으로 그룹화한 다음, 각 버킷에 들어 있는 픽셀 수에 따라 가중치를 두고 선택한 색상 수만큼 버킷을 병합합니다. 시작점은 결정론적으로 선택되므로 같은 이미지는 항상 같은 팔레트를 제공합니다.

색상은 브라우저가 표시에 사용하는 sRGB 공간에서 읽습니다. 이미지에 광색역 색상 프로필이 포함된 경우 사진 편집기에 표시되는 값과 약간 다를 수 있습니다. 이를 지원하는 브라우저(데스크톱 Chrome 및 Edge)에서는 화면에서 색상 선택 버튼이 내장 EyeDropper를 사용하여 화면 어디에서나 색상을 가져옵니다.

예시

브랜드 색상 맞추기

로고 스크린샷을 업로드하고 주요 색상을 클릭한 다음 #1a73e8 또는 rgb(26, 115, 232)를 CSS에 복사하세요.

사진에서 팔레트 추출

해변 사진을 6가지 색상으로 나누면 모래, 바다, 하늘 톤이 각각 이미지에서 차지하는 비율과 함께 가장 큰 것부터 작은 것 순으로 표시됩니다.

색조 확인

확대경으로 확대하여 얇은 선에서 안티앨리어싱된 가장자리 대신 정확한 픽셀을 선택하세요.

자주 묻는 질문

색상이 사진 편집기와 약간 다른 이유는 무엇인가요?

브라우저는 표시를 위해 이미지를 sRGB로 변환합니다. 광색역 프로필(Display P3, Adobe RGB)이 있는 사진은 원본 프로필을 유지하는 편집기에서 표시되는 값과 약간 다를 수 있습니다.

화면에서 선택 버튼이 보이지 않는 이유는 무엇인가요?

EyeDropper API가 필요한데, 일부 브라우저만 지원하며 현재 데스크톱 Chrome과 Edge에서 사용할 수 있습니다. 업로드한 이미지에서 색상을 선택하는 기능은 모든 브라우저에서 작동합니다.

주요 색상은 어떻게 선택되나요?

모든 픽셀을 색상 빈도에 따라 가중치를 두고 k-평균 군집화하여 결정합니다. 작지만 선명한 디테일은 인접한 더 큰 색상에 합쳐질 수 있으므로, 색상 수를 늘리면 구분할 수 있습니다.

이미지가 업로드되나요?

아니요. 이미지는 브라우저에서 이 페이지에 의해 디코딩되고 분석되며, 기기 밖으로 전송되지 않습니다.

개인정보 보호

이미지는 전적으로 브라우저에서 처리됩니다. 업로드되지 않으며 선택한 색상도 전송되거나 저장되지 않습니다.