Glyph WidgetsGlyph Widgets
소개연락처개인정보약관Ko-fi에서 후원하기

© 2026 Glyph Widgets. 모든 권리 보유.

·

100% 클라이언트 측 처리

색상 선택기

마지막 업데이트: 2026년 3월 6일

EyeDropper API를 사용하여 화면에서 색상을 선택하거나 HEX, RGB, HSL 형식으로 색상을 입력합니다. 모든 주요 색상 형식 간에 즉시 변환합니다.

기능

  • ▶시각적 색상 선택
  • ▶HEX, RGB, HSL 변환
  • ▶클립보드에 복사
  • ▶색상 기록
  • ▶EyeDropper API
  • ▶색상 팔레트

이 도구 사용 방법

1

화면에서 선택

화면에서 선택'을 클릭하여 EyeDropper 도구를 활성화하세요. 화면의 아무 곳이나 클릭하여 해당 색상을 캡처하세요. 다른 애플리케이션을 포함한 모든 표시 콘텐츠에서 작동합니다.

2

색상 입력 사용

색상 사각형을 클릭하여 기본 색상 선택기를 여세요. 모든 브라우저에서 작동하며 색상을 시각적으로 선택하는 방법을 제공합니다.

3

값 수동 입력

HEX 값을 직접 입력하거나(예: #3B82F6) RGB 및 HSL 슬라이더를 조정하여 정밀하게 제어하세요. 입력할 때 모든 형식이 자동으로 업데이트됩니다.

4

복사 및 사용

모든 형식 옆의 복사 버튼을 클릭하여 클립보드에 복사하세요. 색상 기록을 사용하여 이전에 선택한 색상에 빠르게 액세스하세요.

색상 선택 방법

색상 선택기는 여러 입력 방법을 지원합니다: 시각적 선택을 위한 기본 HTML5 색상 입력, 화면 어디에서나 색상을 샘플링하는 EyeDropper API, 그리고 HEX, RGB 또는 HSL 값의 직접 입력입니다.

EyeDropper API

'화면에서 선택'을 클릭하면 브라우저가 기본 EyeDropper 인터페이스를 활성화합니다. 커서 아래 픽셀의 확대 보기를 표시하고, 다른 애플리케이션에서도 디스플레이에 보이는 모든 색상을 클릭하여 샘플링할 수 있습니다.

색 공간 변환

색상 변환은 표준 수학 공식을 따릅니다. RGB에서 HEX는 십진수 값을 십육진수로 변환합니다. RGB에서 HSL은 색상환 위치에서 색조를, 색상 강도에서 채도를, RGB 최소/최대 값의 평균에서 명도를 계산합니다.

브라우저 호환성

EyeDropper API는 Chrome 95+, Edge 95+ 또는 Opera 81+가 필요합니다. 브라우저 지원 여부를 감지하고 적절한 UI를 표시합니다. 기본 색상 입력과 수동 입력은 모든 최신 브라우저에서 대체 수단으로 작동합니다.

개인정보 보호 및 보안

모든 처리는 JavaScript를 사용하여 브라우저에서 로컬로 수행됩니다. 색상 데이터, 화면 캡처 또는 어떤 정보도 외부 서버로 전송되지 않습니다. 색상 기록은 브라우저의 localStorage에만 저장됩니다.

자주 묻는 질문

'화면에서 선택' 버튼을 클릭하여 EyeDropper 도구를 활성화하세요. 커서가 돋보기로 변합니다. 화면의 아무 곳이나 클릭하여 해당 색상을 캡처하세요. 이 기능에는 최신 브라우저가 필요합니다(Chrome 95+, Edge 95+).

관련 도구

색상 변환기

모든 색상 형식 간 변환

대비 검사기

WCAG 색상 대비 확인

팔레트 생성기

색상 팔레트 생성

그라데이션 생성기

CSS 그라데이션 생성

#3B82F6

이 브라우저에서는 화면 색상 선택이 지원되지 않습니다. 색상 입력을 사용하거나 값을 직접 입력하세요.

모든 색상 형식

공유
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSB
hsb(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)

도구 기록은(는) 서포터 전용 기능입니다.

도구 메모은(는) 서포터 전용 기능입니다.