https://eyedropper.app

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

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

pnpm install
pnpm build
pnpm deploy-prod

Environment: Static site on AWS S3 with CloudFront CDN.

Initial setup: docs

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

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

📣 PRs Welcome! 📣

• 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

• 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

• 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

• 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)