256 Tools

이미지 색상 추출 — 사진에서 주요 색상(HEX/RGB)과 비율 추출, 업로드 없이

이미지를 여기에 끌어다 놓거나 클릭하여 선택하세요

PNG, JPEG, WebP, GIF 지원

이미지는 업로드되지 않습니다 — 모든 처리가 브라우저에서 이루어집니다.

관련 외부 도구

일부 링크는 제휴 링크입니다.

Adobe Creative Cloud크리에이티브 제품군Canva쉬운 그래픽 디자인

관련 도구

색상 변환HEX·RGB·HSL·HSV·RGBA를 한 화면에서 상호 변환. 값 하나만 바꿔도 전부 연동, 원클릭 복사, 투명도·WCAG 대비 지원.배색 생성기기준 HEX에서 보색·유사색·트라이어드 등 조화로운 컬러 팔레트를 자동 생성. 색상을 잠그고 나머지를 재생성하며 CSS 변수·Tailwind·JSON으로 내보내기.그라데이션 생성기여러 색상 정지점으로 선형·방사형·원뿔형 CSS 그라데이션을 만드세요. 각도·형태·중심을 조정하고 background CSS 또는 Tailwind 값을 원클릭으로 복사.폰트 조합 도구엄선한 Google Fonts 제목×본문 조합을 실시간으로 미리보고 CSS를 한 번에 복사하세요.

이 무료 색상 추출 도구는 사진, 일러스트, 스크린샷 등 모든 이미지에서 주요 색상 팔레트를 브라우저 내에서 바로 추출합니다 — 아무것도 업로드하지 않아도 됩니다. PNG, JPEG, WebP 또는 GIF 이미지를 끌어다 놓으면 median cut 양자화 알고리즘을 사용해 핵심 색상을 즉시 추출하며, 각 색상의 HEX 코드, RGB 값, 이미지 내 대략적인 비율을 확인할 수 있습니다. 추출할 색상 수(2–12)를 선택하고, HEX를 한 번에 복사하거나 전체 팔레트를 CSS 변수 또는 JSON으로 내보낼 수 있습니다.

사용 방법

  1. 이미지를 위 영역에 끌어다 놓거나 클릭하여 파일 선택기를 엽니다. PNG, JPEG, WebP, GIF를 지원합니다.
  2. 주요 색상 팔레트가 즉시 나타납니다 — 각 색상 견본에 HEX 코드, RGB 값, 이미지 내 대략적인 비율이 표시됩니다.
  3. 슬라이더를 사용하여 추출할 색상 수(2–12)를 선택합니다. 이미지를 다시 불러오지 않고 팔레트가 즉시 업데이트됩니다.
  4. 견본이나 복사 버튼을 클릭하여 HEX를 복사합니다. 'HEX 전체 복사'를 사용하면 모든 색상을 한 번에 가져올 수 있습니다.
  5. 내보내기 탭으로 전환하면 붙여넣기 가능한 CSS 변수 블록 또는 JSON이 생성되며 복사하거나 다운로드할 수 있습니다.
  6. 설치 불필요, 가입 불필요. 이미지는 기기를 벗어나지 않습니다.

기능 및 작동 방식

주요 색상 추출 (이미지 전체 팔레트)

단일 픽셀만 가져오는 것이 아니라 median cut 색상 양자화를 사용하여 전체 이미지를 분석합니다. 알고리즘은 유사한 색상을 클러스터로 그룹화하고 각 클러스터에 대한 대표 색상을 선택하여 이미지의 전반적인 색상 스토리를 제공합니다. 속도를 유지하기 위해 분석 전에 이미지를 축소합니다(긴 면 ≤ 160px).

각 색상의 HEX, RGB 및 비율(%)

추출된 각 색상에는 HEX 코드(#RRGGBB, 대문자), RGB 값, 이미지 내 대략적인 비율이 표시됩니다. 색상은 비율이 높은 순서로 정렬됩니다. 참고: 비율은 근사치이며 독립적인 반올림으로 인해 합계가 정확히 100%가 되지 않을 수 있습니다.

추출할 색상 수 선택

슬라이더를 사용하여 2~12 사이의 색상 수를 설정합니다. 수를 변경하는 것은 즉각적입니다 — 이미지를 다시 불러올 필요가 없습니다.

복사 및 내보내기 (CSS 변수 / JSON)

각 색상 견본에는 HEX를 복사하는 버튼이 있으며 'HEX 전체 복사'는 모든 색상을 한 번에 가져옵니다. 내보내기 패널은 붙여넣기 가능한 CSS 변수 블록 또는 JSON 객체를 생성합니다. 색상 값은 항상 CSS와 호환됩니다.

업로드 없음 — 이미지가 기기에 남아 있습니다

이미지 로드, 크기 조정, 색상 분석은 브라우저의 Canvas API를 사용하여 로컬에서 이루어집니다. 이미지는 서버에 전송되거나 저장, 공유되지 않습니다.

활용 사례

참고 이미지나 사진에서 색상 팔레트 추출

마음에 드는 디자인의 사진, 일러스트, 스크린샷을 끌어다 놓으세요. 팔레트는 주요 색상과 그 비율을 보여줍니다 — 웹사이트나 디자인 프로젝트를 위한 색상 팔레트를 구축하는 훌륭한 출발점입니다.

로고나 브랜드 에셋에서 브랜드 색상 추출

로고나 브랜드 에셋을 끌어다 놓으면 각 색상의 정확한 HEX 코드를 얻을 수 있습니다. 웹사이트, 문서, 프레젠테이션에서 올바른 브랜드 색상을 사용하는지 확인하는 데 유용합니다.

CSS 또는 JSON으로 색상 바로 내보내기

내보내기 패널을 사용하여 CSS 변수 또는 JSON 객체를 코드에 바로 복사하세요. 비율을 통해 어떤 색상이 주요 색상인지, 강조 색상인지 등을 파악할 수 있습니다.

참고 사항 및 제한

  • 근사값: 도구는 분석 전에 이미지를 축소하고 유사한 색상을 그룹화하므로 추출된 색상과 비율은 근사치입니다.
  • 비율 합계가 100%가 아닐 수 있음: 각 색상 비율은 독립적으로 소수점 첫째 자리에서 반올림됩니다. 합계가 100%보다 약간 높거나 낮을 수 있습니다.
  • 요청한 것보다 적은 색상: 이미지의 고유 색상 수가 선택한 수보다 적으면 존재하는 색상만 반환됩니다. 가짜 색상은 추가되지 않습니다.
  • 투명 픽셀 제외: 투명도가 있는 PNG 이미지의 경우 완전히 또는 대부분 투명한 픽셀(알파 < 128)은 계산되지 않습니다.
  • 애니메이션 GIF: 애니메이션 GIF의 첫 번째 프레임만 분석됩니다.

자주 묻는 질문

이미지가 서버에 업로드되나요?
아니요. 모든 처리는 Canvas API를 사용하여 브라우저에서 로컬로 이루어집니다. 이미지는 어디에도 전송, 저장, 공유되지 않습니다.
단색이 아닌 전체 색상 팔레트를 추출할 수 있나요?
네, 이것이 주요 기능입니다. 도구는 median cut 양자화를 사용하여 전체 이미지를 분석하고 가장 대표적인 색상들을 팔레트로 반환하며, 각 색상에는 비율이 포함됩니다.
각 색상의 비율(%)은 얼마나 정확한가요?
근사치입니다. 이미지가 분석 전에 축소되고 유사한 색상이 그룹화되므로 비율은 정확한 픽셀 수가 아닌 축소된 샘플에서의 색상 존재를 반영합니다.
몇 가지 색상을 추출할 수 있나요?
2~12가지입니다. 슬라이더를 사용하여 수를 설정하세요. 이미지의 고유 색상 수가 요청한 것보다 적으면 존재하는 색상만 반환됩니다 — 가짜 색상은 추가되지 않습니다.
어떤 이미지 형식이 지원되나요?
PNG, JPEG, WebP, GIF(첫 번째 프레임만). SVG, HEIC 등 다른 형식은 지원되지 않습니다.
추출된 색상을 코드에서 사용할 수 있나요?
네. 각 색상에는 HEX를 한 번에 복사하는 버튼이 있으며, 내보내기 패널은 HEX, RGB, 비율이 포함된 CSS 변수 또는 JSON 객체를 생성합니다 — 프로젝트에 바로 붙여넣을 수 있습니다.
투명한 PNG는 어떻게 처리되나요?
투명 픽셀(알파 128 미만)은 분석에서 제외되므로 팔레트에 검정이나 흰색으로 나타나지 않습니다. 완전히 투명한 이미지는 색상을 반환하지 않습니다.

광고 및 분석을 위해 쿠키를 사용합니다.