How to Create Color Palettes

Here are several ways to create a color palette that looks professional for web sites and interfaces. It's not as easy as you might think.

It's relatively easy to start with a favorite color, maybe add a second color, but the third color and beyond often don't work with your initial colors. Here are articles and links to color generator tools to help pick a color palette that is effective and looks beautiful. The articles range from comprehensive — talking about color theory, terminology, and different types of color palettes — to workaday ideas how to create color palettes quickly.

Plus a few of the color generators linked at the bottom of this article include galleries of color palettes created and shared by others. So be sure to click around Kuler and other color generators.

Color Theory for Designers

This set of articles begins with a basic description of color theory then moves on to describe concepts, terminology, and a way to create professional looking color palettes.
http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

Practical Approach To Choosing Website Color Scheme

This article suggests starting with an existing color scheme, usually a brand image (think McDonalds or Pepsi). But the color scheme could come from a political party or country (think red, white, and blue for the US, or red and white for Canada), as well as content. For example, a web site or software application geared towards parents with babies or babies might use basic saturated (wet) colors. Think shades of blue, pink, with maybe yellows and reds. Once you have a basic set of 2-3 colors, then use gradients (dark blue to light blue, for example) to add the last colors to your palette.
http://www.hongkiat.com/blog/website-color-scheme/

3 Time-Tested Ways To Pick The Perfect Website Color Combination

Another way to create a color palette is to start from scratch with one color used 60% of the time, your primary color, a second contrast color used 30% of the time, and an accent color used 10% of the time. If you don't know, accent colors are used to draw the eye to the most important part(s) of any content, for example, headlines or signup forms or buttons. In addition, this article suggests pulling a color palette from an image or photograph. Or you can use the emotional qualities of color to start your color palette.
http://blog.crazyegg.com/2011/12/30/pick-website-color-combination/
http://blog.crazyegg.com/2012/07/11/website-color-palettes/

Selecting Your Own Color Scheme

While the other articles provide a framework to pick a color scheme, this free tutorial leads you step by step through the process. It begins with a discussion of how color impacts your projects then talks about how to pick a color scheme, how many colors to choose for a color palette, and how to select an image to use for color extraction.
http://webdesign.tutsplus.com/articles/design-theory/selecting-your-own-color-scheme/

True Colors: What Your Brand Colors Say About Your Business? (Infographic)

This infographic provides lots of food for thought about how colors and brands work together to create effects.
http://www.columnfivemedia.com/work-items/infographic-true-colors-what-your-brand-colors-say-about-your-business

The Learn More section below includes links to a number of online and offline tools to help create color palettes that work well.

Learn More

Color Theory for Designers

http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

Practical Approach to Creating a Color Scheme

http://www.hongkiat.com/blog/website-color-scheme/

3 Time-Tested Ways To Pick The Perfect Website Color Combination

http://blog.crazyegg.com/2011/12/30/pick-website-color-combination/
http://blog.crazyegg.com/2012/07/11/website-color-palettes/

Selecting Your Own Color Scheme

http://webdesign.tutsplus.com/articles/design-theory/selecting-your-own-color-scheme/

True Colors: What Your Brand Colors Say About Your Business? (Infographic)

http://www.columnfivemedia.com/work-items/infographic-true-colors-what-your-brand-colors-say-about-your-business

Color Generators

https://kuler.adobe.com/create/color-wheel/
http://colorschemer.com/
http://www.colourlovers.com/photocopa
http://colorschemedesigner.com/
http://mobile.colorotate.org/

Author

  • Tim Slavin

    Tim is an award-winning writer and technologist who enjoys teaching tech to non-technical people. He has many years experience with web sites and applications in business, technical, and creative roles. He and his wife have two kids, now teenagers, who are mad about video games.

Also In The February 2014 Issue

Summer 2014 Code and Technology Camps

It may be the middle of winter in the Northern Hemisphere but now might be a great time to start thinking about technology summer camps if you're a kid or have kids.

An Interview with Susan Kare

You’ve looked at and used Susan Kare’s work, or work inspired by hers, every time you use a computer. The garbage can icon and other taken for granted icons can be traced back to Kare’s icons on the first Macintosh computers.

User Experience Designers

User experience design touches on all the ways people interact with software or hardware. This includes how people use technology, the hardware design, and documentation.

Database Design

How you store and retrieve data in a relational or NoSQL database depends on how well you design the database structure.

How to Create Color Palettes

Here are several ways to create a color palette that looks professional for web sites and interfaces. It's not as easy as you might think.

Fizz-Buzz and Other Odd Questions

There are at least two types of questions coders might face in job interviews, fizz-buzz and puzzle questions. Both can be learned ahead of time.

Interface Design Basics

Interfaces are the primary way people work with computers and websites. Here are concepts used to design human interactions with computers.

A Short History of Lorem Ipsum

No discussion of design is complete without the history of lorem ipsum. It's more than placeholder text you stuff into a visual design.

docstrings

Docstrings are special comments embedded in software code that survive compiling the code, for example, help text.

Database Normalization

Relational databases need to have their data organized a certain way.

What is Information Architecture?

When you think of architecture, you think buildings not information. However, information also needs careful design and structure in computing.

JavaScript

JavaScript is a programming language and an historical artifact from the early internet conflicts between Netscape, Microsoft, and Sun for open standards.

News Wire Stories for February 2014

Interesting stories about computer science, software programming, and technology for the months of December 2013 and January 2014. More stories can be found at the News Wire link at the top of of this site.

How to Build a (Simple) Website

Here is the simplest possible way to learn how to build a website, as well as how web pages and websites work.

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.

Learn More Links for February 2014

Links from the bottom of all the February 2014 articles, collected in one place for you to print, share, or bookmark.

Interested but not ready to subscribe? Sign-up for our free monthly email newsletter with curated site content and a new issue email announcement that we send every two months.

No, thanks!