픽셀을 세지 않고 색 공간을 쪼갭니다
"가장 많이 쓰인 색"을 그냥 세면 아무것도 안 나옵니다. 사진에는 똑같은 색이 거의 없기 때문입니다 — 하늘 한 조각에도 수천 가지 파랑이 있어서, 세어 보면 전부 한 번씩 나온 색이 백만 개입니다.
그래서 색을 세는 대신 색 공간을 쪼갭니다(median cut). 모든 픽셀을 담은 상자를 가장 넓게 퍼진 축에서 반으로 가르고, 원하는 개수가 될 때까지 되풀이합니다. 상자마다 픽셀 수가 비슷해지므로, 넓게 퍼진 영역은 여러 색으로 나뉘고 좁게 뭉친 영역은 한 색으로 남습니다.
옆에 붙는 비율은 그 색이 사진에서 차지하는 넓이입니다.
흰·검을 빼면 쓸 색만 남습니다
배경이 흰 상품 사진에서는 흰색이 팔레트의 절반을 먹습니다. 사실이긴 하지만 쓸모는 없습니다. "흰·검에 가까운 색 빼기"를 켜면 실제로 디자인에 쓸 만한 색만 남습니다.
정렬을 바꿔 보세요
- 많이 쓰인 순 — 사진의 인상을 결정하는 색이 앞에 옵니다
- 밝은 순 — 그대로 명도 단계가 됩니다. 배경·본문·강조를 위에서부터 집어 가면 대비가 자연스럽게 잡힙니다
- 색상환 순 — 어떤 색 계열이 모여 있는지 보입니다
뽑은 다음에
색 하나를 누르면 그 코드가 복사됩니다. 전체는 HEX 목록·CSS 변수·JSON 배열 중 골라 복사할 수 있습니다.
바로 쓰기 전에 두 가지를 확인하세요.
- 글자에 쓸 색이라면 색 대비 검사를 거치세요. 사진에서 뽑은 색은 예쁘지만 대비가 모자란 경우가 많습니다
- 밝기를 고르게 다듬으려면 색상 코드 변환에서 OKLCH 값을 보세요. L 만 일정 간격으로 맞추면 계열이 정돈됩니다
매번 같은 결과가 나오나요?
같습니다. 무작위로 고르는 방식(k-평균)이 아니라 정해진 순서로 쪼개기 때문입니다. 같은 사진에 같은 설정이면 언제나 같은 팔레트가 나옵니다.
사진 전체를 보나요?
긴 변 180px 로 줄여서 봅니다. 백만 픽셀을 다 훑어도 색 분포는 같은데 시간만 오래 걸립니다. 결과 아래에 실제로 본 픽셀 수를 적어 둡니다.
투명한 부분은요?
거의 투명한 픽셀(알파 50% 미만)은 건너뜁니다. 로고 PNG 에서 배경 대신 실제 색만 뽑히도록 하기 위해서입니다.