이미지 색상 팔레트 추출

사진이나 로고에서 뽑은 팔레트는 웹사이트, 발표 자료, 브랜드 키트를 이미지에 맞추는 가장 빠른 방법입니다. 이 도구는 비슷한 픽셀을 묶어 주요 색상을 HEX, RGB, HSL 값과 이미지에서 차지하는 비율로 알려 줍니다. 팔레트 이미지와 CSS 사용자 지정 속성, 바로 붙여 넣을 수 있는 Tailwind 코드도 함께 받습니다. 분석은 브라우저 안에서 이뤄지며 이미지는 업로드되지 않습니다.

사용 방법

1. 이미지를 하나 이상 고릅니다.
2. 원하는 색상 수를 정합니다(2–16).
3. 방식을 고릅니다. 사진은 k-평균, 빠른 결과는 미디언 컷이 알맞습니다.
4. 로고나 단색 그래픽은 “가장 많이 쓰인 정확한 픽셀 색”을 골라 정확한 브랜드 색을 얻습니다.
5. HEX 코드, CSS나 Tailwind 코드를 복사하거나 팔레트 PNG를 받습니다.

계산식

ΔE = √((L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²) (CIE Lab 기준); 비율 = 그룹의 픽셀 수 ÷ 계산에 쓰인 픽셀 수

k-평균은 k-means++ 방식으로 중심 k개를 정하고(색이 나타나는 빈도로 가중), “모든 색을 가장 가까운 중심에 배정하고 각 중심을 그룹의 평균으로 옮기는” 과정을 최대 20번 반복합니다. 거리는 같은 거리가 눈에도 비슷한 차이로 보이는 Lab에서 잽니다. 미디언 컷은 대신 빨강·초록·파랑 범위가 가장 넓은 색 상자를 가중 중앙값에서 계속 나눕니다. 이 옵션을 켜면 투명한 픽셀(알파 50% 미만)은 제외됩니다.

예시

파란색(#2563EB) 배경에 반지름 25 px의 노란색(#FBBF24) 원이 있는 120 × 80 로고에서는 원이 9,600픽셀 중 π × 25² ≈ 1,964픽셀을 차지합니다. 색상 2개와 정확한 값으로 분석하면 #2563EB가 약 79.5%, #FBBF24가 약 20.5%로 나옵니다.