이미지 속 어떤 색이든 헥스 코드 알아내는 법
2026-05-15
짧게 답하면: 이미지를 ToolKoala의 색상 추출기에 끌어다 놓고, 원하는 픽셀을 클릭한 뒤, 헥스(그리고 RGB) 값을 복사하세요. 전부 브라우저 안에서, 서버로 아무것도 업로드하지 않고요. 아무것도 설치하지 않고 스크린샷, 사진, 디자인 시안에서 정확한 색을 잡아내는 가장 빠른 방법입니다.
헥스 코드 잡아내는 법
- 색상 추출기를 열고 이미지나 스크린샷을 끌어다 놓습니다(PNG, JPG, WebP 모두 됩니다).
- 커서를 이미지 위로 움직입니다. 확대 돋보기가 샘플링하려는 픽셀을 보여주므로 한 픽셀씩 빗나가지 않아요.
- 정확한 픽셀을 클릭합니다. 도구가 메모리상의 캔버스에서 그 픽셀의 RGB 값을 바로 읽습니다.
- 헥스 코드(
#3B82F6같은)나 RGB 문자열을 복사하세요. 원하는 만큼 여러 픽셀에서 반복하면 됩니다.
픽셀 데이터를 로컬에서 읽으므로 서버 왕복도, 기다림도 없습니다. 사용하는 동안 브라우저의 개발자 도구 네트워크 탭을 열어 보세요. 업로드 요청이 전혀 없을 겁니다. 그게 핵심이에요.
제가 실제로 이걸 쓰는 용도
- 브랜드 색 맞추기. 클라이언트가 브랜드 가이드 없이 평면 PNG로 로고를 보냅니다. 파란색을 샘플링하면
#1D4ED8, 끝. - 팔레트 구성. 마음에 드는 사진이나 스크린샷에서 색 대여섯 개를 샘플링하면, 추측 없이 시작 팔레트가 생깁니다.
- 불일치 고치기. "이 버튼 색조가 살짝 잘못됐어" — 둘 다 샘플링하고, 헥스를 비교하고, 미묘하게 어긋난 값을 찾으세요.
브라우저가 최신(크롬, 엣지)이라면, 업로드한 이미지 안뿐 아니라 화면의 어떤 픽셀이든 샘플링하는 네이티브 EyeDropper API도 있습니다. ToolKoala의 추출기는 대신 캔버스에 기대므로 브라우저마다, 그리고 아직 어디에도 열지 않은 파일에서도 똑같이 작동합니다.
다른 도구들과의 솔직한 비교
- macOS Digital Color Meter — 무료, macOS 내장. 화면의 어떤 것이든 샘플링하기 좋지만, 기본값이 이상한 색 공간이고 헥스로 복사하는 흐름이 까다롭습니다(설정을 파고들어야 해요). 윈도우 버전 없음.
- Chrome 개발자 도구 스포이드 — 무료, 이미 브라우저에 있음. Styles 패널을 열고 색상 스와치를 클릭한 뒤 스포이드를 누르세요. 잘 작동하지만 개발자 도구에 묻혀 있고, 렌더링된 페이지만 샘플링합니다.
- Photoshop (~$23/mo) — 스포이드가 훌륭하고 정밀하지만, 픽셀 하나 읽으려고 월 $20 넘는 앱을 켜는 건 과합니다.
- 브라우저 색상 추출 확장 프로그램 — 편리하지만 절충점이 있어요. 어떤 페이지든 스포이드할 수 있는 확장 프로그램은 보통 방문하는 모든 페이지를 읽을 권한을 요청합니다. 색상 추출기치고는 큰 신뢰죠. 저는 백그라운드 확장 프로그램에 전체 읽기 권한을 주느니, 아무것도 업로드하지 않는 탭에 파일을 끌어다 놓는 쪽을 택하겠습니다.
자주 묻는 질문
스크린샷에서 헥스 코드를 어떻게 얻나요? 스크린샷을 찍어 ToolKoala 같은 브라우저 색상 추출기에 끌어다 놓고, 원하는 픽셀을 클릭하세요. 이미지를 업로드하지 않고 헥스와 RGB를 즉시 얻습니다.
헥스와 RGB의 차이는 뭔가요?
같은 색을 설명합니다. 헥스(#3B82F6)는 CSS와 디자인 도구에서 쓰는 간결한 여섯 자리 형태이고, RGB(59, 130, 246)는 빨강/초록/파랑 채널을 숫자로 나열합니다. 이 도구를 포함해 대부분의 도구가 둘 다 줍니다.
파일이 아니라 실제 웹사이트에서 색을 뽑을 수 있나요?
네 — 화면상 샘플링에는 Chrome 개발자 도구의 스포이드나 브라우저의 네이티브 EyeDropper API를 쓰세요. 이미 가지고 있는 이미지 파일에서 샘플링한다면 업로드 없는 색상 추출기가 더 간단합니다.
픽셀 단위로 정확한가요? 네, 원본 이미지를 샘플링하는 한 그렇습니다. 이미지가 압축됐거나(심한 JPG) 크기 조정됐다면, 보이는 색이 이미 원본에서 살짝 어긋났을 수 있어요. 그건 파일 탓이지 추출기 탓이 아닙니다.
— Milo 🐨