Feb 9, 2009
MailChimp’s Magic Color Picker
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.
Willy T. Koch
Kudos for a brilliant feature! I noticed this the last time I made a newsletter. There are so, oh-sooo many web applications that could learn from the fantastic GUI experience and workflow you have created on MailChimp.
Regards,
Willy T. Koch
Norway
02.11.2009
Tamara
Thanks for the info. I have used the color picker and it does help.
I love the Chimp:)
02.16.2009
Cam
Super Idea.
Any chance of extending it to grab a few styles from the CSS for use in the WYSIWYG editor?
Keep up the good work.
Cheers
02.16.2009
Rob
Hey Gang – this is a nice feature though I would really like to see an option to change the color picker to a full spectrum doo-dad like the one I currently use at colorpicker.com .
Can we add that to the wishlist?
02.20.2009
Net Toolbox Color Picker
This is a very nice piece! Will use it sometime and let you know!
My website contains a hexadecimal color picker, might be usefull when you quickly want to know a Hex code for a color ;)
08.16.2009
Lyndsay
It would be great if you could change the colors of the templates that you have though…. :(
06.02.2010
Ben MailChimp
Hi Lyndsay, some templates’ colors are editable, and some are not. In particular, any of the “designer” or “premium” templates are hand-coded and not built to change that much. You should, however, be able to download any template and custom code them to any color you want.
06.02.2010
ericnon
This is theoretically a great feature… I’m involved with a branded website & campaign that is carefully designed – including the colors. The magic color picker is not pulling the colors from our website css, and we don’t know what css values mail chimp is looking for. We can’t go into advanced mode for this project because non-coders will be changing the forms. We love the MailChimp designer’s ease of use for non-programmers, but we really need the ability to create our own color theme or choose specific colors on all templates.
01.26.2012
Ben MailChimp
Are *any* colors showing up under “your site colors”? Or are they they the wrong colors?
When you setup a MailChimp account, we ask you for some contact information. One of the things we ask for is your website. Did you use your website’s domain? Sometimes people put in their client’s, or a parent company, etc and we’ll end up pulling colors from there instead.
That’s all I can think of, so if that doesn’t lead you anywhere, you’ll need to contact our support team so they can log in to your account and troubleshoot.
01.26.2012