무료 이미지 색상 팔레트 추출기

사용 방법

색상 추출은 Canvas API에서 읽은 원시 픽셀 데이터에 직접 작성한 k-means++ 클러스터링 알고리즘을 적용해 전적으로 브라우저에서 실행됩니다. 서버도 서드파티 라이브러리도 없습니다. 알고리즘이 Math.random 대신 결정적 의사 난수 생성기(mulberry32)를 사용하므로 같은 이미지와 색상 수 설정은 항상 같은 팔레트를 만듭니다.

1. 1
   Canvas로 픽셀 데이터 읽기

   이미지를 화면 밖 HTML Canvas 요소에 그리고 긴 쪽이 최대 200px이 되도록 축소합니다. Canvas API의 getImageData()가 모든 픽셀을 원시 RGBA 바이트로 반환하며, 완전히 투명한 픽셀(알파 < 128)은 클러스터링 전에 제외됩니다.
2. 2
   k-means++로 픽셀 클러스터링

   k-means++ 초기화가 중심점을 결정적으로 정한 뒤 알고리즘이 최대 20회 반복합니다. 각 픽셀을 RGB 공간에서 가장 가까운 중심점에 할당하고, 할당된 모든 픽셀의 평균으로 중심점을 다시 계산합니다. 같은 16진 값으로 수렴한 클러스터는 병합되므로 결과의 각 견본은 고유합니다.
3. 3
   색상별 메타데이터 계산

   각 중심점은 HEX, HSL, 전체 픽셀에서 차지하는 비율(백분율)로 변환됩니다. WCAG 상대 휘도를 표준 공식으로 계산하고, 검정과 흰색 모두에 대한 대비율을 각 견본 옆에 표시합니다.
4. 4
   내보내기와 스포이트 출력

   팔레트는 CSS 사용자 지정 속성, SCSS 변수, Tailwind 설정 조각, JSON으로 복사할 수 있습니다. 클릭 추출 스포이트는 미리보기에서 클릭한 위치를 전체 해상도 캔버스의 정확한 원본 픽셀 좌표로 되돌려 그 픽셀의 색을 별도의 추출 색상 목록에 추가합니다. PNG 팔레트 띠는 Canvas toBlob()으로 다운로드할 수 있습니다.

관련 도구