이미지 색상 추출기 (컬러 팔레트)

예시: 신윤복 「단오풍정」

국가유산청에 따르면 「단오풍정」은 혜원 신윤복의 풍속화 30여 점을 담은 화첩(국보, 간송미술관 소장)에 들어 있습니다. 위 그림은 위키미디어 공용의 퍼블릭 도메인 이미지를 너비 512픽셀로 줄인 것입니다. 색 수 8, 클러스터 평균색으로 추출하면 다음과 같습니다.

#D3C3BC 30.1%, #B8A9A2 20.2%, #94867F 13.4%, #E7DBD4 12.6%, #6B625D 8.8%, #403B3D 7.5%, #161318 6.4%, 그리고 그네 타는 여인의 붉은 치마 #C14C26 0.6%.

붉은 치마는 그림의 1%도 되지 않지만 눈에 가장 먼저 들어오는 색입니다. 이 색이 남는 것은 선명한 강조색 우선이 켜져 있어서입니다. 끄면 클러스터가 면적만 따르고, 붉은색은 갈색 클러스터에 섞여 사라집니다: #DBCBC4 25.5%, #CCBCB4 21.7%, #B3A49C 14.0%, #938374 11.3%, #ECE3DC 8.3%, #54544B 7.6%, #242433 6.0%, #03020C 5.1%(가장 많은 색조).

그림 속 짙은 머리채와 먹선은 거의 검은색입니다. 색 수 6에 검은색에 가까운 색 제외를 켜면 이미지의 3.7%가 빠지고, 남은 색은 #DBCBC4 30.1%, #C4B4AC 20.7%, #A3948B 14.3%, #E3D3CC 12.6%, #7B6B5C 9.6%, #1B1A24 8.6%입니다. 순수한 검정에 가까운 색만 빠지고 남색이 도는 #1B1A24는 남습니다.

예시: 배너 이미지의 색을 정확하게

이 400 × 300 PNG는 남색 배경 #1E3A8A, 아래 4분의 1의 흰색 띠 #F8FAFC, 60 × 60 주황색 사각형 #F97316으로만 되어 있습니다. 기본 색 수 6으로 추출하면 #1E3A8A 72.0%, #F8FAFC 25.0%, #F97316 3.0%로 원래 색과 면적이 그대로 나옵니다. 보이는 픽셀이 색 그룹 3개뿐이라 6가지 대신 3가지를 표시한다는 안내도 함께 나옵니다.

계산 방식

• 표본 추출: 262,144픽셀 이하 이미지는 모든 픽셀을 셉니다. 더 큰 이미지는 줄여서 읽되 부드럽게 보간하지 않으므로, 모든 표본이 원본의 실제 픽셀입니다. 경계에서 원본에 없는 중간색이 생기지 않습니다.
• 색 그룹: 채널마다 32단계(한 단계는 256개 값 중 8개), 모두 32,768개 그룹으로 셉니다. Color Thief의 미디언 컷과 같은 5비트 정밀도입니다. 픽셀은 불투명도로 가중합니다.
• 클러스터링: OKLab에서 가중 k-means를 합니다. OKLab의 직선 거리는 눈에 보이는 색 차이에 가깝습니다. 초깃값은 정해진 순서로 고르며 무작위가 없습니다. ‘선명한 강조색 우선’을 켜면 색상과 채도 차이를 두 배로 셉니다.
• 병합: 0.02 미만으로 떨어진 클러스터는 합칩니다. 0.02는 CSS Color 4 색역 매핑이 쓰는 최소 식별 차이입니다.

코드 내보내기는 화면 순서대로 palette-1부터 이름을 붙이고 비율을 주석으로 적습니다. .gpl은 GIMP, Inkscape(팔레트 폴더에 넣기), Krita에서, .ase는 Illustrator·Photoshop·InDesign의 견본으로 씁니다.

다른 추출 도구와 비교

2026년 10월 2일, 위 배너와 고흐 「별이 빛나는 밤」 이미지로 확인했습니다.

• vivoldi 이미지 색상 추출기는 같은 이미지를 두 번 열어도 결과가 같지만, 채널 값을 10 단위로 맞춘 색을 돌려줍니다. 배너의 남색 #1E3A8A는 #1E3C8C, 주황 #F97316은 #FA7814가 되며 비율은 나오지 않습니다.
• imageonline.io는 배너의 세 색을 정확히 돌려주지만 비율은 없습니다.
• 라이브러리 node-vibrant 4.0.4는 ‘Vibrant’, ‘Muted’ 등 6가지 역할로 색을 고르고 5비트 그룹에서 색을 다시 만들어, 배너 남색이 #1C3C8C가 됩니다.

세 페이지 모두 이미지를 연 뒤 이미지를 보내는 네트워크 요청은 없었습니다(브라우저의 리소스 타이밍으로 확인).

제한 사항

• 262,144픽셀이 넘는 이미지는 표본으로 세므로 몇 픽셀 크기의 작은 부분은 빠질 수 있습니다.
• ‘가장 많은 색조’가 원래 색과 정확히 같으려면 한 색이 그 색 그룹의 절반을 넘어야 합니다. 그렇지 않으면 그룹의 평균색입니다.
• sRGB 밖의 색(Display P3 사진 등)은 sRGB로 잘립니다. 팔레트가 표시된 뒤 같은 표본 픽셀을 Display P3로 다시 읽어, 완전히 불투명한 픽셀 중 sRGB 밖에 있는 비율을 상태 줄에 표시합니다. 브라우저가 OffscreenCanvas를 지원하면 연 파일은 백그라운드 Worker에서 디코딩해 검사하므로 큰 사진을 Display P3로 변환하는 작업이 페이지 스레드에서 실행되지 않습니다(안내가 팔레트보다 몇 초 늦게 나올 수 있습니다). 예시 일러스트와 SVG 파일은 페이지에서 16행씩 나눠 읽습니다. 브라우저가 Display P3로 그릴 수 없으면 검사할 수 없다고 상태 줄에 표시합니다.
• 움직이는 GIF는 첫 프레임만 씁니다. HEIC는 Safari에서만 열리고, 카메라 RAW는 먼저 변환해야 합니다.

한 픽셀의 색만 알고 싶다면 스포이드 색상 추출기, 색각에 따른 보임은 색맹 시뮬레이터, 글자 대비는 색상 명도 대비 검사기로 확인하세요.