이미지 색상 추출기
이미지나 화면에서 원하는 지점의 색상 코드를 추출합니다.
화면 스포이드
버튼을 누른 뒤 화면 어디든(다른 창 포함) 클릭하면 그 색을 가져옵니다.
이미지를 끌어다 놓거나 붙여 넣으세요
스크린샷은 Ctrl+V (맥 ⌘+V)로 바로 붙여 넣을 수 있습니다
이미지는 서버로 전송되지 않고 이 브라우저에서만 처리됩니다.
#4F46E5 파랑 계열
- HEX
#4F46E5 - RGB
rgb(79, 70, 229) - HSL
hsl(243, 75%, 59%) - HSV
hsv(243, 69%, 90%) - CMYK
cmyk(66%, 69%, 0%, 10%) - OKLCH
oklch(51.1% 0.23 276.97) - CSS 변수
--color-main: #4F46E5;
흰 배경에서
6.28 : 1 AA
검정 배경에서
3.33 : 1 AA 큰 글자
최근 추출한 색
스포이드나 이미지에서 색을 추출하면 여기에 최대 24개까지 쌓입니다.
이미지 색상 추출기 이용 방법
- 이미지 선택을 누르거나 파일을 끌어다 놓습니다. 화면을 캡처했다면 Ctrl+V로 바로 붙여 넣을 수 있습니다.
- 이미지 위에 마우스를 올리면 11×11 픽셀을 확대한 돋보기와 현재 색 코드가 나타납니다. 원하는 지점을 클릭하면 색이 선택됩니다.
- 휴대폰에서는 손가락을 대고 움직여 돋보기 가운데에 맞춘 뒤 손가락을 떼면 선택됩니다. 키보드는 화살표로 움직이고 Enter로 선택합니다.
- 오른쪽 결과에서 HEX·RGB·HSL·HSV·CMYK·OKLCH 코드를 복사하거나, 팔레트·대비 보기로 이어서 조화 색과 명도 대비를 확인합니다.
주요 기능
| 기능 | 설명 |
|---|---|
| 화면 스포이드 | 브라우저 밖 다른 프로그램 화면의 색까지 추출 (데스크톱 Chrome·Edge) |
| 돋보기 | 커서 주변 픽셀을 확대해 경계선·작은 글자 색도 정확히 조준 |
| 평균 샘플링 | 1픽셀 / 3×3 / 5×5 평균 — 사진·JPG 노이즈를 줄여 대표 색을 얻음 |
| 대표 색 팔레트 | 이미지에서 면적이 넓은 색 6가지와 비율을 자동 추출 |
| 최근 기록 | 추출한 색 최대 24개를 이 브라우저에 저장, 중복은 맨 앞으로 이동 |
| 색 코드 붙여넣기 | 복사해 둔 #FF5733, rgb(…) 같은 코드를 붙여 넣으면 바로 변환 |
정확하게 추출하는 팁
- 원본에 가까운 이미지를 쓰세요. 메신저로 주고받은 사진은 압축 때문에 색이 조금씩 변합니다. 가능하면 PNG 스크린샷이 가장 정확합니다.
- 로고·아이콘처럼 단색 영역은 1픽셀로, 하늘·피부처럼 그라데이션이나 질감이 있는 부분은 5×5 평균으로 찍으면 대표 색을 얻기 쉽습니다.
- 글자 색을 뽑을 때는 가장자리(안티앨리어싱)가 아니라 획의 가운데를 돋보기로 확인하고 찍으세요.
- 아주 큰 사진(약 840만 픽셀 이상 또는 한 변 4,096px 초과)은 휴대폰 메모리 한도를 넘지 않도록 축소해 분석합니다. 단색 영역의 색은 축소해도 거의 같습니다.
추출한 색 활용하기
추출한 HEX 코드는 CSS·피그마·파워포인트에 그대로 붙여 넣을 수 있습니다. 브랜드 색을 뽑았다면 색상 선택기에서 보색·유사색 팔레트와 50~950 명도 단계를 만들고, 배경과 글자 조합이 WCAG 명도 대비 기준(본문 4.5:1)을 통과하는지 확인해 보세요.
자주 묻는 질문
Q. 스포이드 버튼이 보이지 않습니다.
화면 어디서든 색을 찍는 스포이드는 브라우저의 EyeDropper 기능을 사용합니다. 2026년 현재 데스크톱용 Chrome·Edge·Opera 같은 크로미움 기반 브라우저에서만 지원되고, Safari·Firefox와 모바일 브라우저에서는 쓸 수 없습니다. 이 경우 화면을 캡처한 뒤 이미지를 붙여 넣거나 올려서 색을 추출하세요.
Q. 올린 이미지가 서버로 전송되나요?
아니요. 이미지는 브라우저 안에서만 열리고 분석되며 어떤 서버에도 업로드되지 않습니다. 페이지를 닫으면 이미지는 사라지고, 추출한 색 코드 기록(최대 24개)만 이 브라우저의 저장소에 남습니다. 기록은 비우기 버튼으로 언제든 지울 수 있습니다.
Q. 추출한 색이 원래 디자인 색과 조금 다릅니다.
JPG 압축으로 생긴 노이즈, 글자·도형 가장자리의 안티앨리어싱, 사진의 조명 때문에 한 픽셀만 찍으면 값이 들쭉날쭉할 수 있습니다. 3×3 평균이나 5×5 평균으로 바꾸면 주변 픽셀을 평균해 더 안정적인 색을 얻습니다. 또 Display P3처럼 넓은 색 공간의 이미지는 브라우저가 sRGB로 변환해 보여주므로 원본 앱의 값과 1~2 정도 차이가 날 수 있습니다.
Q. 대표 색 팔레트는 어떻게 뽑나요?
이미지를 작게 줄인 뒤 비슷한 색끼리 묶는 k-평균(k-means) 군집화로 가장 넓은 면적을 차지하는 색 6가지를 고릅니다. 각 색 아래 숫자는 이미지에서 그 색 묶음이 차지하는 비율입니다. 투명한 부분은 계산에서 제외합니다.
Q. 휴대폰에서는 어떻게 색을 고르나요?
이미지 위에 손가락을 대고 움직이면 손가락 위쪽에 확대 돋보기가 나타납니다. 원하는 픽셀이 돋보기 가운데 네모에 들어왔을 때 손가락을 떼면 그 색이 선택됩니다. 이미지 영역 밖을 끌면 페이지를 스크롤할 수 있습니다.
Q. 투명한 PNG에서 색을 찍으면 어떻게 되나요?
완전히 투명한 픽셀은 색이 없으므로 선택되지 않고 안내 메시지가 나옵니다. 반투명 픽셀은 투명도까지 포함한 8자리 HEX(#RRGGBBAA)와 rgba() 값으로 표시됩니다.