Update (3/4/15): This feature no longer exists, mostly because it was made obsolete by MailChimp’s new email designer.

—

I stumbled upon this post over at the 37signals blog about their new color picker. The very first comment (about magic) reminded me to write something about MailChimp’s little magic color picker.

When you build a new HTML email template in MailChimp, we visit your website, sniff around for CSS files, and we grab your website’s colors and fonts (we’ll even search for logo files). Then, whenever you go to specify your colors in MailChimp, our color palettes look like this:

Notice the extra row of colors at the bottom. Right now, you’re probably wondering, "How the heck does MailChimp know where my website is?"

You told us where your website was, back when you setup your email list:

It’s one of those hidden little touches inside MailChimp that can save you a ton of time (pulled from the MailChimp Labs).   It’s almost never perfect. Much depends on how you code your CSS files, and whether or not you name stuff on your website consistently (i.e., your logo has "logo" or "header" or "masthead" etc., in the filename).

Still though. Nifty little time saver.

But wait, there’s more.

We’ve also got a handy CSS color palette picker on the right side of the page, whenever you’re designing your HTML emails. If you don’t have a set of colors yet, or if you don’t want to use the colors that we pulled from your site, try one of these color palettes.

When you select one, our magic color picker will update again, showing you the colors from that palette:

That comes in handy if you want to specify colors for your headline titles or hyperlinks, and you want them to be consistent with your color palette.

On the topic of color palettes…

There are lots of different color palettes in MailChimp, under several different categories.

Like "General" and "College sports teams."

Sometimes, we visit MailChimp customers, and then feature them in the color palettes.

For example, we got a bunch of caramels from Route29.com, and the sugar highs that resulted from that compelled us to create this color palette:

How New Colors Get Added:

It’s fairly easy for us to add new colors, too.

In our internal dashboard, there’s a page where MailChimp staff can add new palettes.

It looks like this:

You’ll notice that it’s just a bunch of text fields, with no way of specifying "background color, header color, footer, etc." That would frankly be a p.i.t.a. for our staff to decide.

Instead, we simply enter 5 hex values and hit submit.

Then, MailChimp will use color theory basics to pick which color should be your background, which should be your foreground, which should be your text, footer, etc. How does MailChimp do this?

Ebony and Ivory – Programmatic Design Harmony

It was amazing to see the research and collaboration our engineers and designers did for this project. Programmers learning about aesthetics (grids, visual weight, balance). Designers learning algorithms (and finally using those Art degrees!).  Programmers analyzing color wheels (and old Zeldman books!).  Scanning CSS files all over the internets for naming conventions. Testing results in hundreds of customers’ websites. The research they did for this is worthy of a separate blog post. It’s on my ever growing "to-blog" list.

Anyway that’s what goes on in the MailChimp Labs.

So that hopefully, we can save our users a few minutes of HEX hunting.