CRX id
nehjikgeimnnhanmobkkfjlnnklgmneo
nehjikgeimnnhanmobkkfjlnnklgmneo
Description from extension meta
모든 웹페이지에서 원하는 픽셀 색상을 가져와서 HEX 코드를 즉시 복사하세요.
Image from store
Description from store
색상 정확도는 모든 아름다운 인터페이스, 브랜드 자산, 데이터 시각화 대시보드, 그리고 마케팅 캠페인을 하나로 연결하는 핵심 요소입니다. 하지만 디자이너와 프런트엔드 엔지니어들은 여전히 개발 도구에서 16진수 코드를 곁눈질하거나 페이지를 스크린샷으로 찍어 포토샵에서 샘플링하는 데 수많은 시간을 낭비합니다. Manifest V3 기반의 가벼운 브라우저 확장 프로그램인 Eye Drop Tool은 이러한 번거로움을 단 하나의 우아한 제스처로 바꿔줍니다. 툴바 아이콘을 클릭하고 뷰포트에서 원하는 픽셀을 선택하면 정확한 #RRGGBB 값이 클립보드에 복사됩니다. 은은한 토스트 소리가 나면서 작업이 완료되었음을 알려주고, 작업 흐름이 끊어지기 전에 바로 다시 작업으로 돌아갈 수 있습니다.
이 확장 프로그램이 중요한 이유
브라우저 기반 색상 선택기는 수년 동안 존재해 왔지만, 대부분은 검사기 깊숙이 파묻혀 있거나, DOM 요소에 국한되거나, 마우스 오른쪽 버튼 하위 메뉴 뒤에 가려져 있습니다. Eye Drop Tool은 모니터가 렌더링하는 모든 것(이미지, 캔버스, 비디오 프레임, SVG, 심지어 서드파티 플러그인까지)에서 작동하는 항상 표시되는 버튼을 통해 동일한 기능을 제공합니다.
주요 기능
원클릭 활성화 - 팝업이나 설정 패널이 없습니다. 백그라운드 서비스 워커가 피커 콘텐츠 스크립트를 즉시 주입하여 유휴 상태일 때 메모리 오버헤드를 거의 0으로 유지합니다.
유니버설 픽셀 샘플링 - 이 확장 기능은 DOM 트리가 아닌 화면 버퍼를 캡처하므로 정적 HTML뿐만 아니라 동적으로 렌더링된 WebGL 장면, 게임, 스트리밍 비디오에서도 작동합니다.
즉시 클립보드 복사 - HEX 문자열이 클립보드에 자동으로 기록되므로 중간 대화 상자 없이 Figma, VS Code 또는 Slack에 바로 붙여넣을 수 있습니다.
시각적 확인 토스트 – 페이지 모서리의 마이크로 상호작용(“#ffcc33 복사됨!”)은 작업이 성공했음을 알려주고 1.5초 후에 사라집니다.
사용자 혜택
시간 절약 – 개발 도구나 외부 앱을 사용할 필요가 없습니다. 디자인 스프린트 기간 동안 몇 초가 몇 시간으로 누적됩니다.
인지 부하 감소 – 동일한 정신적 맥락에 머무르면 창의적인 흐름이 유지됩니다. 창을 왔다 갔다 하거나 초점을 전환할 필요가 없습니다.
픽셀 단위의 완벽한 일관성 – 프로덕션 코드가 브랜드 스타일 가이드와 일치하는지, 마케팅 모형이 접근성 대비 비율을 준수하는지 빠르게 확인하세요.
오류 방지 – 16진수 코드를 수동으로 입력하면 오타가 발생할 수 있습니다. 클립보드에 복사하면 이런 위험이 없어지고, 커밋이 더 깔끔해지고 버그 보고도 줄어듭니다.
대상 사용자 그룹
UI/UX 디자이너
라이브 프로토타입에서 색상을 빠르게 샘플링하여 디자인 시스템에서 재사용합니다.
Figma 리뷰 세션 중 음영 미세 조정
프런트엔드 개발자
CSS 변수가 다양한 상태에서 올바르게 렌더링되는지 확인합니다.
스테이징에서 버튼 위에 마우스를 올려놓고 활성 색상을 잡으세요.
QA 엔지니어
WCAG 대비율 및 브랜드 준수 확인
회귀 테스트 중에 프로덕션 빌드를 사양과 비교하세요.
디지털 마케터 및 콘텐츠 제작자
임시 그래픽을 웹사이트 팔레트에 맞춰 조정
마지막 순간의 소셜 타일을 위해 영웅 배너 파란색을 당기세요