화면 색 추출 스포이드 안 보이는 이유와 대안
크롬에서는 컬러 피커의 스포이드 아이콘 하나로 화면 어디든 눌러 그 자리의 색을 그대로 가져올 수 있습니다. 그런데 사파리에서 똑같은 페이지를 열면 그 버튼 자체가 보이지 않습니다. 도구가 고장 난 게 아니라 브라우저가 이 기능을 지원하는지에 달려 있습니다.
요약 ① 화면 색 추출(스포이드) 버튼은 브라우저 내장 EyeDropper API가 있어야 나타나며, 크로미움 계열(크롬·엣지)에서만 지원됩니다. ② 사파리처럼 미지원 브라우저에서는 macOS 디지털 색상 계측기, Windows 그림판 스포이드 같은 운영체제 기능으로 픽셀 색을 대신 확인할 수 있습니다. ③ 안티앨리어싱 경계나 그라데이션 위 픽셀을 집으면 주변 픽셀이 섞여 예상과 조금 다른 값이 나올 수 있습니다. ④ HSL과 HSV는 색상·채도는 같은 방식을 쓰지만 세 번째 값의 정의가 달라, 같은 색이 두 가지 다른 숫자로 표시되는 게 정상입니다.
화면에서 본 색을 그대로 옮기려는데 버튼이 안 보입니다
다른 사이트의 버튼 색이나 캡처해 둔 이미지 속 브랜드 컬러를 그대로 코드에 쓰고 싶을 때가 있습니다. 크롬에서는 컬러 피커의 '화면 색 추출' 버튼을 누르고 그 지점을 클릭하면 끝나지만, 사파리 같은 브라우저에서는 그 버튼이 아예 나타나지 않습니다.
이 버튼은 이 도구만의 기능이 아니라 브라우저에 내장된 EyeDropper라는 API를 그대로 빌려 쓰는 것입니다. 버튼이 보이고 안 보이고는 도구가 아니라 지금 열어 둔 브라우저가 이 API를 구현했는지에 달려 있습니다.
스포이드 버튼 없이 픽셀 색상값을 확인하는 법
EyeDropper API는 사용자가 마우스로 화면의 한 지점을 가리키면 그 픽셀의 색상값만 페이지 코드에 돌려주는 방식으로 동작합니다. 별도의 화면 녹화 권한 창은 뜨지 않지만, 이 API 자체가 없는 브라우저에서는 기능을 아예 쓸 수 없습니다.
이 도구의 안내 문구에도 적혀 있듯, 이 버튼은 크롬·엣지 등 크로미움 계열 브라우저에서만 나타납니다. 사파리처럼 이 API가 없는 브라우저를 쓴다면 운영체제가 기본 제공하는 스포이드 기능으로 같은 값을 얻을 수 있습니다.
macOS — 디지털 색상 계측기
미리보기(Preview) 앱을 열고 상단 메뉴에서 도구 › 디지털 색상 계측기를 선택합니다. 화면 위 마우스 포인터가 가리키는 지점의 RGB 값이 실시간으로 표시되므로, 확인하려는 화면 위에 커서만 올리면 됩니다.
Windows — 그림판 스포이드
색을 확인하려는 화면을 캡처해 그림판(Paint)에 붙여넣습니다. 스포이드 도구를 고른 뒤 원하는 픽셀을 클릭하면 전경색이 그 색으로 바뀌고, 색 편집 창에서 RGB 숫자를 그대로 확인할 수 있습니다.
저희 도구로 확인하기. 이렇게 얻은 RGB나 HEX 값을 아래 칸에 옮겨 넣으면 나머지 표기(HEX·RGB·HSL·HSV)가 자동으로 계산되어 한 화면에 나란히 표시됩니다.
설치·회원가입 없이 브라우저 안에서 즉시 계산되며, 입력한 색상 값은 서버로 전송되지 않습니다.
자주 막히는 지점
| 상황 | 실제로 일어나는 일 |
|---|---|
| 사파리에서 '화면 색 추출' 버튼이 안 보임 | EyeDropper API를 크로미움 계열만 구현해 둔 상태라 브라우저 차이입니다 |
| 그라데이션·경계선 위 픽셀을 집음 | 안티앨리어싱으로 주변 픽셀이 섞여 예상보다 살짝 다른 값이 나올 수 있습니다 |
| 캡처한 색과 디자인 시안 값이 미세하게 다름 | 모니터 색보정(디스플레이 프로파일)에 따라 실제 값과 눈에 보이는 색이 다를 수 있습니다 |
| HEX 입력 후 HSL·HSV 소수점이 사라짐 | 두 표기 모두 정수로 반올림해 표시하므로 되돌려 계산하면 1 정도 오차가 날 수 있습니다 |
정리
- 화면 색 추출(스포이드) 버튼은 브라우저 내장 EyeDropper API가 있어야 나타나며, 현재는 크로미움 계열(크롬·엣지)에서만 지원됩니다.
- 사파리 등 미지원 브라우저에서는 macOS 디지털 색상 계측기, Windows 그림판 스포이드로 같은 픽셀의 색상값을 확인할 수 있습니다.
- 안티앨리어싱 경계나 모니터 색보정 차이로 픽셀 색이 예상과 조금 다르게 나올 수 있다는 점을 감안해야 합니다.
- HEX 하나만 입력해도 RGB·HSL·HSV 값이 동시에 계산되며, 각 값은 복사 버튼으로 바로 가져갈 수 있습니다.
설치·회원가입 없이 브라우저 안에서 즉시 계산되며, 입력한 색상 값은 서버로 전송되지 않습니다.
자주 묻는 질문
화면 색 추출(스포이드) 버튼이 안 보여요
이 버튼은 브라우저가 EyeDropper API를 지원할 때만 나타납니다. 크롬이나 엣지 같은 크로미움 계열 브라우저에서 열면 버튼이 보이고, 사파리처럼 이 API가 없는 브라우저에서는 버튼 자체가 표시되지 않습니다. 이때는 픽셀 색을 다른 방법으로 알아낸 뒤 HEX 칸에 직접 입력하면 됩니다.
사파리에서도 화면 색을 추출할 방법이 있나요
이 도구 안에서는 방법이 없습니다. 대신 macOS라면 미리보기 앱의 디지털 색상 계측기로, Windows라면 그림판의 스포이드 도구로 원하는 픽셀의 RGB 값을 먼저 확인한 뒤, 그 값을 이 도구의 HEX 칸에 옮겨 입력하면 나머지 표기가 함께 계산됩니다.
HSL과 HSV는 어떻게 다른가요
둘 다 색상(H)과 채도(S)는 같은 방식으로 쓰지만 세 번째 값의 정의가 다릅니다. HSL의 명도(L)는 흰색·검정에서 얼마나 떨어져 있는지를, HSV의 명도(V)는 순수한 밝기를 나타내 같은 색이라도 두 값이 서로 다른 숫자로 표시됩니다.
추출하거나 입력한 색상 값이 서버로 전송되나요
전송되지 않습니다. 색을 고르거나 HEX 값을 입력해 RGB·HSL·HSV로 변환하는 과정은 전부 브라우저 안에서만 계산되며, 어떤 값도 서버로 전송되거나 저장되지 않습니다.