Eye Droppin’

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 

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.

Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T09:44:07+00:00) » Eye Droppin’. Retrieved from https://www.scien.cx/2021/12/09/eye-droppin/.
MLA
" » Eye Droppin’." Chris Coyier | Sciencx - Thursday December 9, 2021, https://www.scien.cx/2021/12/09/eye-droppin/
HARVARD
Chris Coyier | Sciencx Thursday December 9, 2021 » Eye Droppin’., viewed 2024-03-29T09:44:07+00:00,<https://www.scien.cx/2021/12/09/eye-droppin/>
VANCOUVER
Chris Coyier | Sciencx - » Eye Droppin’. [Internet]. [Accessed 2024-03-29T09:44:07+00:00]. Available from: https://www.scien.cx/2021/12/09/eye-droppin/
CHICAGO
" » Eye Droppin’." Chris Coyier | Sciencx - Accessed 2024-03-29T09:44:07+00:00. https://www.scien.cx/2021/12/09/eye-droppin/
IEEE
" » Eye Droppin’." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/12/09/eye-droppin/. [Accessed: 2024-03-29T09:44:07+00:00]
rf:citation
» Eye Droppin’ | Chris Coyier | Sciencx | https://www.scien.cx/2021/12/09/eye-droppin/ | 2024-03-29T09:44:07+00:00
https://github.com/addpipe/simple-recorderjs-demo