색상 선택기

무료 온라인 색상 선택기로 모든 이미지나 화면에서 색상을 선택하세요. HEX, RGB, HSL 코드를 즉시 얻으세요. 100% 비공개이며 브라우저에서 작동합니다.

색상 선택기는 이미지나 화면에서 색상 값을 추출하여 HEX, RGB, HSL 형식으로 변환합니다. EyeDropper API를 통한 화면 전체 캡처, 이미지 업로드, 색상 기록을 지원합니다. 모든 처리는 브라우저에서 로컬로 이루어지며, 이미지가 서버로 업로드되지 않습니다.

업로드 없이 이미지나 화면에서 색상 선택

이미지를 업로드하거나 시스템 전체 스포이드를 사용하여 화면의 모든 픽셀을 캡처하세요. HEX, RGB, HSL을 즉시 얻을 수 있습니다 — 모두 브라우저에서 로컬로 처리됩니다.

모든 형식

화면 스포이드

무료 무제한

사용 방법

1
방법 선택
이미지를 업로드하거나 '화면에서 선택' 버튼을 사용하세요.
2
색상 선택
이미지 위로 마우스를 가져가 미리보기를 확인한 다음 클릭하여 색상을 캡처하세요.
3
코드 복사
색상은 기록에 추가됩니다. 클릭하여 HEX, RGB 또는 HSL 값을 복사하세요.

디자이너와 개발자의 가장 친한 친구

디자이너용

브랜드 로고, 무드 보드 이미지 또는 영감을 주는 사진에서 정확한 헥스 코드를 빠르게 가져오세요. 픽셀 단위의 정확성으로 색상 팔레트를 구축하세요.

개발자용

UI 목업(JPG 또는 PNG)에서 색상 값을 추출하여 CSS 또는 앱 코드에서 직접 사용하세요. 기본 개발용 RGB 값 또는 웹 스타일링용 HEX를 가져오세요.

디지털 색상 선택 이해하기

디지털 색상의 작동 방식

디지털 디스플레이는 RGB(빨강, 초록, 파랑) 가산 색상 모델을 사용하여 색상을 재현합니다. 화면의 각 픽셀은 세 개의 서브픽셀(빨강, 초록, 파랑)로 구성되며, 각각 256단계의 밝기(0-255)로 설정할 수 있습니다. 이 세 채널을 결합하여 표준 디스플레이는 1670만 색상(256^3)을 생성할 수 있습니다. 이미지나 화면에서 선택한 색상 값은 해당 픽셀의 RGB 트리플렛이며, HEX(#00BFA5), RGB(rgb(0, 191, 165)) 또는 HSL(hsl(174, 100%, 37%))과 같은 여러 표기법으로 표현할 수 있습니다.

저희 도구로 이미지에서 색상을 선택하면 브라우저의 Canvas API가 getImageData()를 사용하여 클릭 위치의 픽셀 데이터를 읽습니다. 이것은 픽셀의 RGBA 값(빨강, 초록, 파랑, 알파)을 포함하는 Uint8ClampedArray를 반환합니다. 알파 채널(0-255)은 투명도를 나타냅니다. 0은 완전히 투명, 255는 완전히 불투명입니다. 그런 다음 도구는 RGB 값을 HEX와 HSL로 변환하여 표시합니다. 화면 전체 색상 선택의 경우 EyeDropper API는 다른 브라우저 탭과 데스크톱 응용 프로그램을 포함하여 디스플레이의 어느 곳에서나 단일 픽셀의 색상을 캡처합니다.

색상을 선택할 때 색상 공간이 중요합니다. sRGB 색상 공간은 웹 디자인의 표준입니다. 브라우저, CSS, HTML이 사용하는 것입니다. 하지만 많은 최신 디스플레이는 sRGB보다 더 포화된 색상을 표시할 수 있는 더 넓은 색역(Adobe RGB, Display P3)을 지원합니다. P3 디스플레이 이미지에서 색상을 선택하면 브라우저가 sRGB 색역을 벗어난 P3 값을 보고할 수 있습니다. 웹 디자인의 경우 기기 간 일관된 색상을 보장하기 위해 항상 sRGB에서 작업하세요. 인쇄 디자인의 경우 전용 인쇄 색상 관리 도구를 사용하여 CMYK로 변환하는 것을 고려하세요.

실용적인 색상 선택 워크플로

디자이너는 여러 워크플로에서 색상 선택기를 사용합니다: 로고 이미지에서 브랜드 색상 추출, 사진에서 색상 팔레트 구축, 디자인 목업과 라이브 웹사이트 간 색상 일치, 화면 어디서나 영감 색상 캡처. EyeDropper API는 마지막 사용 사례에 특히 강력합니다. 먼저 스크린샷을 찍지 않고도 Figma의 디자인, 다른 탭의 웹사이트, 또는 데스크톱 응용 프로그램에서 색상을 선택할 수 있습니다.

이미지에서 색상 팔레트를 구축할 때 주요 톤을 나타내는 3-5개 색상을 선택하세요. 가장 두드러진 색상(보통 배경)으로 시작한 다음 1-2개의 강조 색상을 선택하고 마지막으로 중성색을 선택하세요. 팔레트 생성기와 같은 도구는 이미지의 색상 히스토그램을 분석하여 이 과정을 자동화할 수 있습니다. 접근성을 위해 색상을 선택할 때 항상 텍스트와 배경색 간의 명암 비율을 확인하세요. 저희 명암 검사기 도구는 WCAG 2.1 명암 공식을 사용하여 가독성을 보장합니다.

색상 코드 이해하기

HEX (16진수)

예: #00BFA5. 웹 색상에 가장 일반적인 형식입니다. 빨강, 초록, 파랑의 혼합을 나타내는 6자리 코드입니다.

RGB (빨강, 초록, 파랑)

예: rgb(0, 191, 165). 빨강, 초록, 파랑 빛 구성 요소의 강도(0-255)를 정의합니다.

HSL (색상, 채도, 명도)

예: hsl(174, 100%, 37%). 사람에게 더 직관적입니다. 색상은 색상 유형, 채도는 강도, 명도는 밝기입니다.

다른 색상 선택기와 어떻게 비교되나요?

인기 색상 선택 도구의 나란히 비교입니다.

기능	NovaTools	ImageColorPicker.com
이미지에서 선택	Canvas API
화면에서 선택	EyeDropper API
HEX + RGB + HSL 출력	모두 three	HEX 전용
색상 기록	무제한
프라이버시(업로드 없음)	100% 로컬	이미지 업로드
오프라인 작동

대부분의 온라인 색상 선택기는 이미지를 서버에 업로드해야 합니다. 당사 도구는 브라우저의 Canvas API에서 직접 픽셀 데이터를 읽습니다. 이미지가 기기를 떠나지 않습니다. EyeDropper API를 통해 화면 전체 색상 캡처가 가능하며, 이는 서버 기반 도구에서 제공할 수 없는 기능입니다.

자주 묻는 질문

제 이미지가 서버에 업로드되나요?

아니요. 귀하의 개인 정보는 보장됩니다. 모든 처리는 웹 브라우저 내에서 완전히 이루어집니다. 이미지는 절대 기기를 떠나지 않으며, 저희는 이미지를 보거나 저장하지 않습니다.

'화면에서 색상 선택' 버튼은 무엇인가요?

이 기능은 브라우저에 내장된 EyeDropper API(Chrome/Edge/Opera)를 사용합니다. 이를 통해 브라우저의 이미지뿐만 아니라 전체 화면의 모든 응용 프로그램이나 창에서 색상을 선택할 수 있습니다.

HEX, RGB, HSL의 차이점은 무엇인가요?

HEX(#RRGGBB)는 웹 디자인의 표준입니다. RGB는 빨강, 초록, 파랑의 강도에 0-255 값을 사용합니다. HSL(색상, 채도, 명도)은 사람이 색상 속성을 조정하기에 더 직관적인 경우가 많습니다.

어떤 브라우저가 EyeDropper API를 지원하나요?

The EyeDropper API is currently supported in Chrome (version 95+), Edge (version 95+), and Opera (version 81+). It is not supported in Firefox or Safari as of 2026. If you are using an unsupported browser, the 'Pick from Screen' button will not appear, but you can still pick colors from uploaded images. The EyeDropper API is a W3C draft specification, so support may expand to other browsers in the future. For Firefox users, a similar feature is available through browser extensions. For Safari users, the built-in Digital Color Meter utility (in Applications > Utilities) provides similar system-wide color picking.

여러 색상을 선택하고 기록을 유지할 수 있나요?

Yes. Every color you pick is automatically added to your color history, which appears below the main color display. Each history entry shows the color swatch, HEX value, RGB value, and HSL value, with individual copy buttons for each format. You can pick an unlimited number of colors in a single session. The history persists until you refresh or close the page — it is not saved to local storage or transmitted to any server. This is useful for building a color palette from a single image or capturing multiple colors from different parts of your screen.

색상 값을 어떻게 복사하나요?

Click any color value (HEX, RGB, or HSL) in the display or history section to copy it to your clipboard. The copied value is formatted as a CSS-ready string: `#00BFA5` for HEX, `rgb(0, 191, 165)` for RGB, or `hsl(174, 100%, 37%)` for HSL. You can paste it directly into your CSS, SCSS, Tailwind config, design tool, or code editor. The tool uses the Clipboard API for reliable copying across all modern browsers. A visual confirmation (checkmark or tooltip) appears when the value is copied successfully.

이 도구를 사용하여 웹사이트에서 색상을 선택할 수 있나요?

Yes, using the 'Pick from Screen' feature in supported browsers (Chrome, Edge, Opera). Navigate to the website you want to pick colors from, then click the 'Pick from Screen' button in our tool. The browser will minimize our tool and let you pick any pixel visible on your screen, including pixels from other browser tabs, desktop applications, or the operating system UI. This is perfect for matching brand colors, extracting a website's color scheme, or capturing a color from a design mockup in Figma or Sketch.

색상 값이 얼마나 정확한가요?

The tool reads exact pixel values from the image or screen using the browser's native color pipeline. For uploaded images, the accuracy is perfect — the tool reads the raw RGB values from the image file. For screen picking, the accuracy depends on your display's color profile and calibration. Most modern displays use the sRGB color space, which matches the tool's output format. If your display uses a wider gamut (e.g., Display P3 on modern Macs), the picked color may not exactly match the original source color, but the difference is usually imperceptible for design purposes.

귀하의 프라이버시가 저희의 최우선 사항입니다

이 도구는 완전히 브라우저 내에서 실행됩니다. 파일은 서버로 업로드, 저장, 분석되지 않습니다.

파일을 업로드, 저장, 분석하지 않습니다.
처리하는 모든 것은 장치에 남습니다.
서버 측 처리, 클라우드 저장소, 분석이 없습니다.

인터넷 연결이 끊겨도 파일은 안전합니다.

이것도 좋아하실 수 있습니다

이 주제 둘러보기

이 카테고리의 모든 도구색상 도구 이 주제의 가이드디자인 및 접근성

대비 검사기

WCAG에 대한 색상 대비를 확인합니다.

팔레트 생성기

아름다운 색상 팔레트를 만듭니다.

HEX ↔ RGB ↔ HSL 변환기

HEX, RGB, HSL 형식 간에 색상을 변환하세요. 실시간 미리보기, 빠른 프리셋, CSS용 값 복사. 100% 클라이언트 측 실행, 업로드 없음.