컬러 스포이드

컬러 스포이드 소개

이미지를 올리면 캔버스에 그린 뒤, 클릭한 좌표의 픽셀 값을 읽어 HEX·RGB·HSL로 보여 줍니다. 6배 확대 돋보기로 정확한 픽셀을 겨냥할 수 있고, 최근 고른 색 8개가 기록으로 남습니다.

스포이트는 단순해 보이지만 「사진 속 그 색」을 정확히 뽑는 데는 함정이 몇 가지 있습니다. 아래는 같은 곳을 찍었는데 값이 다르게 나오는 이유와, 화면 전체에서 색을 뽑는 브라우저 기능(EyeDropper API)의 현재 상황입니다.

같은 지점인데 값이 조금씩 다른 이유

JPEG는 8×8 블록 단위로 압축하고 색 정보(크로마)를 보통 가로세로 절반 해상도로 저장합니다. 그래서 단색으로 칠해진 로고 위라도 한 픽셀 옆으로 옮기면 #2F6FD1이 #3070D2가 되는 식으로 값이 흔들립니다. 특히 글자 테두리처럼 색이 바뀌는 경계 근처는 원래 없던 중간색이 생깁니다. 경계에서 몇 픽셀 떨어진 평평한 안쪽을 찍고, 두세 곳을 찍어 가장 자주 나오는 값을 쓰세요.

이 도구는 긴 변이 1,600픽셀을 넘는 이미지를 화면에는 1,600픽셀로 줄여서 보여 주지만, 색은 클릭한 위치를 원본 좌표로 환산해 원본 해상도 픽셀에서 읽습니다. 그래서 4K 스크린숏의 1픽셀 선도 주변 색과 섞이지 않은 값이 나옵니다. 다만 축소된 화면에서는 1픽셀 선을 정확히 클릭하기 어려우니, 선이 아주 가늘면 돋보기를 보며 찍거나 그 부분만 잘라서 올리세요.

색 프로필과 「화면에서 본 색」

아이폰 사진이나 맥 스크린숏은 Display P3 색 프로필을 달고 있는 경우가 많습니다. 브라우저는 이미지를 캔버스에 그릴 때 이를 캔버스 색공간(기본 sRGB)으로 변환하므로, 이 도구가 돌려주는 값은 sRGB 기준입니다. P3에서만 표현되는 아주 진한 빨강·초록은 sRGB 범위 끝으로 잘려 나옵니다. 웹 CSS에 붙여 넣을 용도라면 이 sRGB 값이 맞는 값입니다.

투명 PNG에서는 알파 값도 읽어 rgba()로 표시합니다. 다만 HEX는 알파 없이 여섯 자리로만 보여 주므로, 반투명 픽셀의 HEX를 그대로 쓰면 원래보다 진한 색이 됩니다.

화면 어디서든 뽑는 EyeDropper API

Chrome과 Edge(95 이후)에는 EyeDropper API가 있어, 웹 페이지가 버튼 클릭에 반응해 브라우저 밖 화면의 픽셀까지 고르게 할 수 있습니다. HTTPS 페이지에서만, 사용자가 직접 클릭했을 때만 동작하고, 커서가 돋보기로 바뀌어 사용자가 모르게 화면을 읽을 수 없게 되어 있습니다. MDN 기준으로 Firefox와 Safari는 지원하지 않아 아직 「실험적」 기능입니다.

이 도구는 EyeDropper를 지원하는 브라우저에서 「화면에서 색 뽑기」 버튼을 보여 줍니다. 누르면 이미지 밖, 다른 앱 화면의 색까지 고를 수 있습니다. 지원하지 않는 브라우저(Firefox·Safari)에서는 버튼이 보이지 않으니, 스크린숏을 찍어 올리면 됩니다. 이때 윈도우 HDR이 켜져 있으면 스크린숏 색이 바래서 저장될 수 있으니 주의하세요.

예시

사용 방법

1. 이미지를 끌어 놓거나 선택합니다.
2. 돋보기로 위치를 맞추고 원하는 픽셀을 클릭합니다.
3. HEX·RGB·HSL 중 필요한 값을 복사하고, 기록에서 이전 색을 다시 불러올 수 있습니다.

자주 묻는 질문

관련 가이드

• 색 대비와 웹 접근성: WCAG 공식의 출처, 한계, 그리고 각국 법 기준