Colorpeek: A Simple Way to See and Share CSS Colors

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.