이미지 색상 추출기

Acrafto Team 이미지

업데이트 2026년 9월 22일

로고나 사진, 스크린샷에 쓰인 색이 정확히 무엇인지 알고 싶으신가요? 이미지를 업로드하고 원하는 지점에 마우스를 올린 뒤 클릭하기만 하면 됩니다. 색상 코드는 선택한 형식으로 바로 클립보드에 복사됩니다. HEX, RGB, HSL, HSV, LCH 중에서 고를 수 있습니다. 설치할 필요도 없고, 이미지가 내 컴퓨터 밖으로 나가지도 않습니다.

이미지에서 색상 코드 추출하는 방법

이미지를 업로드하세요. 창 안으로 끌어다 놓거나 “파일 찾아보기”를 클릭하세요. JPG, PNG, WebP, GIF를 모두 지원합니다.
형식을 선택하세요. 이미지 위쪽에서 색상을 어떤 표기로 복사할지 고르세요. 웹 작업에는 보통 HEX, 그래픽 프로그램에는 RGB가 편합니다. 선택한 형식은 그대로 기억됩니다.
색상 위에 마우스를 올려보세요. 커서 옆에 주변 픽셀을 확대해 보여주는 돋보기와 색상 코드가 함께 나타납니다.
클릭하세요. 코드가 클립보드에 복사되고, 해당 색은 선택한 색상 탭에 저장됩니다. 필요한 곳에 바로 붙여넣으면 됩니다.

다른 이미지로 바꾸고 싶다면 지금 올려둔 이미지 위에 새 파일을 끌어다 놓거나, 휴지통 아이콘으로 지우면 됩니다.

온라인 이미지 색상 추출기의 기능

픽셀 하나까지 보여주는 돋보기

일반적인 스포이드 도구는 커서 아래 색상만 보여주기 때문에, 글자의 얇은 테두리처럼 좁은 영역을 정확히 클릭하기는 어렵습니다. 이 돋보기는 커서 주변 11 × 11픽셀 영역을 확대해서 보여주고 가운데 픽셀을 테두리로 표시합니다. 클릭하기 전에 무엇을 클릭하게 될지 정확히 확인할 수 있습니다.

픽셀 단위까지 확대

플러스, 마이너스 버튼이나 Ctrl을 누른 채 마우스 휠을 돌리면 최대 64배까지 확대됩니다. 격자를 켜면 픽셀 경계가 보이므로 아이콘, 픽셀 아트, 작은 글자에서도 원하는 지점을 정확히 클릭할 수 있습니다.

축소판이 아닌 원본에서 추출한 색상

많은 온라인 도구는 이미지를 먼저 줄인 뒤 그 미리보기에서 색을 읽어오는데, 이 과정에서 주변 픽셀이 섞여버립니다. 이 도구는 원본 해상도(긴 변 기준 최대 4096px)를 그대로 사용하므로 실제 픽셀의 색상을 얻을 수 있습니다.

클릭 한 번으로 복사

텍스트를 따로 선택하거나 숫자를 다시 입력할 필요가 없습니다. 이미지를 클릭할 때마다 선택한 형식의 코드가 바로 복사됩니다. 같은 색을 다른 표기로도 필요하다면, 색상 상세 정보에서 다섯 가지 형식을 모두 확인하고 각각 복사 버튼을 누르면 됩니다.

주요 색상 팔레트

이미지를 올리면 곧바로 가장 많이 쓰인 색을 최대 8개까지 찾아 주요 색상 탭에 보여줍니다. 거의 비슷한 색조는 하나로 합쳐지므로 팔레트에 회색만 다섯 개씩 나오는 일은 없습니다. PNG의 투명한 부분은 제외됩니다. 이 팔레트는 웹사이트, 발표 자료, SNS 게시물의 배색을 정할 때 출발점으로 쓰기 좋습니다. 색조를 빼도 충분한 대비가 유지되는지는 이미지를 흑백으로 변환해서 바로 확인할 수 있습니다.

선택한 색상은 계속 확인 가능

클릭한 색상은 모두 선택한 색상 탭에 저장됩니다(최근 24개). 이미지의 여러 지점을 비교하고 언제든 다시 확인할 수 있습니다. 화면이 넓으면 색상 패널이 이미지 바로 옆에 표시됩니다.

이미지에서 색상 코드가 필요한 상황

웹사이트와 앱: 클라이언트가 로고를 JPG로만 보내왔는데 CSS에 정확한 브랜드 색상이 필요할 때. 배경이 투명한 버전도 필요하다면 이미지 배경 제거를 함께 사용하세요.
그래픽과 SNS: 게시물의 텍스트 색을 사진 분위기에 맞추고 싶을 때. 사진에서 바로 색을 가져오면 됩니다.
발표 자료와 문서: PowerPoint, Google 슬라이드, Canva에서 회사 로고 색상을 HEX나 RGB로 정확히 설정할 때.
디자인 검수: 스크린샷을 보고 앱의 버튼이 디자인 시안대로 색이 맞는지 확인할 때. 내보낸 이미지의 크기는 이미지 크기 분석 도구로 함께 점검할 수 있습니다.
인테리어와 패션: 원단이나 벽 사진을 보고 비슷한 색을 찾고 싶을 때. 추출한 코드는 색상 카드에서 색을 고를 때 출발점이 됩니다.

색상 추출기가 제공하는 색상 형식

HEX (#1373b6): HTML, CSS와 대부분의 그래픽 도구에서 쓰는 표기법입니다. 짧은 표기와 알파 채널 표기는 MDN 문서(영어)에서 확인할 수 있습니다.
RGB (rgb(19, 115, 182)): 빨강, 초록, 파랑의 양을 각각 0부터 255까지로 나타냅니다. 빛을 섞어 색을 만드는 원리는 위키백과에 자세히 나와 있습니다.
HSL (hsl(205, 81%, 39%)): 색상, 채도, 밝기로 표현합니다. 더 밝거나 더 어두운 색을 만들기 편합니다.
HSV: 포토샵이나 김프의 색상 선택 창에서 보던 색상, 채도, 명도 표기입니다. HSL과 HSV의 차이는 위키백과에서 자세히 설명합니다.
LCH: 사람 눈이 색을 인지하는 방식에 가까운 모델입니다. 최신 CSS가 이해하는 표기법 그대로 복사됩니다(MDN 문서, 영어).

이 도구는 이미지 속 색상을 알아내는 데 특화되어 있습니다. 찾은 색을 다른 형식으로 바꾸거나 어울리는 색을 찾고 싶다면 온라인 색상 선택 도구로 이동해 보세요.

자주 묻는 질문 (FAQ)

내 이미지가 서버에 올라가나요?

아니요. 이미지는 브라우저 안에서 바로 불러와 처리되며 어디로도 전송되지 않습니다. 페이지를 닫으면 아무것도 남지 않으므로 내부 자료나 아직 공개하지 않은 시안에도 안심하고 쓸 수 있습니다.

사진에서 HEX 코드는 어떻게 확인하나요?

사진을 업로드하고 이미지 위쪽에서 HEX가 선택된 상태로 원하는 색상 지점을 클릭하세요. #75dab2처럼 코드가 바로 클립보드에 복사됩니다.

사진에서 추출한 색이 실제 색과 다른 이유는 무엇인가요?

카메라는 조명, 화이트 밸런스, 압축 과정에서 색상에 영향을 받습니다. 이 도구는 파일에 저장된 색상 값을 그대로 알려줍니다. 사진이라면 여러 지점을 클릭해 선택한 색상 탭에서 비교해 보세요. 이 코드를 바탕으로 벽에 칠할 페인트를 배합한다면 참고용으로만 사용하세요.

모바일에서도 작동하나요?

네. 터치스크린에서 이미지의 원하는 지점을 탭하면 컴퓨터와 똑같이 코드가 복사됩니다. 다만 모바일에서는 커서 옆 돋보기가 표시되지 않으므로, 작은 부분을 클릭할 때는 먼저 이미지를 확대하세요.

HEX와 RGB는 어떻게 다른가요?

둘 다 같은 색을 나타내는 표기법입니다. RGB는 0부터 255까지의 숫자 세 개로, HEX는 같은 숫자를 # 뒤에 16진수로 표기합니다. 예를 들어 rgb(255, 87, 51)과 #ff5733은 같은 색입니다.

이미지에서 전체 색상 팔레트를 뽑으려면 어떻게 하나요?

주요 색상 탭을 열어보세요. 이미지에서 가장 많이 쓰인 색을 최대 8개까지 보여주며, 원하는 색을 클릭하면 코드가 복사됩니다.