대표 색상 추출

업로드한 이미지의 픽셀을 분석해 가장 많이 사용된 대표 색상을 뽑아 HEX·RGB 코드로 보여주는 도구입니다. 브라우저 안에서만 계산이 이루어져 서버 업로드 없이 즉시 결과를 확인할 수 있습니다.

이미지를 선택하거나 끌어다 놓으면 분석이 자동 시작됩니다. 추출 색상 개수를 5·6·8·10개 중에서 선택할 수 있고, 각 스와치를 클릭하면 HEX 코드가 클립보드로 복사됩니다.

이미지를 작은 크기로 축소해 캔버스에 그린 뒤 모든 픽셀의 RGB 값을 읽고, 비슷한 색끼리 양자화(quantization)해 버킷으로 묶습니다. 빈도가 높은 버킷 순서로 대표 색상을 선정합니다.

이미지 로딩·분석·미리보기까지 전 과정이 브라우저 안에서만 이루어지며, 파일은 서버로 전송되거나 저장되지 않습니다.

이 도구는 업로드한 이미지를 캔버스에 그리기 전에 긴 변 기준 최대 160px로 축소합니다. 대용량 사진이라도 픽셀 수를 크게 줄여 분석 속도를 확보하기 위한 성능 최적화입니다. 축소된 이미지의 모든 픽셀을 순회하며(완전 투명 픽셀은 제외) 각 R·G·B 채널을 상위 4비트만 사용해 16단계로 양자화합니다. 즉 0~255의 색상값을 16×16×16=4096개 버킷 중 하나로 묶는 방식입니다. 같은 버킷에 속한 픽셀들의 평균 RGB를 그 버킷의 대표색으로 삼고, 픽셀이 가장 많이 모인(빈도가 높은) 버킷 순서로 상위 N개를 골라 팔레트로 보여줍니다. 이는 정교한 median-cut이나 k-means 군집화 대신 단순 비트 절삭 양자화를 쓰는 경량 구현으로, 계산이 빨라 브라우저에서도 즉시 결과를 낼 수 있습니다.

추출한 색을 실제 디자인에 쓸 때는 인테리어·그래픽 디자인에서 널리 쓰이는 60-30-10 규칙을 참고하면 좋습니다. 전체 화면의 60%는 주색(배경 등 가장 넓은 면적), 30%는 보조색(카드·섹션 구분), 10%는 강조색(버튼·링크 등 시선을 끌어야 할 요소)에 배분하는 방식입니다. 이 도구가 빈도순으로 뽑아주는 팔레트에서 가장 앞쪽(빈도가 가장 높은) 색상은 이미지에서 가장 넓은 면적을 차지한 색이므로 60% 주색 후보로, 중간 순위는 30% 보조색으로, 가장 튀는 채도 높은 색은 10% 강조색으로 배치하면 자연스러운 배색을 빠르게 잡을 수 있습니다.