MikeZetlow.com

How to design colors for your app with Adobe Illustrator—plus 3 free palettes

December 24th, 2018 | user experience | 54 minutes

In The magical Christmas colors every app needs I explained the need for green and red in your application.

You’ll also have to reconcile any brand colors you have.

And to look professional, you’ll want to have 9 shades of each color for use in the design. Refactoring UI has a great article on how shades are used in professional design.

This means you need to build a cohesive palette, 72 hue/shade combinations (including a grey) plus black and white.

I give a full tutorial above. But if you’re just looking for some great palettes for your app, I’ve built out 3 below and released them into the public domain. Click on the images to see them in full resolution.

transit how to design colors for your app with adobe illustrator plus 3 free palettes

Transit was my first palette designed with the method I describe in the video. It features a bold blue and red, and a bright yellow. I was focused on pleasing colors over balance, so some hues stand out more than others.

diamond how to design colors for your app with adobe illustrator plus 3 free palettes

Diamond is the palette I design in the video. Here, every 500-shade is between 2.0 and 5.0 contrast ratio. It’s a nice, even palette.

malt how to design colors for your app with adobe illustrator plus 3 free palettes

Malt is the final palette I made. I went with a balance of even contrast ratios and hues I liked. The grey is a little darker because the app I designed it for has a dark grey theme.

It’s a science and an art

In the end, you will make changes to your palette as the app grows in development. With the method outlined in the video above you can add hues or shades as needed and they should fit in nicely with the palette you have.

It’s ok if it’s not mathematically precise. Human eyes aren’t mathematically precise.

Finally, be sure to check your colors on calibrated screens across all sorts of devices. Different devices render color differently.

And if this all seems like too much work (it probably is), I’ll gladly make your palette for $65. 💵 Email me at mike@mikezetlow.com


user experience   9-minute read

September 16th, 2017

Popularity: 

user experience   4-minute read

December 22nd, 2018

Popularity: 

Enjoyed this post?

Enter your email address and I'll email you the next one.
I'll never give away your email address or try to sell you something.


Send me an email anytime and I'll get back to you: mike@mikezetlow.com