본문으로 건너뛰기
CrateX.app 로고

CrateX.app

이미지 컬러 피커와 팔레트

브라우저에서 로컬로 이미지 1장의 색상을 선택하고 HEX/RGB/CSS 값을 복사하며, 2~32개 대표색 팔레트를 추출해 CSS 변수 또는 JSON으로 내보냅니다. HEIC/HEIF 입력을 지원합니다.

이미지를 여기에 드래그 앤 드롭하거나 클릭하여 선택

PNG / JPEG / WebP / AVIF / HEIC / HEIF 지원

파일 수

0 / 1

총 크기

0 bytes / 25 MB

파일당 한도

25 MB
이미지 컬러 피커와 팔레트

빠른 시작

1
이미지 한 장 가져오기
2
미리보기를 클릭하고 HEX/RGB/CSS 복사
3
팔레트 색상 수 선택 (4/6/8/12/16/24/32)
4
대표 색상 추출
5
CSS 변수 또는 JSON 내보내기

자주 쓰는 활용 사례

디자인/포스터 색상 선택

색상 구성표를 위한 주요 색상 및 강조 색상 추출

테마/디자인 시스템

프로젝트용 CSS 변수 또는 JSON 내보내기

컴포넌트 스타일링

버튼, 태그, 차트에 맞는 색상 추출

브랜드 일관성

브랜드 자산에서 표준 색상 팔레트 추출

컬러 피커와 팔레트 옵션

색상 수: 2~32, 보통 8/12; 사진/그라디언트는 16~32 권장
프리셋 버튼: 4/6/8/12/16/24/32 원클릭 전환
정렬: 양자화된 샘플 수에 따라 높은 것부터 낮은 것까지, 가장 일반적인 색상부터
색상 옆 숫자: 다운샘플링된 팔레트 이미지의 양자화 샘플 수를 표시
내보내기 형식: CSS 변수는 :root의 --color-1 이름을 사용합니다. JSON은 각 팔레트 색상에 index/hex/css/rgb/count를 포함합니다.

활용 팁

먼저 8/12로 전체 효과를 보고 필요에 따라 16/24/32로 증가
프로젝트에서 사용 시 --color-1을 의미론적 이름 (예: --color-primary)으로 변경 권장
큰 이미지 추출 시 브라우저 스로틀링을 피하기 위해 페이지를 전면에 유지

제한 사항 및 호환성

팔레트 추출은 성능을 위해 자동으로 다운샘플링됩니다. 결과는 대표색입니다.
정밀도: 클릭 샘플링은 가장 긴 변이 최대 2,048 px인 표시 Canvas를 사용합니다. 팔레트 추출은 256 px 샘플을 사용합니다.
HEIC/HEIF는 입력 전용입니다. 로컬 디코딩이 실패하면 PNG/JPEG로 변환하세요.
Alpha 처리: CSS는 rgba(...)를 출력할 수 있습니다. HEX/RGB에는 alpha가 포함되지 않습니다. JSON은 css 값으로 alpha 표현을 유지합니다.
입력 범위: URL 가져오기, 붙여넣기 가져오기, 화면 스포이드, 브라우저 확장 흐름은 지원하지 않습니다.
색상 범위: HSL/CMYK/Pantone/LAB/OKLCH 변환, 대비 검사, WCAG 매트릭스는 제공하지 않습니다.
내보내기 범위: Tailwind/SCSS/ASE/Figma/Procreate 스와치 내보내기는 제공하지 않습니다.

개인정보 보호 및 보안

이미지 색상 선택과 팔레트 추출은 브라우저에서 실행됩니다. 원본 이미지는 이 도구가 열려 있는 동안 페이지 메모리에 남습니다. 팔레트 크기 설정은 브라우저 저장소에 남을 수 있으며 WebDAV 동기화를 켜면 설정에 따라 동기화될 수 있습니다. 선택한 색상, 팔레트, 오류 메시지, 미리보기 확대/이동 데이터는 런타임 검토 상태이며 존재하는 동안 WebDAV 상태 schema를 통해 동기화될 수도 있습니다. 이미지 파일은 기본적으로 동기화되지 않으며 첨부 파일 동기화를 명시적으로 켠 경우에만 WebDAV 첨부 파일 동기화에 들어갈 수 있습니다. CSS/JSON 팔레트 내보내기는 다운로드할 때 생성되며 별도 결과로 저장되지 않습니다. 공용 기기에서는 필요에 따라 이미지, 선택한 색상, 팔레트, 저장된 설정, 사이트 데이터를 지우세요.

자주 묻는 질문

5

다음 작업에 도움이 되는 관련 도구입니다.

소개

회사 소개
요금

법률

이용 약관
개인정보처리방침
쿠키 정책

환경설정

쿠키 관리

모든 도구 처리는 브라우저 안에서 로컬로 이루어집니다.