How do I use the Chrome DevTools color picker tool instead of the vanilla Chrome color picker tool?

Question

Google Chrome offers its own color picker tool developers can use when we don't want to install/write our own color picker to our website. It's useful. It's pretty. It's easy. Just insert a small, lovely line of HTML5

<input type="color" />

and it works. It's almost great. It's almost perfect. It's almost the bees' knees. Almost.

It's got rgb. It's got hex. It's even got hsl. But the dang thing doesn't allow users to change opacity. Which, is a little dumb. I want users to change the opacity, dang it!

Right now, users to my website can change the opacity. I'm lazy, so it's not crazy or anything. Just added a little bit more to the code up top, and it works. It's just not what I want.

<input id="color" type="color"/><input id="opacity" type="number" min="0" max="1" />

Obviously, Google can write a color picker tool which can use rgba and hsla. They did, and it's (still) in the current version of Google Chrome (91.0.4472.77). It's available in Google Chrome's DevTools. It's awesome. It's fantastic.

I want that color picker.

Is there a way to use the awesome color picker on my website?

PS: I know I could write a color picker like that or install one I find on Github. But I don't want to do either of those two things because 1) I'm lazy and 2) Most of the ones I have tested look ugly and/or coded in such a way that I suddenly get a huge craving for pasta.

Answer 1

The place to look would be in the Chrome Dev Tools API. From what I can see, they just offer the Inspector as one monolithic unit which probably includes the color picker. But there is no hook for it independent of the Inspector that I see.

Perhaps if you added the package locally you could poke around and potentially find out how to use it. You can add the whole package as an npm dependency: npm install chrome-devtools-frontend or yarn add chrome-devtools-frontend.