컬러 피커에 자동 팔레트 추출 기능을 추가한 이유

저희 컬러 피커는 처음부터 이미지를 업로드하고 아무 픽셀이나 클릭해 정확한 HEX, RGB, HSL 값을 얻을 수 있게 되어 있었습니다. 이건 “이 특정 지점의 색은 무엇인가?“에 대한 답입니다. 유용하긴 하지만, 사진을 업로드하는 사람들이 실제로 궁금해하는 질문은 대개 따로 있습니다. “이 이미지의 전체 색 구성은 무엇인가?” — 로고에서 브랜드 팔레트를 뽑아내거나, 웹사이트 배색을 위해 레퍼런스 사진의 분위기를 맞추는 일이죠.

픽셀 하나를 찍는 방식으로는 그 질문에 답할 수 없습니다. 그래서 팔레트 추출 기능을 추가했습니다. 이미지를 업로드하면 도구가 자동으로 가장 지배적인 여덟 가지 색을 뽑아 클릭 가능한 색상 견본으로 보여 줍니다.

동작 원리

AI 모델은 전혀 개입하지 않고 아무것도 어디로도 업로드되지 않습니다. 몇 밀리초 만에 실행되는 단순한 빈도 계산 알고리즘입니다.

1. 이미지를 80×80 캔버스로 다운샘플링합니다. 색 통계에는 원본 해상도가 필요 없고, 다운샘플링 덕분에 큰 사진에서도 전체 과정이 즉각적입니다.
2. 각 픽셀을 색을 뭉뚱그린 버전 — 각 RGB 채널의 상위 5비트 — 으로 버킷에 담습니다. 시각적으로 거의 동일한 픽셀들이 각각 고유한 색으로 따로 세어지는 대신 같은 버킷에 모이게 됩니다.
3. 버킷을 담긴 픽셀 수 기준으로 정렬하고, 가장 큰 여덟 개가 팔레트가 됩니다. 각 견본은 그 버킷에 담긴 모든 색의 평균 색으로 표시됩니다.

이게 전부입니다. 머신러닝도, 외부 서비스도 없습니다 — 다운샘플링과 세기뿐이라 즉각적이고 브라우저를 절대 벗어나지 않습니다.

견본을 클릭하면 코드가 나옵니다

각 팔레트 견본은 클릭할 수 있습니다. 하나를 클릭하면 도구의 활성 색이 되어 HEX, RGB, HSL이 자동으로 채워지고, 같은 클릭으로 hex 값이 클립보드에 복사됩니다. 팔레트 전체를 쉼표로 구분된 목록으로 원한다면 “copy all” 버튼도 있습니다. 디자인 도구나 CSS 커스텀 프로퍼티 블록에 바로 붙여넣기 좋습니다.

직접 써 보세요

컬러 피커 페이지에 스크린샷, 로고, 사진 등 아무 이미지나 업로드하면 팔레트가 그 아래에 자동으로 나타납니다.