How do I pick a color from an image?

Upload an image using the button above, drag and drop a file, or paste a screenshot with Ctrl+V. Once loaded, move your cursor over the image and click on any pixel to lock its color. The magnifier loupe shows a zoomed-in view so you can pick colors with precision.

Can I pick a color from a screenshot?

Yes. Take a screenshot and press Ctrl+V (or Cmd+V on macOS) anywhere on the page. The image color picker automatically pastes it onto the canvas so you can immediately start sampling colors from it.

Does the image get uploaded to a server?

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images and color data never leave your device, and nothing is stored on any server.

What color formats does the tool provide?

The tool provides HEX, RGB, HSL, HSV, OKLCH, and CMYK color values for every sampled pixel. You can copy any format with one click or export all values at once.

What is the difference between HEX, RGB and HSL?

HEX is a six-character code used in HTML and CSS to represent colors. RGB defines a color by its red, green, and blue channel values. HSL stands for Hue, Saturation, and Lightness, making it easier to adjust a color's warmth or brightness intuitively.

Can I pick colors from a high-resolution image?

Yes. The image color picker supports images of any resolution. You can zoom in up to 3200% to see individual pixels clearly, making it easy to pick exact colors even from very large or detailed images.

Why can neighboring pixels have different colors?

Digital images often have slight color variations between neighboring pixels due to JPEG compression, anti-aliasing at edges, or camera sensor noise. This is normal. The tool offers 3x3, 5x5, and 11x11 area sampling to average out these variations when needed.

What is color sampling?

Color sampling is the process of reading the color value of one or more pixels from an image. Point sampling reads a single pixel, while area sampling averages a grid of pixels (such as 3x3 or 5x5) to give a more representative color, which is useful for photographs and textured surfaces.

Can I extract a color palette from an image?

Yes. The palette extractor analyzes your image and returns its dominant colors in modes like Dominant, Vibrant, Muted, and Balanced. You can export the palette as CSS variables, JSON, SVG, or a downloadable PNG card.

Can I use the tool on mobile?

Yes. The image color picker works on modern mobile browsers. You can upload photos from your gallery or paste screenshots directly on your phone or tablet.

Does the tool work with PNG, JPG and WebP images?

Yes. The tool supports PNG, JPG, JPEG, WebP, GIF, and SVG image formats. You can also load images directly from a public URL.

How accurate is the color picker?

The color picker reads the exact sRGB pixel values stored in the image file, so the colors are as accurate as the source data. Any perceived difference between screens is usually caused by display calibration, color profile settings, or brightness differences between devices.

이미지 컬러 피커 – 모든 이미지에서 색상 선택

Image Color Picker – Upload & Pick Colors

이미지를 업로드하고, 어떤 픽셀이든 확대하면 즉시 HEX, RGB, HSL 등을 얻을 수 있습니다. 모든 것이 브라우저에서 로컬로 처리됩니다.

drag & drop•Ctrl + V 붙여넣기•

또는 샘플 이미지로 즉시 테스트:

🔒 모든 것이 브라우저에서 로컬로 처리됩니다. 서버 저장 없음.

#171717

가장 가까운 CSS 색상: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

색상 속성:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

WCAG 대비 검사기WCAG 2.1

흰색과 검은색에 대한 선택된 배경색의 접근성 대비 비율을 계산합니다.

Best: White (18.2 : 1)

흰색 텍스트 (#FFFFFF)18.20 : 1

큰 헤드라인 미리보기 (18pt / 24px)

표준 14px 본문 텍스트 미리보기. 대비 비율은 저시력 사용자를 위한 가독성을 결정합니다.

AA Normal

AA Large

AAA Normal

AAA Large

검은색 텍스트 (#000000)1.15 : 1

큰 헤드라인 미리보기 (18pt / 24px)

표준 14px 본문 텍스트 미리보기. 대비 비율은 저시력 사용자를 위한 가독성을 결정합니다.

AA Normal

AA Large

AAA Normal

AAA Large

색상 하모니

활성 색상에서 수학적으로 파생된 하모닉 팔레트. 스워치를 클릭하여 선택합니다.

추출된 이미지 팔레트

클라이언트 사이드 색상 양자화를 사용하여 업로드된 이미지에서 진정한 색상 팔레트를 도출합니다.

색상:

내보내기 옵션:

최근 색상 기록0

브라우저 스토리지에 로컬로 저장됩니다. 서버에 전송되지 않습니다.

아직 선택된 색상이 없습니다. 이미지 아무 곳이나 클릭하여 여기에 색상을 기록하세요.

사용자 가이드 및 참조

이미지 컬러 피킹에 대해 알아야 할 모든 것

색상 공간, 정밀 샘플링, 대비 접근성 및 클라이언트 사이드 처리에 대한 포괄적인 가이드.

1모든 이미지에서 색상을 선택하는 방법

1. 이미지 로드Drag and drop any PNG, JPG, WebP, GIF, or SVG file, paste directly from clipboard (<kbd class="px-1 py-0.5 rounded bg-white dark:bg-[#2a2a2a] border border-[#d1d5db] dark:border-[#2e2e2e]">Ctrl+V</kbd>), or enter a public image URL.

2. 확대 및 샘플링Use mouse wheel or toolbar buttons to zoom in up to 3200%. The magnifier loupe displays a 9×9 real-time pixel grid. Hover over any target pixel and click to lock.

3. 복사 및 내보내기Instantly copy color codes in HEX, RGB, HSL, HSV, OKLCH, or CMYK. Extract authentic palettes and export to CSS, JSON, SVG, or high-res PNG cards.

2이미지 컬러 샘플링 이해 (1×1 vs 3×3 vs 5×5)

디지털 이미지에서 개별 픽셀은 손실 JPEG 압축, 벡터 엣지 주변의 안티앨리어싱 또는 카메라 센서의 자연스러운 노이즈로 인해 약간 변할 수 있습니다. 샘플링 모드를 통해 픽셀 색상을 측정하는 방법을 완전히 제어할 수 있습니다:

1×1 단일 픽셀 (포인트 샘플링)

커서 아래 단일 픽셀의 정확한 RGB 색상을 읽습니다. 경계가 선명하고 색상 영역이 균일한 플랫 UI 목업, 벡터 아트, 도트 이미지 및 디지털 로고에 적합합니다.

3×3 및 5×5 영역 평균

커서를 중심으로 정방형 매트릭스(9 또는 25 픽셀)를 샘플링하고 대표 색상을 계산합니다. 평균은 색상 채널 전반에 걸친 산술 평균을 계산하고, 중위수는 이상치 노이즈와 그레인을 필터링합니다.

3색상 공간 및 모델 비교

형식	예제	주요 사용 사례
HEX	#0070F3	범용 웹 디자인, HTML, CSS 스타일시트, UI 토큰.
RGB	rgb(0, 112, 243)	화면 디스플레이 하드웨어, Canvas API, CSS rgba() 불투명도 조작.
HSL	hsl(212, 100%, 48%)	직관적인 조정: 색상 톤을 변경하지 않고 명도나 채도를 쉽게 조정.
HSV / HSB	hsv(212, 100%, 95%)	Figma, Sketch, Adobe Photoshop 컬러 피커.
OKLCH	oklch(0.58 0.22 254.2)	명도와 크로마 전반에 걸친 지각적 균일성을 가진 최신 CSS Color 4 표준.
CMYK	cmyk(100%, 54%, 0%, 5%)	상업용 오프셋 및 디지털 물리적 인쇄 제작.

🔒개인정보처리방침 – 이미지 컬러 피커

많은 온라인 컬러 피커가 원격 클라우드 서버에 개인 이미지를 업로드하는 것과 달리, Image Color Picker는 네이티브 HTML5 Canvas API와 JavaScript TypedArrays를 사용하여 브라우저에서 직접 데이터의 100%를 처리합니다.

이미지는 로컬 컴퓨터나 스마트폰을 떠나지 않습니다.
사용자 계정, 추적 토큰 또는 서버 사이드 데이터베이스가 없습니다.
페이지가 브라우저에 로드되면 완전히 오프라인으로 작동합니다.

모든 이미지에서 모든 색상을 선택하세요.