Chrome Developer Tools Colorpicker Concept
I always thought it would be awesome to have a colorpicker in browser developer tools. Who wants to guess at hex colors or open up a separate program just to get a color code? Apparently I'm not the only one who thinks a colorpicker inside the developer toolbar would be nice.
So, I did some reading on how to contribute to developer tools and integrated my spectrum colorpicker into the color swatch button.
Check out the demo in this video:
Of course, I don't want to get rid of the swatch button (it usually rotates through color formats if you click it which can be useful), so the UI could use some work. Still, this functionality makes picking colors a lot easier, I think.
October 4th, 2011 at 12:26 am
Cool! So now where’s that download link for the extension? ;)
October 4th, 2011 at 6:15 am
I’m not really sure the best way to share this… It looks like with an extension I could make a new panel on the sidebar or a new tab, but I kind of like it right there with all the other styles. It was relatively easy to set up with the devtools source, but that obviously isn’t a good way to share it. I’ll look into it a little more and see if I can package something up.
October 5th, 2011 at 6:25 pm
Yes, this is exactly what I need at this moment.
November 23rd, 2011 at 1:21 pm
Lensco,
You can track the progress on this case here: https://bugs.webkit.org/show_bug.cgi?id=71262. I have a patch working that is going through the normal process to make it into developer tools.
February 25th, 2012 at 10:41 am
This is now live in development builds in Chrome. Keep and eye out for it as your browser updates!
February 25th, 2012 at 10:56 am
[…] few months ago, I posted about my developer tools concept colorpicker implementation. After that, I was contacted on the devtools mailing list and got some initial feedback. I pulled […]
April 2nd, 2012 at 11:21 am
[…] It was adopted by the WebKit project for use in the Web Inspector, which was on a few people’s wishlists, including my own. […]
April 19th, 2012 at 7:18 pm
[…] (aka Chrome DevTools for brevity). For some backstory on how this got implemented, check out my initial colorpicker concept video or the description of the […]
February 3rd, 2015 at 10:18 pm
Nice posting. This article has been really useful to me. Thanks
February 5th, 2015 at 12:15 am
This site is really fantastic – thanks for sharing.
February 7th, 2015 at 2:06 am
I’m so glad I found your web site.
February 12th, 2015 at 12:20 am
You have done a useful article. Keep up this forever.
February 12th, 2015 at 11:57 pm
Very impressive.Keep up the good work.
February 13th, 2015 at 3:44 am
I tell all my friends about your site.
February 20th, 2015 at 4:07 am
Legend! I really enjoyed reading this post. Keep it coming!
February 23rd, 2015 at 2:07 am
Very informative. Just keep doing.