이미지에서 컬러 팔레트 추출
사진·스크린샷·디자인을 드롭하면 픽셀을 샘플링해 거친 RGB 격자에 버킷팅한 뒤 가장 많이 나타난 버킷을 평균값으로 대표색을 만듭니다. 원하는 색상 수(2–16) 조정. 팔레트는 각 슬라이스가 비율로 표시되는 막대와 개별 스왓치로 표시되며 HEX·RGB·이미지 차지 비율(%)도 함께 보여 줍니다.
—
이미지를 드롭하면 팔레트가 추출됩니다.
사용법
- 이미지를 드롭하거나 클릭해 선택하세요.
- 색상 수(2–16)를 조정하세요.
- 스왓치를 누르면 HEX 복사, Copy all로 전체 한 번에 복사.
자주 묻는 질문
- 추출은 어떻게 동작하나요?
- 이미지를 더 작은 크기(긴 변 최대 400px)로 샘플링한 뒤 RGB를 8×8×8 격자로 양자화. 가장 큰 버킷이 팔레트가 되고 각각 평균값으로 대표색 산출(스왓치가 픽셀화되지 않도록).
- 비슷한 색이 합쳐지는데요?
- 8×8×8 양자화가 일부러 거칠게 설계됨 — 그렇지 않으면 거의 동일한 그라디언트가 나옵니다. 더 많은 색이 필요하면 개수를 늘리고, 좁은 브랜드 팔레트가 필요하면 줄이세요.
- 이미지가 업로드되나요?
- 아니요. Canvas가 로컬에서 픽셀을 읽고 버킷은 메모리에 있다가 최종 HEX 문자열만 유지됩니다.
- 비율 합이 100%가 안 나옵니다
- 상위 N개 버킷만 표시되어 자주 안 나오는 긴 꼬리 색은 빠집니다. 막대의 슬라이스는 표시된 버킷들에 대한 비율이지 이미지 전체에 대한 것이 아닙니다.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상 0 0
컬러 토큰 익스포터
컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android `colors.xml`로 익스포트. 라이브 미리보기 스워치.
색상 0 0
컬러 팔레트 생성기
베이스 컬러 선택 → 클래식 색상환 하모니 — 보색·분할보색·삼색·사색·정사각·유사·단색.
색상 0 0
Tailwind 색상 팔레트
전체 Tailwind CSS 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.
색상 0 0
컬러 정렬
hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.
색상 0 0
이미지 컬러 피커
이미지를 드롭하고 클릭만 하면 해당 픽셀의 HEX·RGB·HSL을 가져옵니다 — 팔레트도 함께 모음.
이미지 0 0