이미지에서 컬러 팔레트 추출
이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.
이미지를 드롭하면 팔레트가 추출됩니다.
사용법
- 이미지를 드롭하거나 클릭해 선택하세요.
- 색상 수(2–16)를 조정하세요.
- 스왓치를 누르면 HEX가 복사되고, Copy all로 전체를 한 번에 복사할 수 있습니다.
자세한 설명
펼치기접기
사진, 스크린샷, 로고를 끌어다 놓으면 그것이 실제로 어떤 색으로 이루어져 있는지 뽑아냅니다. 각 색은 색 견본과 함께 hex, rgb 값이 복사할 수 있게 표시됩니다. 픽셀을 구간으로 묶고 각 구간에 몇 개의 픽셀이 들어왔는지로 순위를 매기므로, 돌아오는 것은 면적을 가장 많이 차지하는 색입니다. 가장 눈에 띄는 색이 아니라 지배적인 팔레트입니다. 이 구분은 기억해 둘 만합니다. 풍경 사진은 거의 같은 파란색을 여러 개 돌려주는데, 하늘이 실제로 그림의 대부분이기 때문입니다. 눈여겨보던 강조색은 목록 아래쪽에 있을 수 있으니 색 개수를 늘려서 거기까지 닿게 하세요. 이미지는 페이지 안에서 디코딩하고 표본을 뽑으며 기기를 벗어나지 않습니다.
자주 묻는 질문
추출은 어떻게 동작하나요?
이미지를 더 작은 크기(긴 변 최대 400px)로 샘플링한 뒤 RGB를 8×8×8 격자로 양자화합니다. 가장 큰 버킷이 팔레트가 되고, 각 버킷의 평균값으로 대표색을 산출합니다(스왓치가 픽셀화되지 않도록).
비슷한 색이 합쳐지는데요?
8×8×8 양자화는 일부러 거칠게 설계되었습니다. 그렇지 않으면 거의 동일한 그라디언트가 나옵니다. 더 많은 색이 필요하면 개수를 늘리고, 좁은 브랜드 팔레트가 필요하면 줄이세요.
이미지가 업로드되나요?
아니요. Canvas가 로컬에서 픽셀을 읽고 버킷은 메모리에 있다가 최종 HEX 문자열만 유지됩니다.
비율 합이 100%가 안 나옵니다
상위 N개 버킷만 표시되어 자주 안 나오는 긴 꼬리 색은 빠집니다. 막대의 슬라이스는 표시된 버킷들에 대한 비율이지 이미지 전체에 대한 것이 아닙니다.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상·CSS
컬러 토큰 익스포터
컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android colors.xml로 익스포트. 라이브 미리보기 스워치.
색상·CSS
컬러 팔레트 생성기
베이스 컬러 선택 → 클래식 색상환 하모니 — 보색·분할보색·삼색·사색·정사각·유사·단색.
색상·CSS
Tailwind 색상 팔레트
전체 Tailwind CSS v4 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.
색상·CSS
컬러 정렬
hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.
색상·CSS
이미지 컬러 피커
이미지를 드롭하고 클릭만 하면 해당 픽셀의 HEX·RGB·HSL을 가져옵니다 — 팔레트도 함께 모음.
이미지