× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

How to Pick the Best Color Palette for Your Project (with 5 Color Resources)

Skillcrush_How-to-Pick-the-Best-Color-Palette

There’s no doubt that color plays one of the most important roles in how your brand is perceived by your audience. I could talk about color theory and color psychology until I turned blue-in-the-face, but what’s the quickest and easiest way to start exploring color palettes?

One useful tip is to start with a photo or illustration that really speaks to your brand. Starting with a photo is a great way to pull a palette of colors without having to rack your brain. If you’re a Photoshop user, simply drag your photo into the program, create a series of shapes and use the color picker to define their color. (Also, for those of you that have a Mac, you have a DigitalColor Meter built right in that will give you hex colors!) Here’s an example of a quick color palette created from a photo in Photoshop (this took literally 5 minutes):

Quick Color Palette

So how can you create a palette without expensive, fancy programs? Here are some FREE resources that create awesome color palettes:

Color Palette Resources

1. Color Scheme Designer

Color Scheme Designer.com

This tool is easy to use, which means that you can create multiple palettes quickly. Starting with one color, Color Scheme Designer will allow you to create anything from a Monochromatic color palette to a Tetrad in one click. If you’re unfamiliar with any of these terms, you can click on “Help” and turn on tool-tips that will display an explanation of each part of the interface. This tool not only provides you with a color palette, but also a mock-up of a sample web page in a light and dark versions of your palette — a feature to be taken with a grain of salt, but it’s nice to see everything working together.

2. Colour Lovers

Colour Lovers.com

This site is a bit more analog in its use, but offers a lot of visual inspiration. Colour Lovers provides a collection of curated colors and color palettes, as well as patterns submitted by other users. Each color is labeled with its hex value for easy use in your own CSS, or even to bring into Photoshop for your mock-ups. This site is SUPER VISUAL and is very much community based, which allows you to join and submit your own color creations. If you are struggling with creating your own palette, this site is great for sparking inspiration.

3. Adobe Kuler

Adobe Kuler.com

This tool has a really clean, easy-to-use interface with a variety of features. Adobe Kuler allows you to search color schemes by color, concept, hex values tags and more. You can also explore themes and most popular palettes to spark some inspiration, or generate your own palette from scratch.  Creating a custom palette begins with selecting one color (in a similar way to Color Scheme Designer), or you can even upload your own image to eye-drop a palette from! This tool is a bit like a combination of both Color Scheme Designer and Colour Lovers, offering visual direction while functioning as a robust custom-color-making-machine.

4. The Day’s Color

The Day's Color.com

Sometimes it’s nice to just look at color inspiration that someone else has curated to get inspired. The Day’s Color is a simple site created by Nigel Evan Dennis inspired by things that surround him daily – whether that’s a song by Tame Impala or HBO’s True Detective, Nigel finds colors everywhere. Luckily for us, he’s put together a beautiful site to inspire us all.

5. 0 to 255

0 to 255.com

Even when you get the perfect palette down, once you start designing you may notice that certain colors might be too dark or too light to work within your project. Color palettes don’t have to be so static, there should be some wiggle-room for tints or shades of your colors. You might want to have a bright blue button with darker blue text, but maybe the dark blue isn’t in your set palette. 0 to 255 is a great resource for finding the right tints and shades. Just enter in your main color and the site will generate a spectrum of lights-to-darks of your specific hue. You’ll never have to worry again that the color you chose is greener or purpler than your desired tone.

Keep it Simple

There’s no need to have a hundred different colors for your site. Try to pick one really strong, recognizable color and work from there. There are plenty of brands who have a pretty neutral palette with a single pop of color. Your main goal is to make your brand recognizable, so when in doubt: Less is More. 

Want to learn and explore a bit more about color and color theory? Sign up for the Web Designer Blueprint or the Skillcrush 100 class.

Your email address will not be published.

3 comments

  1. d.evyn Replied

    Though it’s not the most HR appropriate, An entertaining website for color is bada55.io if it’s stil up and running. It has l33t speak hex colors and quite entertaining.

  2. Kate Arpin Replied

    You forgot Pictaculous! I love it because you can upload a photo and it automatically generates a recommended palette based on the photo, which makes it a great starting point (and faster than waiting for Photoshop to boot up)

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.