Eye Droppin’

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Quick hits! There is a new web API called EyeDropper:

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  try {
    // This has gotta be triggered by a user interaction,
    // so consider this pseudo-code.
    const result = await eyeDropper.open();
    const colorHexValue = result.sRGBHex;
  } catch (err) {
    // The user escaped the eyedropper mode.
  • Here’s a very good blog post intro on it.
  • It’s only in Chrome’n’friends right now.
  • I wish I knew better how to watchdog APIs like this. Looks like it originally came from Edge, then became a community group thing, which is where the draft spec is, which went through a public review before shipping was announced (in Chrome), and now it’s live. Seems like a good process, but also that Chrome can really steamroll right through this process essentially all by themselves. Other browsers really don’t even have to say a word and it still ships. Mixed feelings, but mostly positive, especially because this is such a little bonus feature and not something that I’d consider ultra critical to any web app.
  • You can pick colors from anywhere on your entire screen, which is great. It’ll improve tools like Figma, which has a color picker, but is currently limited to picking off the canvas.
  • It’s already being used in production apps, like Slides.com and Polypane, improving UX. (via Bramus)
  • There is a Chrome Extention. (again, via Bramus)
  • But hey maybe a bookmarklet is just as easy.
  • When you do <input type="color">, the UI popup thingy for that (platform provided) color picker is in it too (at least on macOS), so there is always that. Makes me think that anywhere you use <input type="color"> it would make sense to also offer a progressively-enhanced button right next to it to jump right to the color picker. Hash tag free web component idea.