스포이드 색상 추출기 (화면·이미지)

화면, 이미지, 붙여 넣은 스크린샷에서 스포이드로 색상 코드를 추출합니다. 돋보기로 1픽셀 단위로 고르고, 같은 색으로 되돌릴 수 있는 HEX·RGB·HSL·OKLCH·Display P3를 출력합니다.

  • 브라우저에서 처리
  • 데이터가 브라우저 밖으로 나가지 않습니다
  • 무료 · 회원가입 불필요
버튼으로 화면 스포이드를 연 뒤 원하는 창의 픽셀 하나를 선택하세요. Esc로 취소합니다. EyeDropper API는 sRGB 색을 반환하며, 브라우저가 이 API를 제공할 때만 버튼이 표시됩니다. 이미지를 열거나 끌어 놓거나 Ctrl+V / ⌘V로 스크린샷을 붙여 넣으세요. 지원 형식은 브라우저에 따라 다릅니다. 16,777,216픽셀을 넘으면 축소한 뒤 추출하며, 이미지 옆에 처리 크기를 표시합니다. 시스템 색상 선택기를 엽니다. 색을 조정하면 각 칸이 갱신되고 변경을 확정하면 최근 색상에 추가됩니다. 색상 칸을 비우고 이미지를 닫습니다. 진행 중인 이미지 로딩과 화면 추출도 취소합니다. 저장한 색을 삭제하려면 최근 색상 옆의 지우기를 사용하세요.

"화면에서 추출"을 누른 뒤 어느 창이든 원하는 픽셀을 클릭하세요. Esc로 취소합니다.

어느 칸에든 HEX, rgb(), hsl(), oklch(), color(display-p3 …) 또는 CSS 색 이름을 입력하거나 붙여 넣으세요. 유효한 색을 읽으면 다른 형식이 갱신되며 투명도를 유지합니다. 색으로 읽을 수 없는 동안에는 다른 칸을 비우고 복사를 끄며, 무엇이 틀렸는지 상태 줄에 표시합니다.
형식 옆의 복사는 해당 칸의 텍스트를 복사합니다. 최근 색상의 모두 복사는 HEX 값을 한 줄에 하나씩 복사합니다.

이미지를 여기에 놓거나 스크린샷을 붙여 넣으세요 Ctrl+V / ⌘V로 클립보드에서 붙여 넣습니다. PNG, JPEG, WebP, GIF, SVG 등 브라우저가 표시할 수 있는 형식을 지원합니다.
최근 색상 최근 서로 다른 HEX 색상 16개를 저장합니다. 견본을 누르면 다시 적용하고 목록 옆의 지우기로 저장된 색을 지웁니다. 입력만으로는 기록에 추가되지 않습니다.

추출한 색이 여기에 표시됩니다.

최근 16개 색과 샘플 크기를 이 브라우저(localStorage)에 저장합니다. 이미지는 저장하지 않습니다.

자세한 가이드 읽기 EyeDropper API로 화면의 모든 픽셀 색상 추출하기
예시·자세한 설명·자주 묻는 질문 실제 출력이 있는 예시, 다른 도구와의 차이, 자주 묻는 질문.

예: KRDS 공공 웹사이트 색상 검수

행정안전부의 KRDS(대한민국 정부 디자인 시스템) 디자인 토큰(npm 패키지 krds-uiux 1.1.0, tokens/figma_token.json)에서 light 모드 primary-50은 #256ef4, primary-60은 #0b50d0입니다. 공공기관 사이트의 주요 버튼을 캡처해 붙여 넣고 버튼 면을 클릭했을 때 #256ef4가 나오면 토큰대로 구현된 것입니다. 한 단계 진한 primary-60은 RGB로 rgb(11, 80, 208)이니, 진한 파랑 요소는 이 값과 비교합니다.

같은 primary-50은 HSL로 hsl(218.8, 90.4%, 55.1%), OKLCH로 oklch(57.5% 0.214 261.3)입니다. HSL을 정수로 반올림한 hsl(219, 90%, 55%)는 #256df4로, 초록 채널이 1 어긋납니다. 이 도구가 내보내는 값은 모든 칸이 같은 HEX로 되돌아갑니다. 테스트에서 sRGB 큐브를 3 간격으로 돈 636,056색을 도구 자체 파서로, 무작위 30,000색을 culori로 다시 읽어 모두 일치했습니다.

Windows에서 캡처해 붙여 넣기

Windows에서는 PrtSc를 누르면 전체 화면이 클립보드에 들어가고, Windows 로고 키 + Shift + S로 캡처 도구를 열어 영역을 잡은 뒤 Ctrl+C로 복사할 수 있습니다(Microsoft 지원). 이 페이지에서 Ctrl+V를 누르면 이미지가 들어옵니다. Mac은 스크린샷 단축키에 control을 더하면(예: control-shift-command-4) 파일 대신 클립보드에 저장됩니다(Apple 지원).

예: 1픽셀 줄무늬와 반투명 픽셀

빨강 #ff0000과 파랑 #0000ff가 1픽셀씩 번갈아 놓인 2000 × 400 테스트 이미지에서, 도구는 원본 해상도로 읽기 때문에 한 점 샘플로 순수한 빨강이나 파랑이 나오고 상태 줄에 “x 1000, y 200”처럼 좌표가 표시됩니다. 3 × 3 평균은 rgb(85, 0, 170)(빨강 1열, 파랑 2열)입니다. 사진이나 그러데이션에서는 평균 샘플이 더 안정적입니다.

PNG에서 #1a73e8에 alpha 10/255인 픽셀은 Chromium의 canvas에서 rgba(26, 128, 230, 0.039)로 읽혔습니다. 투명할수록 RGB 정밀도가 떨어지므로 도구는 alpha를 보여 주고 안내 문구를 붙입니다.

어떤 색 공간의 값인가

  • 화면: EyeDropper API는 sRGB 16진 문자열을 돌려줍니다(MDN). macOS용 Chromium은 추출한 디스플레이 색을 sRGB로 변환한 뒤 채널당 8비트로 반올림합니다(skia_utils_mac.mm의 CGColorRefToSkColor). 광색역 디스플레이에서 sRGB 밖의 색은 잘립니다.
  • 이미지: sRGB canvas에 그린 뒤 픽셀을 읽습니다. CSS Color 4는 이미지에 포함된 색상 프로필을 반영해 표시하고(§3.4), 프로필이 없는 이미지는 sRGB로 다루라고 정합니다(§3.5). Display P3 canvas를 만들 수 있는 브라우저(Chrome·Edge 92 이상, Safari 15.2 이상, Firefox는 미지원)에서는 P3로도 읽어 sRGB 밖이면 안내를 띄우고 P3 값을 남깁니다.
  • 변환식은 CSS Color 4 예제 코드를 따르고, 테스트에서 colorjs.io와 10⁻⁹ 이내로 일치함을 확인합니다.

다른 도구와 비교

2026-10-01 데스크톱 Chromium에서 같은 파일로 확인했습니다. Pixel Color Pick은 원본 해상도로 읽어 줄무늬에서도 정확한 색이 나오지만, 반투명 픽셀은 alpha 없이 #1A80E6으로 표시합니다. EyeDropper API를 없앤 상태에서는 “화면에서 추출” 버튼이 설명 없이 비활성화됐습니다. imagecolorpicker.com은 줄무늬 이미지를 529 × 105로 줄여 읽어, 어디를 클릭해도 이미지에 없는 #7f007f를 돌려줬습니다. 추출한 두 색의 대비는 색상 명도 대비 검사기로, 이미지 전체 배색은 이미지 컬러 팔레트 추출기로 확인하세요.

제한

  • 16,777,216픽셀을 넘는 이미지는 줄인 뒤 읽습니다. iOS의 canvas 상한이 4,096 × 4,096이기 때문입니다(MDN). 줄인 크기와 1픽셀이 원본 몇 픽셀의 평균인지 표시합니다.
  • 화면 추출은 매번 클릭이 필요합니다. 사용자 동작 없이 호출한 open()은 NotAllowedError로 거부되며, 한 번에 1픽셀만 추출합니다.
  • 열 수 있는 이미지 형식은 브라우저에 따라 다르며, HEIC는 Safari에서만 열립니다. Mac의 디지털 컬러 측정기, Windows의 PowerToys 색 선택기(Win + Shift + C)로도 화면 색을 볼 수 있습니다.
  • 출력 형식은 HEX, RGB, HSL, OKLCH, Display P3입니다. CMYK·Lab·HSV가 필요하면 HEX를 색상 변환기에 붙여 넣으세요.

FAQ

Firefox, Safari, 휴대폰에서는 왜 "화면에서 추출" 버튼이 없나요?

화면 추출은 EyeDropper API를 쓰는데, 이 API는 데스크톱 Chrome·Edge(95 이상)와 Opera(81 이상)에만 있고 Linux Wayland에서는 동작하지 않습니다. 다른 브라우저에서는 버튼을 숨기고 "이미지 열기"를 주 버튼으로 바꿉니다. 스크린샷을 찍어 Ctrl+V / ⌘V로 붙여 넣은 뒤 픽셀을 클릭하세요.

포토샵이나 피그마에서 본 값과 같나요?

태그가 없는 이미지나 sRGB 이미지라면 같습니다. 브라우저가 sRGB로 그린 픽셀을 읽기 때문입니다. 광색역 이미지는 브라우저가 sRGB로 변환하므로 HEX·RGB·HSL이 잘릴 수 있고, 이때 도구가 안내를 띄우고 OKLCH와 Display P3 칸에 실제 색을 남깁니다.

HSL에 소수점이 붙는 이유는 무엇인가요?

정수로 반올림한 HSL은 대부분 다른 색으로 돌아갑니다. KRDS의 primary-50(#256ef4)을 hsl(219, 90%, 55%)로 쓰면 #256df4가 됩니다. 도구는 같은 HEX로 돌아가는 가장 짧은 소수 자릿수로 씁니다.

이미지가 업로드되거나 저장되나요?

아니요. 이미지는 사용자 기기의 canvas에서만 읽습니다. 이 브라우저의 localStorage에 저장되는 것은 최근 16개 HEX 값과 샘플 크기(한 점, 3 × 3, 5 × 5) 두 가지이며, 색은 "최근 색상" 옆의 "지우기"로 삭제할 수 있습니다.

투명 PNG 픽셀의 색도 추출되나요?

됩니다. alpha 값을 표시하고 #1a80e60a처럼 투명도가 붙은 HEX를 출력합니다. canvas는 색을 alpha로 곱해 저장하므로 거의 투명한 픽셀의 RGB는 근삿값입니다. 완전히 투명한 픽셀은 색이 없다고 알려 줍니다.

관련 도구

색상 변환기 HEX, RGB, HSL 형식 간 색상 변환. 실시간 색상 미리보기. 색상 명도 대비 검사기 임의의 전경색과 배경색의 WCAG 대비비를 검사합니다. 본문/큰 글자/UI 구성요소별 AA/AAA 통과 여부를 표시하고, 미달 시 색상은 유지하고 명도만 조정한 자동 수정 제안을 한 번에 제공합니다. 이미지 색상 추출기 (컬러 팔레트) 이미지에서 컬러 팔레트를 추출하고 각 색이 차지하는 비율을 보여 줍니다. 같은 이미지는 늘 같은 결과, 단색 그래픽은 원래 색 그대로. HEX·RGB·HSL·OKLCH 복사, CSS·Tailwind·JSON·GIMP .gpl·Adobe .ase 내보내기. 색맹 시뮬레이터 이미지, 스크린숏, 배색에 8가지 색각 이상을 시뮬레이션합니다. 모든 유형을 나란히 비교하고 원본 크기 PNG를 저장하며 같아 보이는 색 짝을 찾습니다. 브라우저에서 동작하며 이미지는 업로드하지 않습니다. 색상 쉐이드 생성기 한 가지 색으로 OKLCH 기반 50–950, 11단계 쉐이드를 생성. 기본 색상은 명도가 가장 가까운 단계에 그대로 들어가고, 단계마다 흰 글자·검은 글자 WCAG 명도 대비를 표시. CSS 변수, Tailwind v3/v4, SCSS, JSON으로 내보내기. 색 조합 생성기 (컬러 팔레트) CSS 색 하나로 HSL 또는 OKLCH 색상환에서 보색, 분할 보색, 유사색, 삼각, 직사각형, 정사각형, 단색 배색을 만듭니다. 값 복사와 CSS 변수·SCSS·Tailwind·JSON 내보내기를 지원합니다.