스포이트 색상 선택기

사용 방법

1. 화면에서 추출을 클릭합니다. 커서가 돋보기로 바뀌면 원하는 픽셀을 클릭해 샘플링합니다.
2. 또는 기본 색상 선택기 버튼으로 브라우저 내장 색상 대화 상자를 사용할 수 있습니다(모든 브라우저에서 동작).
3. HEX, RGB, HSL 필드는 동기화되어 업데이트됩니다. 한 필드를 편집하면 나머지 두 개가 다시 계산됩니다.
4. 각 포맷 옆의 복사를 클릭하면 클립보드로 전송됩니다.
5. 최근 8개의 추출 색상은 최근 색상 스트립에 남아 있습니다 — 색상 칩을 클릭하면 다시 불러옵니다.

60초로 보는 EyeDropper API

EyeDropper는 브라우저 기본 Web API로, 페이지가 사용자 화면의 어디에서나 픽셀을 샘플링할 수 있게 해줍니다. 페이지가 new EyeDropper().open()을 호출하면 브라우저가 시스템 수준의 돋보기를 열고, 클릭 시 선택한 색상을 담은 sRGBHex 속성을 가진 객체로 Promise가 resolve됩니다.

이 API는 프라이버시 안전합니다: 페이지는 픽셀 데이터를 받지 못하고 선택된 단일 색상만 받습니다. 모든 추출은 사용자의 클릭으로 시작되어야 하며, 헤드리스나 스크립트 기반 샘플링은 불가능합니다.

어떤 모드를 사용할지

• 화면에서 추출 — 색상이 다른 앱, 스크린샷, 동영상 프레임에 있을 때.
• 기본 색상 선택기 — 새 색상을 만들거나 익숙한 HSV 휠을 사용하고 싶을 때.
• 필드에 입력 — 정확한 값(예: 디자인 스펙)이 있고 다른 포맷으로 변환하고 싶을 때.