IMG.DIY / 추가 도구 / 색상 팔레트 추출기

색상 팔레트 추출기

어떤 이미지든 지배적인 색상을 바로 복사할 수 있는 HEX 코드로 얻으세요.

색상 팔레트 추출기 visual example
개인정보 우선: 아무것도 업로드되지 않아요.

From input to result

Choose a file, make the change, and download the result. Processing stays in your browser.

색상 팔레트 추출기: 1 · Choose input
1 · Choose input
색상 팔레트 추출기: 2 · Adjust and process
2 · Adjust and process
색상 팔레트 추출기: 3 · Download result
3 · Download result

상품 사진, 브랜드 촬영본, 무드 이미지를 바탕으로 디자인을 짜는 일은 그 색상에서 시작합니다. 이미지를 넣으면 지배적인 팔레트를 밝은 색부터 어두운 색 순으로 얻고, 각 견본은 클릭 한 번으로 HEX 코드가 복사됩니다.

추출은 실제 픽셀에 median-cut 양자화를 적용합니다 — 이미지 편집기가 쓰는 것과 같은 계열의 알고리즘이라 — 팔레트가 흐릿한 평균이 아니라 실제 색 분포를 반영합니다.

사용 방법

  1. 이미지 추가사진, 로고, 아트워크 무엇이든.
  2. 팔레트 크기 조절3가지에서 12가지 색상까지 — 견본이 실시간으로 갱신됩니다.
  3. 코드 복사견본을 클릭해 HEX를 얻거나 전체 팔레트를 한 번에 복사하세요.

어떤 이미지에서든 진짜 팔레트 추출

이 추출기는 이미지의 실제 픽셀을 읽어, 좋은 색 축소의 기반이 되는 것과 같은 방식인 median-cut 양자화로 지배적인 색을 찾아냅니다. 즉 팔레트가 추측이나 필터로 뭉갠 평균이 아니라 사진에 실제로 담긴 것을 반영합니다. 그림을 불러오면 원본에서 곧바로 뽑아낸 hex 색상 견본 세트를 얻습니다.

몇 개의 색을 뽑을지, 3개에서 12개 사이에서 여러분이 고릅니다. 견본이 적으면 브랜드 스타일의 간결한 팔레트가, 많으면 디자인 작업을 위한 더 풍부한 색 구성이 나옵니다. 동일한 견본은 중복 제거되므로 같은 hex를 두 번 얻는 일은 없습니다.

hex 코드를 한 번의 클릭으로 복사

모든 견본이 자신의 hex 값을 표시하며, 견본을 클릭하면 그 코드가 클립보드에 복사됩니다. 전체 세트를 원하면 버튼 하나로 팔레트 전체를 한 번에 복사해, CSS, 디자인 도구, 스타일 가이드에 붙여 넣을 준비를 마칩니다. 팔레트는 밝은 색에서 어두운 색으로 정렬되어, 뒤죽박죽이 아니라 정돈된 계조처럼 읽힙니다.

모든 것이 여러분의 이미지로 브라우저에서 실행되므로, 아무것도 업로드하지 않고 사진, 스크린샷, 로고에서 색 팔레트를 추출할 수 있습니다.

이럴 때 사용해요

브랜드 팔레트 구축 — 로고나 히어로 이미지에서 지배색을 뽑아 일관된 색 체계의 중심으로 삼으세요.

디자인을 사진에 맞추기 — 제품 사진에서 색 구성을 추출해 레이아웃이 같은 이미지의 일부처럼 느껴지게 하세요.

웹과 UI 테마 — 무드 이미지에서 hex 코드를 얻어 사이트의 강조색과 배경색 CSS 변수의 씨앗으로 삼으세요.

작품에서 색 고르기 — 일러스트나 그림 속 실제 색을 샘플링해 자신의 작업에 재사용하세요.

발표와 슬라이드 테마 — 표지 이미지에서 지배색 몇 가지를 추출해 발표 자료 전체의 테마로 쓰세요.

패션과 인테리어 무드보드 — 영감을 준 사진에서 팔레트를 얻어 원단, 페인트, 소품을 맞추세요.

데이터 시각화 색 세트 — 참고 이미지에서 뚜렷이 구분되는 색 세트를 뽑아 차트 팔레트를 만드세요.

빠른 hex 조회 — 스크린샷을 넣고 필요한 견본을 클릭해 정확한 hex 코드를 복사하세요.

이미지에서 색을 곧장 뽑아내세요

사진 한 장, 스크린샷 하나, 포장지 한 조각, 영화 스틸이 있고—그 안의 색을 HEX 코드로 원합니다. 웹사이트를 브랜드 사진에 맞추려고, 제품 사진을 중심으로 슬라이드 테마를 짜려고, 아니면 포스터의 그 그라데이션이 실제로 무엇인지 알아내려고요. 눈으로 색을 읽는 것은 믿을 수 없습니다. 모니터에서 남색으로 보이는 색이 #1B2A4A일 수도 #14233F일 수도 있고, 짐작은 시간과 살짝 어긋난 결과를 대가로 치릅니다.

본능은 팔레트 사이트를 열어 색을 처음부터 다시 만드는 것이지만, 그건 작업을 거꾸로 뒤집는 일입니다. Coolors와 Adobe Color 같은 도구는 팔레트를 생성하는 데 뛰어납니다. 스와치를 잠그고, 스페이스바를 누르고, 조화를 탐색하죠. 하지만 원하는 색이 이미 이미지 안에 존재한다면, 무에서 생성하는 것은 먼 길로 돌아가는 것입니다. 결국 한 앱에서 이미지를 스포이트로 찍고 다른 앱에 HEX 코드를 붙여 넣게 됩니다.

Palette는 곧바로 그 일을 합니다. 이미지를 넣으면 중간값 절단(median-cut) 양자화—이미지를 가장 대표적인 색으로 줄이는 데 쓰이는 것과 같은 계열의 알고리즘—를 써서 지배적인 색 한 벌을 추출한 뒤, 밝은 것부터 어두운 것으로 정렬한 스와치로 보여줍니다. 어느 스와치든 클릭해 HEX 코드를 복사하거나 전체 세트를 한 번에 복사하세요. 슬라이더로 3색부터 12색까지 가므로, 촘촘한 강조 한 쌍이나 완전한 테마를 뽑을 수 있습니다. 전적으로 여러분의 브라우저에서 돌아갑니다. 이미지를 로컬로 읽고 절대 업로드하지 않는데, 원본이 미출시 디자인, 고객의 사진, 또는 그저 색을 뽑자고 서버에 보내고 싶지 않은 무엇일 때 중요합니다.

무엇이 다른가

  • 생성이 아니라 추출. 팔레트를 처음부터 만들라고 요구하는 대신 이미지에 이미 있는 색을 읽습니다.
  • 중간값 절단 양자화. 무작위 픽셀 몇 개를 표본으로 삼는 게 아니라 진짜 알고리즘이 대표적인 지배 색을 고릅니다.
  • 조절 가능한 개수. 3색에서 12색까지—강조 한 쌍이든 완전한 테마든—슬라이드하면 실시간으로 다시 추출합니다.
  • 클릭해 복사. 어느 스와치든 눌러 HEX를 얻거나, 모든 코드를 한 번의 클릭으로 복사해 CSS, 디자인 도구, 슬라이드 테마에 붙여 넣을 준비를 합니다.
  • 쓰기 좋게 정렬. 스와치가 밝기순으로 배열되어 팔레트가 자연스럽게 읽힙니다.
  • 사적이고 오프라인. 이미지가 절대 기기를 벗어나지 않고, 첫 방문 이후 연결 없이 계속 작동합니다.
  • 무료, 계정 없음, 워터마크 없음.

IMG.DIY와 다른 색 도구 비교

Coolors와 Adobe Color는 무게 중심이 다른 강력한 도구입니다. 솔직한 갈림길은 팔레트를 생성하느냐 대 이미지에서 색을 뽑느냐입니다.

항목 Coolors Adobe Color IMG.DIY
핵심 강점 팔레트 생성 및 탐색 색 조화, Adobe 통합 이미지에서 색 추출
이미지에서 추출 가능 (업로드 / 무료엔 기능 제한) 가능 가능, 핵심 기능
이미지 서버 업로드 대체로 예 아니오, 브라우저에 남음
계정 필요 저장 / 일부 기능에는 필요 전체 사용엔 Adobe 계정 아니오
조절 가능한 색 개수 가능 고정 세트 3–12, 실시간
HEX 복사 가능 가능 스와치 클릭, 또는 전체 복사
오프라인 불가 불가 가능, 첫 방문 이후
비용 무료 등급 + 유료 Adobe 계정으로 무료 무료, 제한 없음

여러분의 일이 무에서 팔레트를 디자인하는 것—조화를 탐색하고, 잠그고 섞고, 모음을 저장하는 것—이라면 Coolors와 Adobe Color가 더 나은 보금자리이고, Creative Cloud 안에서 산다면 Adobe Color는 이기기 어렵습니다. 이 도구가 겨냥한 바로 그 경우에서 그것들은 무거워집니다. 이미 이미지가 있고 그저 그 색을, 사적으로, 업로드나 로그인 없이 원할 때 말이죠. Palette는 한 번 넣으면 HEX 코드를 뽑아내고, 개수를 조절하게 하고, 대신 복사해 줍니다. 그런 뒤 길을 비켜섭니다.

IMG.DIY를 선택하는 이유

실제 지배색

흐릿한 평균이 아니라 실제 픽셀에 대한 median-cut.

원클릭 복사

각 견본이 HEX를 즉시 복사합니다.

3–12가지 색상

팔레트의 세밀함을 정확히 설정.

안전함

이미지는 기기를 절대 벗어나지 않습니다.

자주 묻는 질문

색상은 어떻게 골라지나요?
median-cut 양자화가 이미지의 픽셀을 색 분포에 따라 그룹으로 나누고 각 그룹을 평균 냅니다 — 고전적인 팔레트 추출 방식입니다.
색상을 더 많거나 적게 얻을 수 있나요?
네, 슬라이더가 3에서 12까지 있으며 즉시 다시 추출합니다.
제 눈에 보이는 색이 왜 빠졌나요?
작은 강조 영역은 더 큰 그룹에 흡수될 수 있습니다. 색상 개수를 늘려 드러내세요.
전체 팔레트를 복사할 수 있나요?
한 번의 클릭으로 모든 HEX 코드가 쉼표로 구분되어 복사되어, CSS나 디자인 문서에 바로 쓸 수 있습니다.
몇 가지 색을 추출할 수 있나요?
3개에서 12개 사이 원하는 수를 고를 수 있습니다. 간결한 브랜드 스타일 팔레트에는 적은 수를, 디자인이나 일러스트를 위한 더 풍부한 구성이 필요하면 많은 수를 고르세요.
어떤 색이 지배적인지 어떻게 정하나요?
이미지의 실제 픽셀에 median-cut 양자화를 실행하는데, 이는 색 공간을 반복해 나눠 가장 대표적인 색을 찾습니다. 결과는 흐린 평균이 아니라 사진 속 색의 실제 분포를 반영합니다.
어떤 색 포맷을 얻나요?
견본은 웹과 대부분의 디자인 도구의 표준인 hex 코드로 제공됩니다. 견본 하나를 클릭해 그 hex를 복사하거나, 팔레트 전체를 한 번에 복사해 CSS나 스타일 가이드에 붙여 넣으세요.
왜 거의 똑같은 색 몇 가지가 합쳐지나요?
도구가 동일한 견본을 중복 제거해 같은 hex에 자리를 낭비하지 않게 합니다. 두 색조가 실제로 다르면 따로 남고, 정확히 일치하는 것만 하나로 합쳐집니다.
이미지 크기나 포맷이 중요한가요?
JPEG, PNG 같은 일반적인 포맷은 바로 작동합니다. 샘플링이 브라우저에서 이뤄지므로 매우 큰 이미지도 무리 없이 처리되지만, 지극히 세밀한 사진은 처리에 잠시 더 걸릴 수 있습니다.
스크린샷이나 로고에도 쓸 수 있나요?
네. 스크린샷, 로고, 작품을 포함해 어떤 이미지든 작동하므로, 화면에 있는 무언가에서 정확한 hex 색을 빠르게 얻는 용도로도 쓸 수 있습니다.

관련 도구

가이드 & 팁