Grow your CSS skills. Land your dream job.

Colorpeek: A Simple Way to See and Share CSS Colors

Published by Chris Coyier

The following is a guest post by Tyler Sticka Tyler created a tool called Colorpeek. In this article, he'll introduce you to what the web app does and why, and then how the Chrome Extension works to extend that. Then tomorrow, stay tuned, as Tyler will show us how he built the Chrome Extension.

A while back I found myself engaged in a monotonous task most designers will relate to. Having carefully selected a color palette in whatever design application I favored that day, it was time to share those color values with my collaborators.

I could have dumped a bunch of hex triplets into an email and called it good. But until we all start cultivating an encyclopedic knowledge of the RGB color model, it's probably best to include some sort of image as well.

So I dutifully hauled out Photoshop and made something like this for what felt like the thousandth time:


An example using some CSS-Tricks colors. (I am not above pandering.)

That's better. But it's also impossible to copy text from, and tedious to update. Yet we continue to manually create these simple palette mockups over and over.

Top researchers in the field of color science estimate that roughly three zillion new color apps debut each and every year. [citation needed] A lot of them are really cool. But the rest are pretty complicated, and none do exactly what I want.

So in my spare time, I made a web app called Colorpeek.

Meet Colorpeek


My buddy Marc Roman designed the logo. Nifty, huh?

Colorpeek helps you quickly see and share colors in whatever CSS notation you're already using. It supports hex, RGB(a), HSL(a), named colors and even some non-standard brand colors. They all get displayed in a simple, responsive layout.

Some examples:

If you're more of a visual thinker and your browser supports drag and drop and the file API, you can add colors by dragging images right into Colorpeek. It'll grab the most prominent colors thanks to Lokesh Dhakar's magical Color Thief script.

Once you have a Colorpeek palette, you can set its notation by tapping or clicking the cog button. The share button lets you share the page or "export" to a handful of formats (plain text, JSON, LESS, SCSS or Stylus).

Problem Solved! (Almost…)

I launched Colorpeek in May, but soon noticed a problem. Colorpeek made sharing colors easier, but it didn't do much for receiving them. I still saw mail like this:

Here are the colors we're using:

Blue: #2b95d2
Green: #2cc96b
Red: #ed4d55
Dark Blue: #20303c

(Apologies to the unnamed real-life friend I'm passive-aggressively shaming in public for this message. You should have known better.)

My first instinct was to use Cerebro to telepathically insure Colorpeek's ubiquity in the minds of all present and future collaborators. My lack of telepathic ability coupled with the devastating realization that the X-Men are fictional quickly derailed those plans.

So I made a Chrome extension instead.


Whee!

Once installed, you can:

  • Create palettes from text selections (like the previous email example);
  • See every CSS color on a webpage;
  • and grab the most prominent colors from images embedded in a page.

The extension is free and available now in the Chrome Web Store. Here's a quick video demo if you'd like to see it in action:

What's Next

I made Colorpeek for myself. I kept its scope small so I could use it quickly. In that sense, the project is "complete." But I'm a tinkerer with no shortage of ideas. If the audience is there, I'd love to make color sharing and collaboration even easier.

You can follow @Colorpeek on Twitter if you'd like to know what the future holds.

Comments

  1. Permalink to comment#

    Thanks Tyler,

    Very classy web app and Chrome extension, not to mention useful too. I’m going to try and incorporate it into my workflow.

    Looking forward to tomorrow’s article on how you built the Chrome extension.

  2. What a great product. This should save everyone a huge amount of time. I have to say I would have preferred it as a Firefox extension as that’s my chosen dev environment, I just prefer Firebug, but I’ll be using that a lot I think. Good work Tyler. Great logo too.

  3. Permalink to comment#

    This is really nice- and yes, amazing logo! Thanks for sharing. Downloading the extension now.

  4. Permalink to comment#

    This looks great ~ and incredibly useful, perfect timing for me, too :)

    Will try it out right now – thank you ! :)

  5. Identifying all the colors on the page is pretty neat. I’ve been using the way nerdier Chrome Dev tools snippit AllColors.js to do something similar http://bgrins.github.io/devtools-snippets/

    I’ve been using http://colorto.me to share color palettes with other. That site even offers a way to download a simple image swatch of the colors that designers can bring into Illustrator or Photoshop.

  6. Kevan
    Permalink to comment#

    The link to Marc Roman (conceived.nl) isn’t working.

  7. It’s produce some great matching color. Very nice and helping

  8. Permalink to comment#

    To be very true, I loved your concept of sharing color shades, great web app. Will check out your color base on my next design, and I am sure it will be really helpful.
    Thanks and Cheers Tyler.

  9. Ramon
    Permalink to comment#

    Nice tool! I like it :) Thank you very much for creating this! I Hope you keep developing this handy tool and… you are awesome for making this for free!

  10. Nice tool. I’ll add it to my Chrome and see how it works. So far I was using ColorZilla, which was doing a good job. Your tool is much more, I think I’ll start using it. Thank you!

  11. Permalink to comment#

    This looks great! I’m going to install now and try it out. Super work, thanks! :)

  12. Ben
    Permalink to comment#

    What an amazing tool! Very very useful… Thanks for the great article too Tyler!

  13. Vitaly
    Permalink to comment#

    Seems like it is not 100% accurate. Not all colors are picked. Have performed an experiment with the home page of the css-tricks.com web-site. For red is says #FF0000, although it is not #FF0000 at all, and there are many other variations of red on the page (titles of certain text boxes, red in ads: WUFOO, Foxycart). Or maybe this tool is supposed to do a different thing that is not so obvious for me.

    BTW, I like the concept. Would be great if it could pick single colors like the Illustrator’s Eyedropper Tool. Maybe there are alternative tools but I usually create a screenshot of an area with the desired color, place the image into an Illustrator document, create any shape, pick the Eyedropper tool and assign that color to the shape. Thought your tool performs the same thing outside of Illustrator.

  14. Awesome, just used this for a recent mock up ;)

  15. Andrew
    Permalink to comment#

    The Topstyle editor, which is unfortunately Windows only, has a great feature that no other editor i’ve seen has. For an open CSS file you can enable a window that lists every colour in use in the file along with it’s swatch. For the problem in this blog post, you could just code a basic css file, listing out all the colours, and it’d build the swatches. You could then pass the file to a developer and they could use it as a starting point.

    It also lists the number and selector for occurrences of each colour, so it’s also useful when you inherit a messy site. A developer might have poorly sampled similar colours, so you can consolidate, reducing the amount of colours very easily.

    It also functions as an anchor list to jump to specific selectors, and is great for when a client asks for the colour scheme to be changed, more so when the site is complex. Shopping carts for instance, tend to have heaps of colours defined but you’d be hard pressed to even find them in the actual site (too many pages/routes through the site), if you were unfamiliar with it.

  16. Permalink to comment#

    awesome, great explanation in the video, immediately installed the Chrome extension. Thanks for developing this nifty tool!

  17. Nadya
    Permalink to comment#

    Thank you! It’s amazing!

  18. Alex
    Permalink to comment#

    Great tool! The only thing I always want to do is to click on the color and get a color picker. Yes, I can do it in dev tools, but for me It would be a nice feature.

  19. Magnus Eide
    Permalink to comment#

    Great webapp. I’m definately gonna be using this.

    Future request: Possibility to comment on colors. “This is borders”, “This is tabs”, “main link color” “hover link color” etc. That way we can use this as a full reference sheet for websites.

    Dragg and drop ordering of colors.

    Also possibly savable palettes (for logged in users), wiht the possibility to name the palette (and possibly urls ) eg.: http://colorpeek.com/#myspecialsideprojectaleternatecolorshceme

  20. Marco
    Permalink to comment#

    Very nice!!! great tool

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".