여기서 대표색이 의미하는 것
PIQE는 큰 이미지를 메모리 안에서 줄여 분석 속도를 유지한 뒤 불투명한 픽셀을 표본으로 읽습니다. 가까운 빨강·초록·파랑 값을 작은 구간으로 묶고, 자주 나타난 구간을 후보로 삼습니다. 그중 지각적으로 너무 비슷한 후보를 제외해 최대 여섯 색을 남깁니다.
이 빈도 방식은 화면에서 넓은 면적을 차지한 색을 잘 찾습니다. 작지만 선명한 물체가 작품에서 중요해도 대표색에 빠질 수 있습니다. 그럴 때는 자동 분석이 의미를 이해할 것이라 기대하지 말고 미리보기의 물체를 직접 눌러 정확한 픽셀을 읽으세요.
투명도와 압축도 결과에 영향을 줍니다. 완전히 투명한 픽셀은 제외하지만 JPEG 경계에는 압축으로 섞인 색이 생깁니다. PNG 일러스트는 경계가 더 또렷할 수 있습니다. 추출값은 화면에 표시된 파일의 픽셀이지 실제 물감이나 인쇄 잉크의 값은 아닙니다.
이미지 색상 추출 사용 순서
- 20MB 이하 JPEG, PNG, WebP를 선택하거나 클립보드의 이미지를 붙여넣습니다.
- 추출된 여섯 스와치를 살펴보고 원하는 색을 눌러 HEX를 복사합니다.
- 필요한 색이 작은 영역에만 있다면 이미지의 정확한 지점을 클릭합니다.
- 팔레트를 CSS 변수로 복사한 뒤 팔레트 생성기에서 역할에 맞게 다듬습니다.
- 인터페이스에 사용할 글자색과 배경색은 공개 전 대비 검사기로 확인합니다.
상황에 맞는 추출 방법
| 상황·입력 | 결과·선택 | 판단 기준 |
|---|---|---|
| 제품 사진 | 자동 팔레트 | 프레임 대부분을 채운 재질, 배경, 조명의 큰 색 흐름을 찾는 데 유용합니다. |
| 로고 또는 아이콘 | 정확한 픽셀 클릭 | 중요한 브랜드 색이 차지하는 픽셀이 적으면 대표 여섯 색에 들지 않을 수 있습니다. |
| 투명 PNG | 자동 추출 후 눈으로 확인 | 투명 픽셀은 빼지만 가장자리의 안티앨리어싱은 중간색을 만들 수 있습니다. |
더 나은 결과를 위한 실무 팁
- 정확도가 중요하다면 필터가 없는 충분히 큰 원본을 쓰세요. 스크린샷과 SNS 사본은 색이 바뀌었을 수 있습니다.
- 사진은 조명과 압축 때문에 한 픽셀의 편차가 크므로 가까운 지점을 몇 번 찍어 비교하세요.
- 추출 팔레트는 시각적 참고값이지 공식 브랜드 색상 명세의 증거가 아닙니다.
- 이미지가 sRGB 이외의 프로필을 가졌다면 브라우저 변환과 디스플레이 설정이 보이는 값에 영향을 줄 수 있습니다.
도구가 알 수 없는 것
계산 결과를 정확하게 사용하려면 한계도 함께 알아야 합니다.
- 추출기는 화면에 렌더링된 픽셀값을 측정하며 안료나 물리적 재료를 판별하지 않습니다.
- 자동 대표색은 주로 면적을 기준으로 하며 의미의 중요도를 알지 못합니다.
- 화면, 브라우저 색상 관리, 이미지 프로필, 압축 방식에 따라 표시값이 달라질 수 있습니다.
자주 묻는 질문
PIQE가 제 이미지를 업로드하거나 저장하나요?
아닙니다. JavaScript와 Canvas API가 사용자의 브라우저 안에서 파일을 읽습니다. 이 도구는 이미지 업로드 요청을 보내지 않으며 PIQE는 파일을 받지 않습니다.
작고 선명한 색이 대표 팔레트에 왜 없나요?
대표색은 주로 차지한 픽셀 수로 순위를 정합니다. 작은 영역은 미리보기에서 직접 클릭해 해당 픽셀을 추출하세요.
어떤 이미지 형식을 쓸 수 있나요?
20MB 이하 JPEG, PNG, WebP를 지원합니다. SVG와 애니메이션 형식은 렌더링과 능동 콘텐츠 처리가 달라 제외했습니다.