이미지 색상 추출기
모든 이미지에서 주요 색상을 HEX 및 RGB 값과 각 색상의 점유율로 추출합니다. 기기에서 처리되며 이미지는 절대 업로드되지 않습니다.
또는 파일을 여기에 끌어다 놓으세요.
JPG, PNG, WebP 또는 GIF. 이미지를 붙여넣을 수도 있습니다.
추출된 색상
이용 방법
이 이미지 색상 추출기는 업로드된 이미지를 브라우저에서 완전히 분석하여 주요 색상을 HEX 및 RGB 값으로 제공하며 각 색상의 대략적인 이미지 점유율을 표시하므로 모든 사진에서 브랜드 팔레트나 색상 구성표를 빠르게 추출할 수 있습니다.
- 이미지 선택
클릭하여 찾아보거나 파일을 드래그하거나 클립보드에서 붙여넣으세요.
- 색상 수 설정
3~10개의 견본이 이미지 점유율에 따라 순위별로 표시됩니다.
- 색상 복사
견본을 클릭하면 해당 HEX 값이 복사되며, 전체 세트를 CSS 변수로 복사할 수도 있습니다.
색상 추출 방식
이미지가 작은 캔버스에 그려지고 각 픽셀의 빨강, 초록, 파랑 값이 16 단위 버킷으로 반올림되어 거의 동일한 음영은 하나의 색상으로 간주됩니다. 버킷은 포함된 픽셀 수에 따라 순위가 매겨지며 이미 선택된 색상과 너무 유사한 후보는 건너뛰므로 결과물은 여러 개의 유사 색상이 아닌 진정으로 구별되는 색상의 분포가 됩니다.
브라우저에서 완전히 실행됩니다
FileReader API로 이미지를 읽고 Canvas API의 getImageData 메서드로 분석합니다. 이미지 데이터가 서버로 전송되지 않으므로 기밀 브랜드 자산이나 개인 사진을 안전하게 처리할 수 있습니다. URL로 로드된 교차 출처 이미지는 브라우저가 CORS 권한 없이 픽셀 데이터를 읽는 것을 차단하므로 분석할 수 없습니다. 대신 이미지를 다운로드한 후 로컬 파일을 업로드하세요.
자주 묻는 질문
이미지에서 색상을 추출하여 컬러 팔레트를 만들려면 어떻게 하나요?
아무 이미지 파일이나 드롭하거나 업로드하세요. 이 도구는 HTML 캔버스를 사용하여 이미지의 픽셀 데이터를 샘플링하고 유사한 색상을 클러스터링한 뒤, 주요 색조를 HEX 코드, RGB 값 및 대략적인 점유 백분율과 함께 견본으로 표시합니다. 견본을 클릭하면 HEX 값이 클립보드에 복사되며, 전체 세트를 CSS 사용자 지정 속성으로 복사할 수도 있습니다.
색상 추출 시 이미지가 서버에 업로드되나요?
아니요. 색상 추출은 Canvas API의 getImageData 메서드를 사용하여 브라우저 내에서 전적으로 실행됩니다. 이미지는 숨겨진 캔버스에 로드되고 픽셀 데이터는 로컬에서 읽히며 클러스터링된 색상은 JavaScript에서 계산됩니다. 외부 서버로 전송되는 이미지 데이터가 없으므로 기밀 브랜드 자산이나 개인 사진을 안전하게 처리할 수 있습니다.
색상 추출기에서 사용할 수 있는 이미지 형식은 무엇인가요?
이 도구는 브라우저가 디코딩할 수 있는 모든 이미지 형식을 지원하며, 일반적으로 JPEG, PNG, WebP, GIF 및 BMP를 포함합니다. 파일은 FileReader API로 읽혀 캔버스에 렌더링되므로, 제한 사항은 이 도구의 제약이 아닌 브라우저의 기본 이미지 지원 범위에 따릅니다.
색상 추출 정확도는 어느 정도이며, 모든 색조를 찾을 수 있나요?
추출기는 모든 개별 픽셀이 아닌 가장 지배적인 색상 클러스터를 식별합니다. 푸른 하늘이나 피부 톤과 같이 그라데이션이 부드러운 이미지는 모든 중간 색조가 아닌 몇 가지 대표적인 HEX 값으로 요약될 수 있습니다. 복잡한 이미지를 더 세밀하게 분석하려면 추출할 색상 슬라이더를 높이세요.
브라우저 기반 색상 추출의 제한 사항은 무엇인가요?
브라우저 캔버스 보안 제한으로 인해 교차 출처 이미지는 분석할 수 없습니다. CORS 헤더가 없는 다른 도메인에 호스팅된 이미지를 연결하면 픽셀 데이터를 읽을 때 보안 오류가 발생합니다. 원격 URL을 제공하는 대신 먼저 이미지를 다운로드하고 로컬 파일을 업로드하세요.