이미지 컬러 피커 및 팔레트
이미지 컬러 피커 및 팔레트
이미지를 클릭하여 색상을 선택하고 주요 색상과 팔레트를 자동 추출하며 HEX/RGB를 복사하고 CSS 변수를 내보냅니다. PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF 지원.
이미지를 여기에 드래그 앤 드롭하거나 클릭하여 선택
PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF 지원
이미지 컬러 피커 및 팔레트
🚀 빠른 시작
- 이미지 가져오기: 드래그 앤 드롭 또는 클릭하여 선택
- 패널 전환: 데스크탑은 사이드 패널; 모바일은 하단 버튼 탭
- 클릭하여 선택: 이미지의 아무 곳이나 클릭하여 해당 픽셀의 색상 가져오기
- 색상 복사: 선택 후 HEX/RGB/CSS 형식으로 복사
- 색상 수 설정: 슬라이더 드래그 또는 프리셋 클릭 (4/6/8/12/16/24/32)
- 팔레트 추출: 추출 버튼을 클릭하여 주요 색상 목록 가져오기
- CSS 내보내기: 추출 후 CSS 변수 파일 내보내기
- JSON 내보내기: 추출 후 JSON 데이터 파일 내보내기
- 초기화: 현재 이미지 및 결과 지우기
📌 자주 쓰는 활용 사례
- 디자인/포스터 색상 선택: 색상 구성표를 위한 주요 색상 및 강조 색상 추출
- 테마/디자인 시스템: 프로젝트용 CSS 변수 또는 JSON 내보내기
- 컴포넌트 스타일링: 버튼, 태그, 차트에 맞는 색상 추출
- 브랜드 일관성: 브랜드 자산에서 표준 색상 팔레트 추출
🎛️ 컬러 피커 및 팔레트 옵션
- 색상 수: 2–32, 일반적으로 8/12; 사진/그라데이션은 16–32 권장
- 프리셋 버튼: 4/6/8/12/16/24/32 원클릭 전환
- 정렬: 백분율 높은 순, 가장 흔한 색상이 먼저
- 색상 옆 숫자: 이미지 내 픽셀 백분율 표시
🧭 활용 팁
- 먼저 8/12로 전체 효과를 보고 필요에 따라 16/24/32로 증가
- 프로젝트에서 사용 시 --color-1을 의미론적 이름 (예: --color-primary)으로 변경 권장
- 큰 이미지 추출 시 브라우저 스로틀링을 피하기 위해 페이지를 전면에 유지
⚠️ 제한 사항 및 호환성
- 단일 파일 제한 128MB, 매우 큰 이미지는 느려질 수 있음
- 팔레트 추출은 성능을 위해 자동 다운샘플링, 결과는 대표 색상
- HEIC/HEIF 디코딩은 브라우저 지원에 따라 다름, 실패 시 JPG/PNG로 변환
- 투명 픽셀은 무시되거나 실제 RGBA로 처리됨
🔒 개인정보 보호 및 보안
- 모든 처리는 브라우저 내에서 완료; 데이터가 기기를 떠나지 않습니다
❓ 자주 묻는 질문
내보낸 CSS 파일은 어떻게 사용하나요?
내보낸 :root { --color-1: ... }를 전역 CSS에 넣고 var(--color-1)로 참조합니다.
내보낸 JSON은 뭐에 쓰나요?
스크립트/디자인 시스템 재사용용, 예: Design Tokens 또는 테마 설정 생성. 각 색상에 hex/css/rgb와 count 포함.
색상 수는 얼마가 권장되나요?
일반 UI: 8 또는 12; 미니멀 아이콘: 4–6; 사진/그라데이션: 16–32. 프리셋으로 빠르게 비교.
클릭 선택과 팔레트 색상이 다른 이유는?
클릭 선택은 단일 픽셀; 팔레트는 전체 이미지를 양자화한 대표 색상으로 전체 추세 강조.
내보내기 버튼이 회색인 이유는?
먼저 '팔레트 추출' 버튼을 클릭해야 하며, 추출 완료 후 내보내기 사용 가능.
내보낸 파일명은 어떻게 생성되나요?
기본값은 원본 파일명 (확장자 제외) + .palette-색상수 + .css/.json, 잘못된 문자는 자동 정리.