EyeDropper API Dropped

I had no idea this was coming but it’s pretty neat! Chrome has shipped the EyeDropper API in v95 (Canary, as I write).

🎨 Loving the new `EyeDropper` Web API:

“`js
await new EyeDropper().open();
// Returns the picked color, e.g.,
// { "sRGBHex": "#​ddd9e0" }
“`

Try it in Chrome 95. pic.twitter.com/990uyvOngp

— Thomas Steiner (@tomayac) September 1, 2021

EyeDropper API is now available on @googlechrome canary (95), super cool way to create a "color picker".

Have a look at the codepen for API and example :)https://t.co/Lo6afsnr4w

Video alt:
An example of EyeDropper api using the example#JavaScript #100DaysOfCode #FrontEnd pic.twitter.com/W2TopAE2eH

— Matan Borenkraout (@matanbobi) August 31, 2021

I like how it can grab a color from anywhere on the screen, not just within the browser window. Maybe Figma can make use of it, as I’ve been frustrated in the past how you can only snag colors from the Figma working area, not anywhere on the screen.

As a way to connect this to some other newfangled tech, check out this Pen from Andrew Walpole (in Chrome 95+):

It uses the EyeDropper API, but petite-vue is the app framework in use, and to my eyes, it is an awfully elegant expression of an interactive app. This new version of Vue is quite new meant to be used directly in the browser. I see it capturing some devs’ attention. Here are Dave Rupert’s thoughts as well as what Andrew Welch’s thinks about it.

---

The post EyeDropper API Dropped appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/eyedropper-api-dropped/