Tips for Picking a Great Color Scheme

The urge to derive meaning from color is one of the first things we learn. Look at any child’s coloring book and you will see the significance behind the chosen colors; green is meant for fresh, springtime grass; blue is reserved for cool, inviting water or a cloudless summer sky; reds and oranges are meant to convey the excitement of a carnival or amusement park.

As we gain experience, the context in which we understand color evolves, influenced by culture and trends. Without realizing it, we use color to harness a feeling and influence behavior.

One of the easiest ways to immediately initiate a relationship with consumers and set the tone for your website is by using a great color palette. Uniqueness on the clutter-filled web is a difficult task, and you have a very limited amount of time to make a lasting impression.

KISSmetrics recently reported that customers unknowingly assess and pass judgment on products within ninety seconds of viewing them, and “up to 90% of that assessment is based on color alone.” This is what makes color an invaluable UI element on your site.

Websites With Effective Color Schemes

color-01

Simplisafe’s Digital security guide is a great example of a site that uses color to directly compliment it’s subject matter. The bright, yellow title screen immediately communicates a sense of urgency, which directly aligns with the site’s emphasis on security. However, as the user scrolls down it also leverages a host of other pastel colors to sooth and calm the shock from the initial yellow – a perfect parallel to the content of their quiz.

color-02

Classic, refined and minimal, The New Yorker demonstrates the proper use of white space. White space is the absence of color in a portion of your site that allows the background to show through, whether your background is white or any other color. Used sparingly or in mass, it provides visual space that allows the reader to easily view a lot of information at once without over-stimulating the eye. This technique allows the page to feel less cluttered and confusing. Notice that the bright colors on this site are reserved for links to stories or subscriptions, leading the reader where the designer wants them to focus.

color-03

FlatIcons successfully utilizes a complimentary palette. With a strong blue theme through the design, the site also incorporates subtle reds-oranges and greens to offset the large focus on blue. However, even with such a dominant blue trend, FlatIcons does a great job of using color blocking and mix-matched shading to keep visual interest.

Tools for Picking a Better Color

color-04

When choosing a color scheme for your site, remember that readability is key. The most beautiful websites are only effective if visitors are able to quickly and easily process the information. To ensure text is legible against the background, choose contrasting colors that are also complementary, or opposite sides of the color wheel. Test out different backgrounds with nontraditional text colors on the Accessibility Color Wheel. This site lets you choose different combinations and gives you the green light when you’ve reached a winning contrast ratio.

color-05

A great place to get inspiration for color and find stock photos for your site is Shutterstock Spectrum. It provides a spectrum of color that you combine with a keyword search. For instance, you can type in forest for your subject and go through every color imaginable to find an image you like. Search for something traditional or enter radical combinations and let the tool surprise you.

color-06

Adobe Kuler is a user-friendly site that helps designers choose an eye-catching color palette. Just select the color rule you need to follow, anything from monochromatic to custom, and select a spot on the color wheel. It produces five colors that fall into the category you want and gives you the specific numbers needed to duplicate the look.

No matter who you are looking to attract to your site, it’s important to consider the color scheme and what it might mean to the viewer. Because cherry red may mean passion to you, but it might strike a completely different tone with your audience.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply