이미지 팔레트 추출이란?
이미지를 업로드하면 주요 색상을 추출해 바로 쓸 수 있는 팔레트를 만들어 줍니다. 각 색상의 HEX, RGB, HSL 값을 확인하고 디자인에 바로 적용할 수 있습니다.
이미지의 픽셀 값을 읽고 중위수 분할(median-cut) 알고리즘으로 색을 묶어 추출합니다. 과거 GIF 팔레트 생성에 쓰던 방식과 같습니다. 3에서 12개까지 추출할 수 있고, 각 색에 HEX, RGB, HSL 값이 함께 표시됩니다. JPG, PNG, WebP를 지원합니다.
사용 방법
- 도구 영역에 이미지(JPG, PNG, WebP)를 업로드하거나 드래그 앤 드롭하세요.
- 도구가 즉시 주요 색상을 추출하여 색상 견본이 포함된 팔레트로 표시합니다.
- 색상 견본을 클릭하면 HEX, RGB 또는 HSL 형식의 색상 코드가 클립보드에 복사됩니다.
사용 시기
- 무드보드 사진에서 색감을 뽑아 웹·인쇄 시안 작업의 출발선으로 삼기.
- 브랜드 가이드가 없을 때 기존 이미지에서 메인 컬러를 역추적하기.
- 메인 비주얼 사진을 토대로 PPT나 보고서의 포인트 컬러를 고르기.
결과
웹 디자이너가 석양 사진을 업로드해 6색 팔레트를 추출합니다: 진한 오렌지 #E8751A, 코럴 핑크 #F2937C, 하늘색 #6BA3C7, 골드 #D4A843, 따뜻한 크림 #FFF0D4, 진한 보라 #3B2156. 이 정확한 코드를 그대로 웹사이트 디자인에 사용합니다.
자주 묻는 질문
- 어떤 색이 '대표 색'인지 어떻게 판단하나요?
- 모든 픽셀을 색 그룹으로 나눠 픽셀 수가 가장 많은 그룹을 남깁니다. 그래서 작지만 강렬한 하이라이트는 넓고 차분한 배경에 밀립니다. 그 밝은 지점을 뽑아내려면 추출 모드를 '선명'으로 바꾸세요.
- 같은 이미지인데 실행할 때마다 색이 조금 달라지는 이유는?
- 속도를 위해 클러스터링이 픽셀을 일부 랜덤 샘플링하기 때문입니다. 복잡한 사진에서는 선택된 픽셀이 이동할 수 있습니다. 다시 실행해도 결과는 대체로 비슷하며, 색 개수를 줄이면 더 안정적입니다.
- 6개보다 많거나 적은 색을 뽑을 수 있나요?
- 네. 개수 조절로 3에서 12까지 설정할 수 있습니다. 적게 뽑으면 전체 분위기를 요약하고, 많이 뽑으면 미세한 변화를 잡아냅니다. 다채로운 일러스트나 그라데이션 재현에 유용합니다.
- HEX, RGB, HSL 중 어떤 형식을 복사해야 하나요?
- CSS나 디자인 툴이면 HEX를 씁니다. SVG·canvas에서 채널 값이 필요하면 RGB, 색상이나 밝기를 수치로 다루고 싶다면 HSL이 편합니다. HSL의 L을 올리면 같은 색의 밝은 톤을 얻을 수 있습니다.
- 이미지를 서버에 업로드하나요?
- 아니요. 이미지는 사용자의 기기 안에서 디코딩하고 분석합니다. 외부로 어떤 데이터도 전송되지 않으므로, 외부 공유가 어려운 로고·시안·고객 사진도 안심하고 사용할 수 있습니다.