사진 색상 팔레트 추출기
이미지를 업로드하면 대표 도미넌트 컬러 5~8종을 추출하여 HEX/RGB/HSL 코드 및 명도 대비 분석
추출된 색상 팔레트
지금 계산한 분들이 함께 많이 사용하는 도구
사용 방법 및 안내
사진 색상 팔레트 추출기는 사진이나 디자인 이미지를 업로드하면 이미지 속 대표 도미넌트 컬러 5~8종을 브라우저 캔버스 픽셀 양자화 알고리즘으로 추출하여 HEX, RGB, HSL 코드 및 WCAG 웹 접근성 명도 대비를 계산 제공하는 전문 컬러 분석 도구입니다.
색상 양자화(Color Quantization) 알고리즘 및 계산 공식
HTML5 Canvas getImageData 픽셀 버퍼에서 RGBA 값을 샘플링한 후, 3차원 RGB 색공간을 32단계 버킷으로 양자화(Quantization)합니다. 지배 빈도수(Population)와 유클리드 색상 거리(Color Distance)를 계산하여 시각적으로 조화롭고 다양한 대표 색상을 선별합니다.
2026 웹 접근성(WCAG 2.1) 명도 대비 기준표
- WCAG AA 기준: 일반 본문 텍스트 최소 4.5:1 이상, 대형 헤드라인 최소 3.0:1 이상 충족.
- WCAG AAA 기준: 일반 본문 텍스트 최소 7.0:1 이상, 대형 헤드라인 최소 4.5:1 이상 충족.
- CSS 변수 내보내기:
--color-1: #HEX형식의 원클릭 스타일시트 코드 제공. - 원클릭 클립보드 복사: HEX, RGB, HSL 포맷을 클릭 한 번으로 즉시 복사.
보안 및 프라이버시 원칙 (유의사항 안내)
사용자가 업로드한 인물 사진, 상품 시안, 풍경 이미지는 서버로 전송되거나 저장되지 않으며, 사용자 기기의 브라우저 메모리 안에서만 100% 안전하게 분석됩니다.
자주 묻는 질문 (FAQ)
색상 팔레트 추출 알고리즘은 어떤 원리로 동작하나요?
이미지의 픽셀 데이터를 브라우저 캔버스로 추출한 후, 3차원 RGB 색상 양자화(Color Quantization)와 거리 계산을 통해 가장 지배적이고 조화로운 대표 색상 5~6종을 선별합니다.
각 색상별로 표시되는 WCAG 명도 대비율은 무엇인가요?
웹 접근성 지침(WCAG 2.1)에 따른 흰색 및 검은색 배경 대비 텍스트 가독성 비율(1:1 ~ 21:1)을 나타내어, UI 디자인 시 시각 장애인도 읽기 편한 색상 조합을 고를 수 있도록 돕습니다.
업로드한 사진이나 디자인 시안이 외부로 전송되나요?
절대 전송되지 않습니다. 모든 이미지 픽셀 분석 및 팔레트 추출은 브라우저 내부에서 100% 로컬로 수행됩니다.