Eyedropper.app 💧

https://eyedropper.app

Features ✨

• 🎨 Screen color picker
• 💯% conveniently web-based; no extension or download required
• 📋 Copy to clipboard automatically
• 🤗 Open source

EyeDropper Web API

Browser support: caniuse.com

The API doesn't let the eyedropper mode start without user intent. The EyeDropper.prototype.open() method can only be called in response to a user action (like a button click).

source: MDN

Deployment

pnpm install
pnpm build
pnpm deploy-prod

Environment: Static site on AWS S3 with CloudFront CDN.

Initial setup: docs

Prerequisites

• Install AWS CLI
• Add AWS credentials to .env (see .env.example)

Troubleshooting

• Needed to manually set the Content-Type of .js files for some reason.

TODO 📋

📣 PRs Welcome! 📣

Priority ⬆️

• Add <input type="color"> for easy color adjustments & conversion
• Add HSL color support and use a third-party library for conversion
• Parse colors from URL in any compatible format

MVP ✅

• Copy color to clipboard
  • Automatically on click
  • ...and on click of each color
• Adjust text color based on background color
• Error screen for unsupported browsers
• Update url & browser history on color change
• Footer actions
  • Random color
  • Github link
  • (?) Browser support
  • (?) API docs
• Deploy to S3

Polish 🫧

• An expanding circular animation when a new color is picked
• SEO
• Improve Lighthouse scores (<meta> description, cache policy, ...)
• Mac/Linux bug: WICG/eyedropper-api#31
• Improve favicon
• Typography
• Entrance animation for all elements
• Hover/active animations for main button icon

Extra Features ✨

• opengraph and twitter meta tags
• Remember last color and preferred color format in localStorage
• Accept any color format in URL fragment
  • e.g. https://eyedropper.app/#rgb(255,255,255)
• Update favicon SVG with selected color (?)
• Custom SVG eyedropper w/ color inside
• Responsive layout
• Typewriter animation for hex/rgb values
• <noscript> error page
• Support prefers-reduced-motion
• Show color names (HTML/pantone/brand) when applicable
• Auto open color picker on page load (optional setting)