이미지 색상 추출 · 대표색 팔레트 (HEX 복사, CSS 변수)

색을 뽑는 방식

이미지를 긴 변 120px로 줄인 뒤 모든 픽셀을 RGB 공간의 점으로 봅니다. 미디언 컷(median cut)은 점들이 담긴 상자를 가장 넓게 퍼진 색 채널 기준으로 중간값에서 반으로 자르는 과정을 원하는 색 개수가 될 때까지 반복하고, 각 상자의 평균을 대표색으로 삼는 방법입니다. GIF 팔레트 생성에 오래 쓰인 알고리즘입니다. 여기에 k-means 몇 회를 더해 각 픽셀을 가장 가까운 대표색에 다시 배정하고 평균을 갱신하면 경계가 자연스러워집니다. 비율 %는 각 대표색에 배정된 픽셀의 비중입니다.

결과 활용

비율이 가장 큰 색은 배경이나 베이스로, 채도가 가장 높은 색은 버튼·링크 같은 강조색으로 쓰기 좋습니다. 사진 위에 글자를 얹을 때는 평균 밝기를 참고합니다. 상대 휘도가 0.18 이하면 흰 글자, 약 0.18 이상이면 검은 글자가 대비 기준(WCAG 4.5:1)을 대체로 만족합니다. 다만 평균이 중간이어도 부분적으로 밝고 어두운 영역이 섞여 있으면 글자 뒤에 반투명 레이어를 까는 것이 안전합니다. CSS 변수 코드는 그대로 스타일시트에 붙여 var(--color-1)로 쓸 수 있습니다.

결과가 기대와 다를 때

사진에 흰 배경이나 검은 그림자가 넓게 있으면 팔레트 절반이 무채색으로 채워집니다. "거의 흰색·검정 제외"를 켜면 그 픽셀을 빼고 계산합니다. 색 개수를 늘리면 작은 포인트 색도 잡히지만 비슷한 색이 여러 개로 쪼개지기도 합니다. 그러데이션이 많은 이미지는 평균 과정에서 실제로는 없는 중간색이 나올 수 있고, 로고처럼 색이 몇 개 안 되는 이미지는 색 개수를 실제 색 수보다 적게 두는 것이 깔끔합니다. 축소 과정에서 1~2px짜리 세부 색은 사라집니다.

개인정보

파일은 브라우저의 canvas에서만 처리되며 업로드되지 않습니다. 페이지를 닫으면 메모리에서 사라집니다. 다만 일부 브라우저에서는 사진의 EXIF 회전 정보가 무시될 수 있는데 색 추출에는 영향이 없습니다.

자주 묻는 질문