EyeDropper
화면 색 수집 팔레트
해결하는 문제
화면에 보이는 색의 정확한 코드를 알고 싶다.
화면 어디서든 색을 집어 모으고, 사진에서 주요 색을 뽑고, 글자를 올렸을 때 읽기 좋은지 대비를 계산합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것화면 색 또는 사진
브라우저가 하는 일색 추출과 빈도 정리, 대비 비율 계산
나오는 것팔레트, CSS 변수 코드
쓰는 브라우저 기술
EyeDropper APIinput type=colorCanvas getImageDataClipboard APIlocalStorage
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- EyeDropper().open()
- 뽑을 색 개수
- 대비 기준 4.5:1 (작은 글자)
자주 막히는 곳
- 스포이트는 PC 크롬·엣지에서만 된다
- 사진 색 추출은 비슷한 색이 여러 개로 나뉠 수 있다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 사진 분위기에 맞는 배색 추천
- 브랜드 색 가이드 자동 작성
웹 서비스
- 디자인 수업 도구
- 브랜드 색 관리
피지컬 AI
- 따 온 색으로 실제 조명 색 맞추기
- 색 센서 측정값과 비교
넓히는 방법
- k-means로 더 정교한 색 추출
- 팔레트로 배색 미리보기
- 색약 시뮬레이션
지원 브라우저
PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬일부
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
화면 어디서든 색을 집어 팔레트에 모으고, 사진에서 주요 색 6개를 뽑고, 글자 대비까지 알려주는 웹페이지를 만들어줘.
같은 분류의 능력
09 개발 도구로서의 브라우저에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md