대표 색상 추출
이미지에서 주요 색상 팔레트를 추출(HEX·RGB)
대표 색상 추출이란?
업로드한 이미지의 픽셀을 분석해 가장 많이 사용된 대표 색상을 뽑아 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%는 강조색(버튼·링크 등 시선을 끌어야 할 요소)에 배분하는 방식입니다. 이 도구가 빈도순으로 뽑아주는 팔레트에서 가장 앞쪽(빈도가 가장 높은) 색상은 이미지에서 가장 넓은 면적을 차지한 색이므로 60% 주색 후보로, 중간 순위는 30% 보조색으로, 가장 튀는 채도 높은 색은 10% 강조색으로 배치하면 자연스러운 배색을 빠르게 잡을 수 있습니다.
What is this?
Analyzes the pixels of your uploaded image to pull out the most common representative colors as HEX and RGB codes — all computed in your browser, no upload needed.
How to use it
Pick or drop an image and analysis starts automatically. Choose the number of colors (5, 6, 8, or 10), and click any swatch to copy its HEX code to your clipboard.
How extraction works
The image is downscaled and drawn onto a canvas, then every pixel's RGB value is read and grouped into similar-color buckets via quantization. The most frequent buckets become the representative colors.
Privacy & safety
Loading, analyzing and previewing all happen entirely in your browser — files are never uploaded or stored on a server.
How extraction works — this tool's quantization method
Before drawing your image to canvas, this tool downscales it to a max of 160px on the longer side — a performance optimization that keeps even large photos fast to analyze. It then walks every pixel of the downscaled image (skipping fully transparent ones) and quantizes each R/G/B channel to 16 levels using only the top 4 bits — mapping the 0-255 range into one of 16×16×16=4096 buckets. Pixels in the same bucket are averaged into that bucket's representative color, and the buckets with the most pixels (highest frequency) become the top N colors in the palette. This is a lightweight bit-truncation quantization rather than a more elaborate median-cut or k-means clustering — fast enough to compute instantly in the browser.
Using extracted colors in design — the 60-30-10 rule
When applying extracted colors to an actual design, the 60-30-10 rule from interior and graphic design is a handy guide: allocate 60% to a dominant color (backgrounds, the largest area), 30% to a secondary color (cards, section dividers), and 10% to an accent color (buttons, links — anything that should catch the eye). Since this tool ranks colors by frequency, the top color is the one covering the most area in your image — a natural pick for the 60% dominant slot — mid-ranked colors work well as the 30% secondary, and the most saturated, eye-catching color makes a good 10% accent.