이미지 색상 추출기가 하는 일

사진 한 장에서 분위기를 결정하는 색은 사실 몇 개 되지 않습니다. 그 몇 개를 눈대중이 아니라 계산으로 뽑아 주는 것이 이 도구입니다. 그림을 올리면 대표 색 목록이 만들어지고, 각 색의 HEX 값과 RGB 값, 그리고 그 색 계열이 화면에서 차지하는 대략적인 면적 비율이 함께 표시됩니다.

내부적으로는 중앙값 분할(median cut)이라는 고전적인 색 양자화 방법을 씁니다. 모든 픽셀을 하나의 상자에 넣고, 빨강·초록·파랑 중 값의 폭이 가장 넓은 축을 골라 절반으로 가릅니다. 이 과정을 원하는 색 개수가 될 때까지 반복한 다음, 각 상자에 남은 픽셀들의 평균색을 그 상자의 대표색으로 삼습니다. 사진에서 가장 흔한 색 몇 개만 뽑는 단순 집계보다 색의 분포를 고르게 반영합니다.

속도를 위해 이미지를 긴 변 기준 140픽셀 정도로 줄여서 표본을 뜹니다. 아주 큰 사진도 거의 즉시 결과가 나오는 이유입니다. 반대로 화면의 극히 작은 부분에만 있는 강조색은 표본에서 빠져 결과에 나타나지 않을 수 있습니다. 투명도가 낮은 픽셀은 계산에서 제외하므로, PNG의 투명 배경이 결과를 회색으로 흐리는 일도 없습니다. 뽑힌 색은 밝은 쪽에서 어두운 쪽 순서로 정렬해 띠처럼 보여 줍니다.

사용 방법

1. 점선 상자에 이미지를 끌어다 놓거나 눌러서 고릅니다. 올리는 즉시 기본 6색으로 추출됩니다.
2. 슬라이더로 추출할 색 개수를 3개에서 10개 사이로 바꿉니다. 손을 떼면 다시 계산됩니다.
3. 색 하나를 클릭하면 그 HEX 값이 복사됩니다.
4. 전체가 필요하면 HEX 전체 복사로 쉼표로 이어진 목록을, CSS 변수 복사로 --color-1부터 시작하는 변수 블록을 가져갑니다.