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:

Unable to display content. Adobe Flash is required.

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.

Tags: ,

4 Responses to “Chrome Developer Tools Colorpicker Concept”

  1. Lensco Says:

    Cool! So now where’s that download link for the extension? ;)

  2. Brian Says:

    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.

  3. Zach Says:

    Yes, this is exactly what I need at this moment.

  4. Brian Says:

    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.

Leave a Reply

Posting Code: Use html such as <pre lang='javascript'></pre>. See all supported languages.

*