색상 추출 도구는 어떻게 작동할까

색상 가이드 · ← 목록으로

"화면에서 추출" 버튼을 누르면 마치 마법처럼 클릭한 픽셀의 색이 HEX·RGB·HSL로 표시됩니다. 실제로는 두 가지 서로 다른 기술이 상황에 맞게 동작합니다. 이 글에서는 그 원리를 있는 그대로 설명합니다.

방식 1 — 브라우저 내장 EyeDropper API

"화면에서 추출" 버튼은 브라우저가 제공하는 window.EyeDropper API를 사용합니다. 버튼을 누르면 new EyeDropper().open()이 호출되고, 브라우저가 자체적으로 스포이드 커서를 화면에 띄웁니다. 사용자가 아무 곳이나 클릭하면 브라우저가 그 지점의 색을 sRGBHex 값으로 돌려주며, 이 값을 그대로 HEX·RGB·HSL로 변환해 화면에 표시합니다. 이 API는 브라우저 창 안쪽뿐 아니라 다른 프로그램, 바탕화면 등 모니터에 보이는 모든 픽셀에 접근할 수 있어 "화면 전체 스포이드"가 가능한 것입니다.

다만 이 API는 아직 표준화 초기 단계라 Chrome·Edge 등 Chromium 계열 데스크톱 브라우저에서만 지원됩니다. 페이지가 처음 로드될 때 typeof window.EyeDropper !== 'undefined'로 지원 여부를 확인해, 지원하지 않는 브라우저에서는 "화면에서 추출" 버튼을 비활성화하고 안내 배너를 띄웁니다. Firefox·Safari·모바일 브라우저 사용자가 배너를 보는 이유가 이것입니다.

방식 2 — 이미지 업로드 & 캔버스 픽셀 읽기

EyeDropper API가 없는 환경에서도 색을 추출할 수 있도록, 이미지 업로드 기능은 완전히 다른 방식으로 동작합니다. 업로드한 이미지를 화면에 보이지 않는 <canvas> 요소에 원본 해상도 그대로 그린 뒤(ctx.drawImage), 사용자가 이미지 위 어딘가를 클릭하면 클릭 좌표를 캔버스 픽셀 좌표로 환산합니다. 화면에 표시되는 이미지 크기와 실제 캔버스 해상도가 다를 수 있으므로, 클릭 좌표에 캔버스 실제 너비 ÷ 화면에 보이는 너비 비율을 곱해 정확한 원본 픽셀 위치를 계산합니다.

좌표가 정해지면 ctx.getImageData(x, y, 1, 1)로 딱 1픽셀의 RGBA 데이터를 읽어옵니다. 이 방식은 브라우저 API가 아니라 HTML5 Canvas의 표준 기능이라 Firefox·Safari·모바일을 포함한 모든 최신 브라우저에서 동작합니다. 그래서 화면 전체 스포이드를 지원하지 않는 환경에서도 "사진을 올려 그 안의 색을 추출"하는 기능만큼은 항상 사용할 수 있습니다.

돋보기 미리보기가 정확도를 높이는 방법

이미지에서 정확한 픽셀을 클릭하기는 생각보다 어렵습니다. 특히 경계가 흐릿한 사진에서는 한두 픽셀 차이로 전혀 다른 색이 뽑히기도 합니다. 이를 돕기 위해 마우스를 움직이는 동안 커서 주변 영역을 8배 확대한 원형 돋보기를 실시간으로 그려 줍니다. 확대 배율과 돋보기 크기는 코드에 상수로 고정돼 있어(지름 100px, 8배율), 클릭하기 전에 정확히 어떤 픽셀을 고르게 될지 미리 확인할 수 있습니다.

색조 팔레트는 어떻게 자동 생성될까

색을 추출하면 같은 색조의 밝기 단계 10개(밝기 10%~100%, 10% 간격)가 자동으로 나열됩니다. 이 팔레트는 추출된 색을 먼저 HSL로 변환한 뒤, 색조(H)와 채도(S)는 그대로 두고 명도(L)만 10%~100% 사이 10단계로 바꿔가며 각 단계를 다시 HEX로 역변환해 만듭니다. 그리고 원래 추출한 색의 밝기와 가장 가까운 단계에 체크 표시를 띄워, 지금 고른 색이 전체 밝기 스펙트럼에서 어디쯤인지 한눈에 보여줍니다. 이 로직이 바로 브랜드 팔레트 만드는 법에서 설명한 "명도 단계 확장"을 도구 안에서 자동으로 대신해 주는 부분입니다.

왜 두 가지 방식을 함께 제공할까

EyeDropper API는 화면의 어떤 픽셀이든 접근할 수 있어 강력하지만 지원 브라우저가 제한적입니다. 캔버스 기반 이미지 추출은 브라우저 창 안의 이미지로 범위가 한정되지만 거의 모든 환경에서 동작합니다. 두 방식을 나란히 두면 "가능한 한 강력하게, 하지만 최대한 많은 사용자가 쓸 수 있게"라는 상충하는 목표를 동시에 만족시킬 수 있습니다. 두 방식 모두 서버로 이미지나 색상 데이터를 전송하지 않고 브라우저 안에서만 계산이 끝난다는 점도 동일합니다.

자주 묻는 질문

화면에서 추출한 색과 이미지에서 추출한 색이 미묘하게 다를 수 있나요?
이론적으로는 같은 픽셀이면 같은 값이 나와야 하지만, 화면 스포이드는 모니터에 실제로 렌더링된 최종 픽셀 값을, 이미지 업로드는 파일 자체의 픽셀 데이터를 읽습니다. 모니터 설정이나 이미지 파일의 색 프로필에 따라 아주 미세한 차이가 생길 수 있습니다.
추출한 색이나 업로드한 이미지가 서버에 전송되나요?
아니요. EyeDropper API와 캔버스 픽셀 읽기 모두 브라우저 안에서만 처리되며, 이미지 파일이나 추출된 색상 값을 어디로도 전송하지 않습니다.
왜 색조 팔레트는 정확히 10단계인가요?
밝기 10%부터 100%까지 10% 간격으로 나눈 값입니다. 세밀한 단계 조정과 한눈에 훑어볼 수 있는 개수 사이의 균형을 고려한 값으로, 버튼 상태나 배경 톤을 고를 때 충분한 선택지를 제공합니다.
고해상도 이미지를 올려도 느려지지 않나요?
캔버스는 이미지의 원본 해상도를 그대로 유지한 채 그리고, 클릭한 지점의 1픽셀만 읽어오는 방식이라 이미지 크기와 무관하게 추출 속도는 거의 일정합니다.

관련 글

원리를 알았다면 이제 직접 확인해 보세요 → 화면 색상 추출 도구 사용하기. 색을 팔레트로 정리하는 순서가 궁금하다면 디자인 워크플로 가이드도 읽어보세요.