흔히 있는 일입니다. 원본 파일 없이 참고 자료만으로 색 구성을 맞춰야 합니다. 손에 있는 것은 출시 영상 스크린샷, 내보낸 목업, 오래된 PDF뿐입니다. 예전 방식은 일부를 잘라 이미지 편집기에 붙여 넣고, 스포이드로 찍어 hex를 복사하는 일을 색 수만큼 되풀이하는 것이었습니다.

화면 단위 색 추출에는 예전에는 별도 앱이나 자체 권한을 요구하는 브라우저 확장 프로그램이 필요했습니다. Chrome 95부터 Chromium 계열 브라우저에는 EyeDropper API가 들어 있어 일반적인 용도는 이것으로 충분합니다. 브라우저가 자체 선택 UI를 띄우고, 사용자가 픽셀 하나를 고르면, 페이지는 sRGB hex 문자열을 받습니다. ZeroTool의 스포이드 색상 추출기 (화면·이미지)는 이 API를 쓰고, API가 없는 브라우저에서는 이미지나 붙여 넣은 스크린샷에서 픽셀을 읽습니다.

60초 만에 보는 EyeDropper API

EyeDropper의 명세는 WICG(W3C 커뮤니티 그룹)의 초안입니다(EyeDropper API). 인터페이스는 아주 작습니다:

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // "#3a7bd5"

open()은 Promise를 반환합니다. 브라우저가 선택 UI를 띄우고, 사용자가 화면의 아무 픽셀(브라우저 창 밖이나 다른 앱 위도 포함)을 클릭하면, Promise는 #aabbcc 형식의 색을 sRGBHex 속성에 담은 객체로 resolve됩니다(MDN). 사용자가 Escape를 누르면 Promise는 AbortError로 reject됩니다.

이 API 위에 무언가를 만들기 전에 알아 둘 제약이 세 가지 있습니다:

  • 사용자 활성화가 필요합니다. 일시적인 사용자 활성화 없이 open()을 호출하면 NotAllowedError로 reject되므로, 클릭이나 키 입력 핸들러에서 호출해야 합니다. 페이지 로드 시 자동으로 여는 것도, 헤드리스 샘플링도 안 됩니다. 이유는 명세의 보안 절에 있습니다. 페이지가 사용자가 공유할 생각이 없던 화면 정보를 “스크린 스크래핑”해서는 안 되며, 픽셀 데이터는 마우스 버튼을 누르는 것 같은 명시적 동작 뒤에만 넘겨야 한다는 것입니다.
  • 호출당 픽셀 하나. 호출할 때마다 색 하나를 돌려주고 선택 UI를 닫습니다. 두 번째 색을 얻으려면 사용자가 버튼을 다시 눌러야 합니다. 선택 UI가 열린 상태에서 open()을 또 호출하면 InvalidStateError로 reject됩니다.
  • sRGB 출력만. 결과는 항상 sRGB hex 문자열입니다. macOS에서 Chromium은 추출한 디스플레이 색을 sRGB로 변환한 뒤 채널당 8비트로 반올림합니다(skia_utils_mac.mm의 CGColorRefToSkColor). 그래서 광색역 색은 잘려서 돌아옵니다. Display P3 값을 돌려받을 방법은 없습니다.

브라우저 지원(MDN browser-compat-data 8.1.3, 2026-09-24)은 데스크톱 Chrome·Edge 95 이상, Opera 81 이상입니다. Linux Wayland에서는 쓸 수 없습니다. Firefox, Safari, Android용 Chrome, iOS 브라우저는 지원하지 않습니다. 기능 감지는 한 줄이면 됩니다:

if ('EyeDropper' in window) {
  // EyeDropper 사용 가능 — 화면 추출 버튼 연결
} else {
  // 다른 경로 제공: 이미지나 스크린샷에서 추출
}

도구 사용법

스포이드 색상 추출기 (화면·이미지)에는 네 가지 방법이 있습니다:

  1. 화면에서 추출. 버튼을 누른 뒤 화면의 아무 픽셀이나 클릭하세요. EyeDropper API 경로라서 API가 있는 브라우저에서만 보입니다.
  2. 이미지 열기. 파일을 열거나, 도구에 끌어다 놓거나, 스크린샷을 Ctrl+V / ⌘V로 붙여 넣습니다. 포인터 주변 11 × 11픽셀을 확대하는 돋보기가 나오고, 클릭(또는 화살표 키로 옮긴 뒤 Enter)하면 픽셀 하나나 3 × 3 / 5 × 5 평균을 추출합니다. 모든 브라우저에서 됩니다.
  3. 색상 대화상자. <input type="color">로 운영체제의 색상 선택기를 엽니다.
  4. 값 입력. 어느 칸에든 CSS 색(HEX, rgb(), hsl(), oklch(), color(display-p3 …), 색 이름)을 붙여 넣으면 나머지 칸이 다시 계산됩니다.

출력은 HEX, RGB, HSL, OKLCH, Display P3이며, 모두 같은 8비트 색으로 되돌릴 수 있게 씁니다. 최근 16개는 localStorage에 저장되는 최근 색상 줄에 남습니다. 이미지는 저장하지 않으며, 어느 경로에서도 네트워크 요청은 없습니다.

네 가지 구체적인 활용 사례

디자인 역설계

스크린샷이나 목업 내보내기에서 색 구성을 CSS 변수나 Tailwind 토큰으로 옮겨야 할 때입니다. 참고 이미지를 아무 창에서나 열고 “화면에서 추출”을 누른 뒤 색을 클릭합니다. Firefox나 Safari에서는 참고 이미지의 스크린샷을 도구에 붙여 넣고 돋보기에서 색을 클릭합니다.

떠 있는 팔레트, 단축키, 이름 붙인 색 라이브러리는 전용 앱이 더 낫습니다. 한 프로젝트에서 몇 가지 색을 뽑는 정도라면 브라우저로 충분합니다.

브랜드 색상 추적

마케팅 쪽에서 흔한 요청입니다. “예전 웹사이트가 바로 이 파란색이었는데 원본 파일을 잃어버렸어요. 옛 PDF나 스크린샷에서 맞춰 줄 수 있나요?” 원래 토큰이 없으면 렌더링된 이미지에서 색을 읽을 수밖에 없습니다. 이미지를 도구에서 열고 원본 해상도로 추출합니다. JPEG 스크린샷은 압축 때문에 이웃 픽셀 값이 흔들리므로 3 × 3이나 5 × 5 평균이 더 안정적입니다.

영상·스트리밍 UI 분석

영상 오버레이, 썸네일, 화면 녹화, 발표 슬라이드 등 화면에 보이는 것은 모두 대상입니다. 프레임을 멈추고 “화면에서 추출”을 누른 뒤 픽셀을 클릭합니다.

얻는 값은 화면에 표시된 픽셀의 색입니다. 영상 디코딩, 크기 조정, 합성을 거친 뒤 앞에서 말한 대로 sRGB로 변환됩니다. “사용자가 보는 색”이지 “원본 소스에 지정된 색”이 아닙니다.

접근성 감사

색을 얻었다면 대개 다른 색과의 대비를 확인하고 싶어집니다. 전경색과 배경색을 추출해 둘 다 색상 명도 대비 검사기에 붙여 넣으면 WCAG AA/AAA 판정이 나옵니다. 색각 이상 감사에는 추출한 색을 색맹 시뮬레이터에 넣어 녹색맹(deuteranopia)이나 적색맹(protanopia) 사용자의 눈에 팔레트가 어떻게 보이는지 확인하세요.

한계와 우회 방법

Safari와 Firefox 사용자. EyeDropper 기능 감지가 false를 돌려줍니다. 도구는 “화면에서 추출”을 숨기고 “이미지 열기”를 주 버튼으로 바꿉니다. 스크린샷을 클립보드에 담아 붙여 넣으세요. Mac은 스크린샷 단축키에 control을 더합니다(예: control-shift-command-4, Apple 지원). Windows는 PrtSc로 전체 화면이 클립보드에 들어갑니다(Microsoft 지원). 운영체제에 들어 있는 화면 색 도구도 있습니다. macOS의 디지털 컬러 측정기, Windows의 PowerToys 색 선택기(Win + Shift + C)입니다.

연속 샘플링 불가. 색 하나마다 버튼을 다시 눌러야 합니다. 50가지 색이면 버튼 50번과 픽셀 50번을 클릭해야 합니다. 이는 사용자 활성화 규칙이지 도구의 한계가 아닙니다.

P3·HDR 잘림. 광색역 디스플레이에서는 sRGB 밖의 색이 sRGB로 변환되고 잘린 뒤 코드에 전달됩니다. 광색역 값이 필요하면 이미지 파일에서 추출하세요. Display P3 canvas를 만들 수 있는 브라우저(Chrome·Edge 92 이상, Safari 15.2 이상)에서는 도구가 P3 값을 읽고 잘림을 알려 줍니다.

최근 색상은 localStorage에 저장됩니다. 브라우저 사이트 데이터를 지우면 함께 사라집니다. 내 컴퓨터에만 있고 동기화되지 않습니다.

FAQ

여러 픽셀을 한 번에 추출하거나 영역을 읽을 수 없는 이유는 무엇인가요?

이 API는 사용자 동작 한 번에 색 하나만 돌려주도록 설계되었습니다. 명세의 보안 절은 스포이드가 페이지에 “스크린 스크래핑”을 허용해서는 안 된다고 하고, 명시적 동작 뒤에만 픽셀 데이터를 넘길 것, 스포이드 모드임을 분명히 표시할 것, Esc로 빠져나올 수 있게 할 것을 제안합니다(EyeDropper API, Security and Privacy Considerations).

Safari와 Firefox 사용자는 어떻게 해야 하나요?

스크린샷을 쓰세요. 클립보드에 복사한 뒤 도구에서 ⌘V나 Ctrl+V로 붙여 넣고 픽셀을 클릭하면 원본 해상도로 읽습니다. 브라우저 없이 화면에서 바로 확인하려면 macOS의 디지털 컬러 측정기나 Windows의 PowerToys 색 선택기를 쓰면 됩니다.

P3 디스플레이에서 Photoshop과 값이 다른 이유는 무엇인가요?

Photoshop은 문서 자체의 색 공간에서 값을 읽습니다. EyeDropper API가 돌려주는 것은 표시된 색을 sRGB로 변환하고 채널마다 0–255로 자른 값입니다. sRGB 밖의 색이라면 두 숫자가 같을 수 없습니다. P3 값을 보려면 Display P3 canvas를 지원하는 브라우저에서 내보낸 파일로 추출하세요.

클릭 없이 스포이드를 열 수 있나요?

없습니다. 일시적인 사용자 활성화가 없으면 open()은 NotAllowedError로 reject됩니다(MDN). 사용자가 일으킨 클릭이나 키 입력 핸들러에서 호출하세요.

최근 색상이 브라우저나 기기 사이에 동기화되나요?

아니요. 현재 origin의 localStorage에 저장되므로 브라우저별, 프로필별, 기기별로 나뉩니다. 사이트 데이터를 지우면 삭제됩니다. 계정도, 업로드도, 기기 간 동기화도 없습니다.

관련 색상 도구

hex 값을 손에 넣은 다음 단계는 보통 이 중 하나입니다:

스크린샷에서 hex 값을 꺼내야 할 다음 순간에는 스포이드 색상 추출기 (화면·이미지)를 여세요. 무료이고 브라우저에서 동작하며, 탭을 닫은 뒤 이미지는 남지 않습니다.