색상 팔레트 추출

이미지 팔레트 추출기란?#

모든 그림은 대부분의 일을 하는 소수의 색을 가지고 있습니다. 로고의 브랜드 블루, 제품 사진의 따뜻한 중성색, 일러스트의 톤온톤 팔레트. 팔레트 추출기는 그 대표 색들을 자동으로 뽑아내서 재사용할 수 있게 해줍니다. 어울리는 UI 테마 만들기, 충돌하지 않는 버튼 색 고르기, CSS 변수 만들기, 또는 눈이 중요하다고 생각하는 색과 실제로 지배적인 색을 이해하기에 좋습니다.

이 페이지는 브라우저에서만 중앙값 잘라내기 색 양자화를 실행합니다. 이미지를 불러오면 다운스케일하여 다루기 쉬운 샘플 크기로 만들고 모든 픽셀을 읽은 뒤, 알고리즘이 색 공간을 가장 넓은 채널을 따라 반복적으로 분할해 원하는 수(2–16)의 Top-N 견본을 만듭니다. 각 색을 이미지에서 차지하는 비율과 함께 견본으로 얻고, 더 단순한 평균색도 함께 얻습니다. HEX 목록, CSS 변수 파일, 또는 구조화된 JSON으로 내보낼 수 있습니다.

사용 방법#

1. 점선 드롭 영역에 이미지를 끌어 놓으세요(또는 클릭해서 파일 선택). PNG, JPEG, WebP 모두 작동합니다. 투명 PNG는 투명 픽셀을 세기 전에 건너뛰므로 올바르게 처리됩니다.
2. 색상 수 슬라이더(2–16)를 드래그해 추출할 대표 색 개수를 고르세요. 6이 균형 잡힌 팔레트 기본값으로 좋고, 2~3이면 지배적인 쌍을 분리해 냅니다.
3. 오른쪽의 견본 목록을 읽습니다. 각 행은 색, HEX/RGB/HSL 값, 해당 버킷에 속한 샘플링된 픽셀의 백분율을 보여주며, 가장 지배적인 순으로 정렬됩니다. 어떤 값이든 클릭하면 복사됩니다.
4. 사이드바의 평균 색상 카드에서 모든 픽셀의 단순 평균을 확인하세요. 순위 팔레트가 아니라 전체적인 배경 색조가 필요할 때 유용합니다.
5. 팔레트 형식을 고르세요.
   • HEX 목록 (.txt) — 한 줄에 하나의 #RRGGBB, 지배적인 것부터. 디자인 도구에 바로 붙여넣으세요.
   • CSS 변수 (.css) — :root { --palette-1: …; …; --palette-avg: …; } 블록으로 스타일시트에 넣을 수 있습니다.
   • JSON (.json) — hex, rgb, count, share가 있는 구조화된 견본과 평균 및 샘플 메타데이터.
6. 팔레트 다운로드를 클릭해 파일을 저장하세요.

주요 특징#

• 직접 작성한 중앙값 잘라내기 양자화. 전문 이미지 도구가 쓰는 같은 알고리즘 계열을 탭 안에서 실행합니다. 가장 넓은 채널을 중앙값에서 분할하고, 요청한 개수에 도달할 때까지 현재 가장 넓은 박스에 대해 반복합니다.
• 정직한 비율 숫자. 각 견본은 자신이 나타내는 샘플링된 픽셀의 실제 비율을 가집니다. 그래서 “지배적”이란 추측이 아니라 면적 기준 지배적이라는 뜻입니다.
• 지배적인 색과 평균을 분리. 순위 팔레트와 함께 단순 픽셀 평균을 보고합니다. 한 번의 처리로 두 가지 다른 질문에 답합니다.
• 투명 픽셀 건너뜀. 작은 임계값 이하의 알파는 제외되므로 투명 PNG는 투명도와 섞인 흐린 색이 아니라 실제로 그려지는 색을 보고합니다.
• 세 가지 내보내기 형태. 디자인 도구를 위한 HEX 목록, 스타일시트를 위한 CSS 변수, 프로그램을 위한 JSON. 모두 보이는 것과 정확히 같은 견본에서 만들어집니다.
• 100% 로컬. 이미지는 브라우저가 디코딩하고 샘플링합니다. 업로드는 없습니다.

실제 예시#

흰 배경에 작은 액센트가 있는 진한 기업용 블루 브랜드 로고를 넣어 보세요. 블루가 캔버스의 약 60%를 채운다고 합시다. 색상 수를 4로 설정하면 일반적인 추출 결과는 다음과 같습니다.

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

지배적인 견본은 약 58%의 브랜드 블루이고 흰색이 그다음입니다. 두 개의 추가 블루, 즉 더 어두운 음영과 더 밝은 색조가 알고리즘에 의해 발견된 것을 주목하세요. 이들은 중앙값 경계를 가로지르기 때문에 나왔으며, 호버 상태와 그림자에 재사용할 바로 그 색입니다. CSS 변수로 내보내면 바로 넣을 수 있는 테마를 얻습니다.

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg는 모든 픽셀의 단순 평균입니다. 브랜드 색으로 기운한 페이지 배경으로 쓰기 좋은 차분한 중간 톤 블루입니다.

FAQ#

백분율을 합치면 정확히 100%가 안 됩니다.#

표시를 위해 반올림됩니다(JSON 내보내기에서 하위 값은 소수점 넷째 자리까지 정확합니다). 투명 픽셀이 세기 전에 건너뛰어지기 때문에 작은 잔차도 있으며, 합계는 실제로 샘플링된 불투명 픽셀만 반영합니다.

요청한 것보다 적은 견본이 나왔어요.#

중앙값 잘라내기는 남은 모든 색 박스가 단단해지면(모든 채널에서 범위가 0) 일찍 멈춥니다. 분할할 것이 실제로 없기 때문입니다. 3색 이미지에서 8색을 요청하면 8개의 가짜 색이 아니라 3개를 반환합니다.

평균 색이 지배적인 색과 왜 그렇게 다른가요?#

둘은 다른 질문에 답합니다. 지배적인 색은 가장 빈도가 높은 단일 버킷이고, 평균은 모든 픽셀의 산술 평균입니다. 크기가 크면서 색이 다른 몇몇 영역이 가장 빈도 높은 값을 벗어나 평균을 당길 수 있습니다. 절반이 빨강, 절반이 초록인 이미지는 갈색빛 평균을 가지지만 갈색 지배색은 없습니다. 두 숫자 모두 맞습니다.

사진에도 작동하나요, 평면 그래픽만 되나요?#

둘 다 됩니다. 평면 그래픽은 깨끗하고 잘 분리된 견본을 주고, 사진은 실제 톤이 근처의 여러 색에 걸쳐 있기 때문에 더 등급화된 세트를 줍니다. 사진에서는 색상 수를 8–12로 올려 더 풍부한 범위를 잡아내세요.