피드로 돌아가기
colorlip: A JavaScript library for extracting perceptually representative colors from illustrations and photos
Dev.toDev.to
Frontend

nazunya가 일러스트와 사진에 특화된 색상 추출 라이브러리 colorlip을 개발해 인지 기반 팔레트 생성 기능 제공

colorlip: A JavaScript library for extracting perceptually representative colors from illustrations and photos

nazunya2026년 3월 29일5intermediate

Context

기존 라이브러리들(Color Thief, node-vibrant)은 평균 색상이나 표준 양자화 알고리즘에 의존해 배경색의 영향력이 과도했다. 추출된 색상이 사용자가 지각하는 이미지의 분위기와 맞지 않는 경우가 많았다. 일반적인 용도를 위해 설계된 기존 솔루션은 애니메이션과 만화 스타일 일러스트에 적용하기에 부족했다.

Technical Solution

  • 이미지 구성 및 엣지 분포 분석: 이미지를 150x150로 리사이징한 뒤 stride 샘플링으로 포화도의 중앙값·산포, 엣지 집중도 추정
  • Lab 색공간 기반 클러스터링: RGB에서 양자화한 픽셀을 Lab 색공간에서 그룹화해 인지적 유사성 기반 병합
  • 다중 가중치 스코어링: 중앙성, 엣지 강도, 포화도, 알파값, 중심 좌표, 분산도, 액센트 적합성을 조합한 점수 계산
  • 색상 필터링: 알파값 0.5 이하, 포화도 하한선, 특정 명도 범위 적용으로 노이즈와 흰색 배경 제거
  • OKLCH 색공간 재평가: 주요 색상 후보를 원본 점수, 가중치, OKLCH 색공간에서의 두드러짐을 기반으로 최종 선정

Impact

경량 라이브러리와 비교했을 때 실행 시간에 거의 차이가 없다.

Key Takeaway

표준 알고리즘 대신 도메인 특화 휴리스틱을 적용해 이미지 컴포지션을 인식함으로써 일반적 라이브러리보다 실무에 맞는 결과를 얻을 수 있다. 색상 추출 문제는 단순한 데이터 압축이 아니라 색상의 역할과 위계를 식별하는 큐레이션 작업이다.


일러스트나 제품 사진 중심의 서비스에서 colorlip을 도입하면 배경색 간섭을 줄이고 사용자가 지각하는 색감과 일치하는 팔레트를 추출할 수 있다.

원문 읽기