이미지 색상 추출기

이미지를 업로드하거나 붙여넣고 원하는 픽셀을 클릭하면 됩니다 — 도구가 HTML 캔버스를 통해 해당 픽셀을 읽고 HEX, RGB, HSL 값을 즉시 표시하며 HEX 코드를 클립보드에 복사합니다. 확대 루페는 커서 주변의 개별 픽셀을 보여주어 정확한 위치를 선택할 수 있게 해줍니다. 서버에 업로드되는 과정이 전혀 없으며, 모든 처리는 HTML5 캔버스 API를 사용하여 브라우저에서 이루어집니다. 덕분에 즉각적이고, 개인 정보가 보호되며, 페이지가 로드된 후에는 오프라인에서도 사용 가능합니다. 안티앨리어싱된 텍스트나 로고 가장자리처럼 클릭하기 어려운 영역의 경우, 클릭 전에 브라우저 내장 줌 기능으로 먼저 확대하세요.

이 무료 브라우저 기반 스포이드 도구를 사용하세요. 이미지를 드래그하거나 붙여넣고, 픽셀을 클릭한 뒤 코드를 복사하면 됩니다. 설치 불필요, 회원가입 불필요입니다. Adobe Photoshop이나 Illustrator처럼 월 약 3만 원 이상의 구독이 필요하지 않습니다. macOS Digital Color Meter나 Windows PowerToys Color Picker와 달리, 이 도구는 이미지의 주요 팔레트도 자동으로 추출해 각 색상을 일일이 클릭하지 않고도 주요 색상을 한꺼번에 확인할 수 있습니다. imagecolorpicker.com이 가장 유명한 전용 대안이지만 파일을 서버에 업로드합니다. 이 도구는 그렇지 않습니다.

두 형식은 동일한 색상을 서로 다른 방식으로 인코딩합니다. HEX는 빨강/초록/파랑을 세 쌍의 16진수로 표현하며(#FF5733) CSS와 웹 디자인의 표준입니다. RGB는 세 개의 0~255 범위의 10진수를 사용합니다(rgb(255, 87, 51)). 이미지 편집기와 코드에서 흔히 사용됩니다. 두 형식 간의 변환은 손실이 없으며, 이 도구는 클릭하는 모든 픽셀에 대해 두 값을 모두 표시합니다. CSS나 Tailwind 클래스를 작성할 때는 HEX를 사용하고, 숫자 채널을 기대하는 캔버스, WebGL, 이미지 처리 코드를 작성할 때는 RGB를 사용하세요. 두 형식 모두 동일한 sRGB 색상 포인트를 설명합니다.

HSL은 색조(Hue, 0~360°), 채도(Saturation), 명도(Lightness)로 색상을 설명합니다. 색상을 조정하는 데 더 직관적인 방식입니다. 색조를 변경하지 않고 색상을 더 밝게 하거나 채도를 낮출 수 있습니다. CSS는 hsl()을 기본적으로 지원하므로, 디자이너들이 팔레트를 구성할 때 HSL로 작업하는 경우가 많습니다. 명도를 높이면 밝은 색조(tint), 낮추면 어두운 색조(shade)가 됩니다. 이 도구는 모든 픽셀에 대해 HEX, RGB, HSL을 함께 표시하므로 워크플로에 필요한 형식을 복사할 수 있습니다. Figma, Sketch, Adobe XD에서는 HEX가 가장 빠르게 붙여넣을 수 있는 형식이며, Tailwind나 CSS 커스텀 속성에는 HEX와 HSL 모두 잘 작동합니다.

사진을 불러오기만 하면 주요 팔레트가 자동으로 나타납니다. 도구는 이미지의 픽셀을 군집으로 분류하고 빈도 순으로 정렬하여 8개의 주요 색상을 HEX 코드와 함께 스워치로 반환합니다. 스워치를 클릭하면 복사되고, '전체 복사'를 클릭하면 팔레트 전체를 한 번에 복사할 수 있습니다. Adobe Color와 Canva의 팔레트 생성기도 같은 기능을 제공하지만 계정이 필요합니다. Coolors.co는 사진에서 팔레트를 생성할 수 있지만 이미지를 서버로 전송합니다. 이 도구에서는 팔레트 추출이 전적으로 브라우저에서 실행되므로 업로드 없이, 계정 없이, 광고 없이 사용할 수 있습니다.

이미지가 브라우저의 HTML 캔버스 요소에 그려지고, 클릭하면 getImageData API를 통해 해당 픽셀의 빨강, 초록, 파랑 값을 읽어 HEX, RGB, HSL로 변환합니다. 캔버스가 로컬에서 실행되므로 서버가 전혀 관여하지 않습니다. 확대 루페는 별도의 캔버스 요소를 사용하여 커서 주변 픽셀 영역을 확대해 보여주므로, 안티앨리어싱된 텍스트, 로고 가장자리, 사진 그라디언트처럼 세밀한 디테일이 있는 이미지에서도 정확한 픽셀을 선택할 수 있습니다.

이 도구에서는 안전합니다 — 이미지는 브라우저 메모리에만 로드되며 어디에도 전송되지 않습니다. 브라우저의 네트워크 탭에서 확인하실 수 있습니다. 페이지 로드 이후 추가 요청이 발생하지 않습니다. 미출시 디자인, 클라이언트 로고, 개인 사진에 중요한 사항입니다. imagecolorpicker.com이나 일부 Canva 기능 등 업로드 기반 도구는 파일을 서버로 전송하고 임시 저장합니다. 이 도구는 모든 처리를 로컬에서 수행하므로 파일은 기기에만 보관되며 탭을 닫으면 사라집니다.

예 — '화면에서 추출' 버튼은 EyeDropper API(Chrome 및 Edge 지원)를 사용하여 다른 창, 앱, 브라우저 탭을 포함한 화면의 모든 픽셀을 샘플링합니다. 선택한 색상은 이미지 선택과 동일한 HEX/RGB/HSL 패널 및 기록에 저장됩니다. API를 지원하지 않는 브라우저(Safari, Firefox)의 경우 PrtScn 또는 Mac에서 Cmd+Shift+4로 스크린샷을 찍은 뒤 Ctrl+V로 바로 붙여넣기하면 됩니다 — 파일로 저장할 필요가 없습니다. 이 방법은 브라우저에서 재생 중인 동영상 프레임, 브라우저에서 열린 PDF, 실시간 웹 페이지에도 적용됩니다.

로고를 저장하거나 스크린샷을 찍어 여기에 드래그한 후, 브랜드 색상을 클릭하고 HEX 코드를 복사하면 됩니다. 또는 스크린샷 없이 화면 스포이드 버튼을 사용하여 다른 탭에 열려 있는 실시간 웹사이트에서 직접 샘플링할 수 있습니다. 색상이 CSS 속성이 아닌 SVG나 이미지 자산에 포함된 경우, 브라우저 개발자 도구에서 계산된 스타일을 검사하는 것보다 훨씬 빠릅니다. 선택 기록은 최근 16개의 색상을 보관하므로, 디자인 도구로 전환하기 전에 여러 소스에서 전체 브랜드 팔레트를 수집할 수 있습니다.

사용하기 좋은 팔레트는 대체로 3~6가지 색상으로 구성됩니다. 주요 색상 하나, 보조 색상 한두 개, 그리고 강조색으로 이루어집니다. 추출 도구는 8개의 주요 스워치를 반환하므로 가장 잘 맞는 조합을 선택할 수 있습니다 — 개별 스워치를 복사하거나 무드보드를 위해 전체를 가져가세요. 실제로는 4가지 색상이 탄탄한 출발점입니다. 기본색 하나, 보조색 하나, 중립색 하나, 강조색 하나. Stripe나 Linear 같은 회사의 디자인 시스템은 다양한 고유 색상보다는 동일한 색조의 명도 및 채도 변형이 많은 간결한 팔레트를 사용합니다.

CSS와 웹 작업에는 HEX(코드베이스와 디자인 도구에서 가장 흔히 사용), 화면 및 캔버스 코드에는 RGB/RGBA, 팔레트 구성 및 체계적인 조정에는 HSL, 인쇄 출력에는 CMYK를 사용합니다. Figma, Sketch, Adobe XD는 모두 HEX, RGB, HSL을 지원합니다. 이 도구는 모든 픽셀에 대해 HEX, RGB, HSL을 표시하므로 수동 변환 없이 워크플로에 필요한 형식을 바로 복사할 수 있습니다. 인쇄 작업을 위해 CMYK도 필요하다면, HEX를 무료 온라인 변환기에 붙여넣으면 됩니다 — 캔버스 API는 기본적으로 CMYK를 출력하지 않습니다.

픽셀을 클릭하면 HEX 코드가 자동으로 클립보드에 복사됩니다. 모든 값 행, 기록 스워치, 팔레트 칩도 클릭 한 번으로 복사됩니다 — 값이나 스워치를 클릭하면 즉시 복사됩니다. 선택 기록은 최근 16개의 색상을 보관하므로 다른 이미지로 전환하기 전에 한 이미지에서 여러 색조를 순서대로 수집할 수 있습니다. 스워치에 마우스를 올리면 클릭 전에 값을 미리 확인할 수 있습니다. 팔레트 전체를 목록으로 필요하다면 '전체 복사'를 사용하면 8개의 HEX 코드가 쉼표로 구분되어 CSS 변수나 디자인 문서에 바로 붙여넣을 수 있는 형식으로 복사됩니다.

예 — 프레임이나 페이지를 스크린샷으로 찍고 Ctrl+V로 도구에 붙여넣으면 됩니다(파일로 저장할 필요 없음). 또는 화면 스포이드를 사용하여 PDF나 동영상이 재생되는 동안 직접 샘플링할 수 있습니다. 브라우저에서 열린 PDF의 경우 화면 스포이드가 가장 빠릅니다. Chrome에서 PDF를 열고 '화면에서 추출'을 클릭한 뒤 원하는 색상을 클릭하면 됩니다. 동영상의 경우 가장 정확한 샘플을 위해 해당 프레임에서 일시 정지한 후 추출하세요.

브라우저는 이미지를 렌더링할 때 색상 프로파일(ICC) 변환을 적용할 수 있으며, 스크린샷은 디스플레이의 색상 프로파일을 상속합니다. 이 도구는 브라우저에서 렌더링된 실제 sRGB 픽셀 값 — CSS에 사용할 값 — 을 보고하므로 웹 작업에 적합합니다. Photoshop이나 Figma와 값이 다를 경우, 디스플레이가 sRGB로 보정되어 있는지, 이미지 파일에 일치하는 색상 프로파일이 내장되어 있는지 확인하세요. 로고 자산의 경우, 디자이너가 추출에 의존하지 않고 브랜드 HEX 값을 직접 제공하는 것이 이상적입니다.

imagecolorpicker.com은 가장 많이 사용되는 대안으로 단일 픽셀 선택과 팔레트 추출을 제공하지만 이미지를 서버에 업로드하고 광고가 표시됩니다. Adobe Color는 사진에서 팔레트를 추출하지만 Adobe 계정이 필요하고 이미지를 Adobe 서버로 전송하며, 줌 루페가 있는 단일 픽셀 선택 기능이 없습니다. Canva의 색상 추출기는 Canva 편집기에 내장되어 있으며 Canva 프로젝트 내의 이미지에서만 작동합니다. macOS Digital Color Meter와 Windows PowerToys Color Picker는 화면 샘플링은 가능하지만 파일에서 팔레트를 추출하지 못합니다. 이 도구는 줌 루페, 화면 스포이드, 16색 기록, 팔레트 추출 기능을 모두 갖춘 유일한 무료, 완전 클라이언트 측 옵션입니다 — 계정 없이, 광고 없이, 업로드 없이.