이미지 색상 추출

1. 색을 뽑을 사진이나 디자인 시안을 넣습니다.
2. 오른쪽에 많이 쓰인 색부터 대표 색이 나옵니다. 뽑을 색 수는 3~10개 사이로 바꿀 수 있습니다.
3. 특정 지점의 색이 필요하면 사진을 눌러 스포이드로 집습니다.
4. 색마다 HEX 코드를 복사하거나, 전체를 CSS 변수로 복사하거나, 팔레트 이미지로 저장합니다.

사진을 긴 변 220px 정도로 줄인 뒤 픽셀 색들을 k-평균 군집으로 묶습니다. 비슷한 색끼리 한 무리로 모으고, 무리마다 평균 색을 대표 색으로 씁니다. 비율은 그 무리에 속한 픽셀이 사진에서 차지하는 비중입니다.

처음 중심을 고르는 과정에 정해진 난수를 써서, 같은 사진은 언제나 같은 팔레트가 나옵니다. 투명한 픽셀은 계산에서 뺍니다. 스포이드는 화면에 보이는 크기의 사진에서 누른 지점 한 픽셀의 색을 그대로 읽습니다.

대표 색은 실제 픽셀의 평균이라 사진 속 어느 한 점의 색과 정확히 같지는 않을 수 있습니다. 정확한 한 점의 색이 필요하면 스포이드를 쓰세요. 색 수를 늘리면 작은 면의 색까지 나뉘고, 줄이면 큰 흐름만 남습니다.