이미지에서 컬러 팔레트 추출
색상
사진·스크린샷·디자인을 드롭하면 픽셀을 샘플링해 거친 RGB 격자에 버킷팅한 뒤 가장 많이 나타난 버킷을 평균값으로 대표색을 만듭니다. 원하는 색상 수(2–16) 조정. 팔레트는 각 슬라이스가 비율로 표시되는 막대와 개별 스왓치로 표시되며 HEX·RGB·이미지 차지 비율(%)도 함께 보여 줍니다.
—
이미지를 드롭하면 팔레트가 추출됩니다.
사용법
- 이미지를 드롭하거나 클릭해 선택하세요.
- 색상 수(2–16)를 조정하세요.
- 스왓치를 누르면 HEX 복사, Copy all로 전체 한 번에 복사.
자주 묻는 질문
- 추출은 어떻게 동작하나요?
- 이미지를 더 작은 크기(긴 변 최대 400px)로 샘플링한 뒤 RGB를 8×8×8 격자로 양자화. 가장 큰 버킷이 팔레트가 되고 각각 평균값으로 대표색 산출(스왓치가 픽셀화되지 않도록).
- 비슷한 색이 합쳐지는데요?
- 8×8×8 양자화가 일부러 거칠게 설계됨 — 그렇지 않으면 거의 동일한 그라디언트가 나옵니다. 더 많은 색이 필요하면 개수를 늘리고, 좁은 브랜드 팔레트가 필요하면 줄이세요.
- 이미지가 업로드되나요?
- 아니요. Canvas가 로컬에서 픽셀을 읽고 버킷은 메모리에 있다가 최종 HEX 문자열만 유지됩니다.
- 비율 합이 100%가 안 나옵니다
- 상위 N개 버킷만 표시되어 자주 안 나오는 긴 꼬리 색은 빠집니다. 막대의 슬라이스는 표시된 버킷들에 대한 비율이지 이미지 전체에 대한 것이 아닙니다.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00