본문 바로가기

이미지 색상 추출

사진에서 원하는 지점의 색을 집어내고, 이미지의 주요 색상 팔레트도 함께 뽑아 줍니다.

로딩 중...

왜 만들었나요

참고 이미지에서 색을 가져오려고 캡처 도구 스포이드를 쓰면, 화면에 표시된 픽셀을 찍는 거라 원본과 미묘하게 다른 값이 나왔습니다. 원본 이미지에서 직접 읽으면 정확하겠다 싶어 만들었습니다.

Note

올린 이미지는 서버로 전송되지 않습니다. 색을 읽는 처리가 전부 브라우저 안에서 이뤄져, 시안이나 미공개 디자인도 기기 밖으로 나가지 않습니다.

사용 방법

  1. 이미지를 드래그하거나 클릭해서 올립니다. 여러 장을 올리면 오른쪽 목록에서 전환하며 볼 수 있습니다.

    이미지 색상 추출-guide-1

  2. 이미지 위에 마우스를 올리면 그 지점이 격자로 표시되고, 주변을 16×16으로 확대한 미리보기가 뜹니다. 가운데 빨간 칸이 지금 집고 있는 자리입니다.

    이미지 색상 추출-guide-2

  3. 클릭하면 색이 고정되고 네 가지 형식의 코드가 나옵니다. 각 코드 옆 복사 버튼으로 가져가세요.

    이미지 색상 추출-guide-3

  4. 아래 주요 색상에서 이미지 전체를 대표하는 색들을 확인하고, 클릭하면 그 색이 선택됩니다.

    이미지 색상 추출-guide-4

이렇게 나옵니다

참고 이미지를 올려 색을 집으면 이렇게 나옵니다.

HEX    #33CEB2
RGBA   rgba(51, 206, 178, 1)
HSLA   hsla(168, 60%, 50%, 1)
CMYK   75, 0, 14, 19   ← 참고용

알아두면 좋은 것

화면 스포이드보다 정확한 이유

브라우저 확장이나 캡처 도구의 스포이드는 화면에 그려진 픽셀을 찍습니다. 이미지가 표시될 때 눌린 톤이나 살짝 흐려진 색이 잡히곤 하죠.

이 도구는 화면이 아니라 올린 이미지 데이터에서 직접 읽습니다. 그래서 같은 이미지의 같은 지점은 언제나 같은 값이 나옵니다.

주요 색상은 어떻게 뽑나

이미지의 픽셀을 비슷한 색끼리 묶은 뒤 각 묶음의 평균색을 대표로 씁니다. 단순히 많이 쓰인 색을 세는 방식보다 사진처럼 미세하게 색이 다른 이미지에서 사람이 느끼는 "주요 색감"에 가깝게 나옵니다.

이런 경우에는

CMYK 값을 인쇄소에 그대로 줘도 되나요

참고용으로만 쓰세요. 화면의 빛과 종이의 잉크는 색을 만드는 방식이 물리적으로 달라서, 계산으로 환산한 값은 실제 인쇄 결과와 차이가 납니다. 상업 인쇄용이라면 전문 프로그램에서 인쇄용 색 설정을 적용해 변환해야 정확합니다.

큰 사진을 넣으면 색이 달라지나요

아주 큰 이미지는 긴 변 1400픽셀에 맞춰 줄인 뒤 색을 읽습니다. 여러 픽셀이 평균으로 합쳐지므로 아주 미세한 점의 색은 달라질 수 있지만, 면 단위 색은 거의 차이가 없습니다.

용량 제한에 걸려요

장당 30MB, 최대 20장까지입니다. 처리가 브라우저 안에서 이뤄져 기기 메모리에 맞춘 값입니다. 카메라 원본 대신 내보내기·저장할 때 용량을 줄인 파일을 올리면 됩니다.

용어 설명

HEX · RGBA · HSLA

같은 색을 다르게 적는 방식입니다. HEX는 #33CEB2 형태로 웹에서 가장 널리 쓰이고, RGBA는 빨강·초록·파랑에 투명도를 더한 값, HSLA는 색상·채도·명도로 표현해 밝기 조절이 직관적입니다.

CMYK

인쇄용 색 표기입니다. 청록·자홍·노랑·검정 잉크의 비율로 색을 나타내며, 화면용 표기와 원리가 달라 서로 정확히 대응하지 않습니다.

자주 묻는 질문

화면 스포이드보다 색을 정확하게 집나요?

네, 다만 색을 읽는 방식이 다릅니다. 브라우저 확장·캡처 툴의 스포이드는 화면에 렌더링된 픽셀을 찍기 때문에 이미지가 표시될 때 눌린 톤이나 살짝 흐려진 색이 잡히곤 합니다. 이 도구는 화면을 캡처하지 않고 업로드한 이미지 데이터를 직접 읽어, 커서가 놓인 격자 셀 안의 색을 평균 내 보여 줍니다(사진이 아주 크면 긴 변 1400픽셀에 맞춰 줄인 뒤 읽습니다). 커서 주변을 16×16으로 확대한 미리보기로 어느 자리를 집는지 짚어 줍니다. 셀 크기는 이미지가 화면에 표시된 크기에 맞춰 정해지므로, 창 너비가 크게 다르면 같은 지점이라도 평균 범위가 달라져 값이 조금 달라질 수 있습니다.

집은 색을 어떤 형식으로 복사할 수 있나요?

지점을 클릭하면 그 색이 고정되고 HEX, RGBA, HSLA, CMYK 네 가지 코드가 함께 표시됩니다. 각 코드 옆 복사 버튼으로 형식 그대로 클립보드에 담아 CSS나 디자인 툴에 바로 붙여 넣을 수 있습니다.

주요 색상은 어떤 방식으로 뽑나요?

이미지의 픽셀을 k-means 군집화 알고리즘으로 분석해, 비슷한 색끼리 묶은 뒤 각 묶음의 평균색을 대표 색상으로 추출합니다. 단순히 많이 쓰인 픽셀 값을 세는 방식보다 노이즈에 강하고, 사진처럼 미세하게 색이 다른 픽셀이 많은 이미지에서도 사람이 인지하는 '주요 색감'에 가까운 팔레트가 나옵니다. 주요 색상의 색을 클릭하면 그 색이 곧바로 선택돼 코드로 확인·복사할 수 있습니다.

최대 용량이 왜 제한되나요?

이 도구는 이미지를 서버로 전송하지 않고 모든 분석을 사용자 브라우저 안에서 처리합니다. 그래서 기기 메모리 한도에 맞춰 장당 30MB, 최대 20장으로 제한하고 있습니다. 이 한도를 넘는 사진은 카메라 원본 대신 내보내기·저장할 때 용량을 줄인 파일로 올려 주세요. 색을 읽을 때는 어차피 긴 변 1400픽셀에 맞춰 줄인 화면에서 계산하므로 결과 색은 거의 달라지지 않습니다. 원본이 외부로 나가지 않으므로 시안·미공개 디자인도 안심하고 사용할 수 있습니다.

마지막 업데이트: 2026년 8월