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:

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

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:
- Hex: colorpeek.com/#a899f2
- RGB with alpha: colorpeek.com/#rgba(221,78,133,0.5)
- Color keyword: colorpeek.com/#lightcoral
- Multiple colors (mixed formats): colorpeek.com/#hotpink,rgb(77,196,94),hsl(212,73,67)
- Some brand colors: colorpeek.com/#facebook,twitter,youtube
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 button. The
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.

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.
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.
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.
This is really nice- and yes, amazing logo! Thanks for sharing. Downloading the extension now.
This looks great ~ and incredibly useful, perfect timing for me, too :)
Will try it out right now – thank you ! :)
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.
The link to Marc Roman (conceived.nl) isn’t working.
It’s produce some great matching color. Very nice and helping
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.
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!
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!
This looks great! I’m going to install now and try it out. Super work, thanks! :)
What an amazing tool! Very very useful… Thanks for the great article too Tyler!
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.
Awesome, just used this for a recent mock up ;)
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.
awesome, great explanation in the video, immediately installed the Chrome extension. Thanks for developing this nifty tool!
Thank you! It’s amazing!
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.
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
Very nice!!! great tool