3 Tips for Choosing Website Colors from Raving Software

By September 28, 2017 January 16th, 2019 Design Tips

Three tips to consider when picking your website's color scheme

This is part of our “Design Tips for Clients” series. Whether you’re one of our clients or you’re looking to learn about design, we’ll give you an introduction to color, typography, industry jargon and much more.

TIP 1: USE THE 60-30-10 RULE AS A GUIDE WHEN CHOOSING COLORS

Using the 60-30-10 rule, you can set different roles for different colors. For example, your dominant color would be used the most while your accent color would be used sparingly.

The 60-30-10 rule says that your primary color will be used about 60 percent throughout your website. Your secondary color will be used about 30 percent throughout the design, and your tertiary color — also called the accent color — will be used about 10 percent of the time.

While this rule is specific to a three-color scheme and most websites actually have about five to seven colors, it can still be a helpful guide. If you have a five-color scheme, you could break the percentages down to 35 percent, 20 percent, 20 percent, 15 percent, and 10 percent.

Your primary color will be used the most throughout the site, so you want it to be something that works well with your other colors but is also easy to look at. For example, a lot of neon pink would be very hard for your visitors to look at and they would probably leave your website.

Meanwhile, you want to set aside an accent color to use as an indicator for a call-to-action element. Call-to-action elements grab a visitor’s attention and tell them to do something, such as “buy now” or “sign up here.” They drive your visitors to complete a goal, so you want them to be noticeable.

When choosing colors for your website, it’s important to consider how they work together, how much contrast they provide, and how often each color is used in the design.

TIP 2: HAVE A CALL-TO-ACTION COLOR AND ONLY USE IT FOR THAT PURPOSE

Use your accent color as a call to action, or to indicate an action you want a page visitor to take.

In Tip 1, we mentioned calls-to-action and how they drive users to complete tasks on your website, such as a purchase. Color is one of the ways to indicate something is a call-to-action elment.

By using a specific color, you “train” visitors that there is something you want them to do. If you use this color for too many elements, that message and significance of the accent color are lost.The color used for a call-to-action should stand out from the content around it.

In our example, we used a dark pink to call attention to “Contact Us” as opposed to the blue of the other calls-to-action.

TIP 3: AVOID USING RED AS A PRIMARY COLOR IN YOUR COLOR SCHEME

Be careful using red throughout your design. It can cause legibility issues.
Red is a tricky color in design. It is typically used to alert online users to errors or possible dangers on a site. So unless you’re shopping online and see a sales price listed in red, you’ll usually have a negative perception when you see a lot of red on a web page.

Red also presents issues with accessibility. It’s difficult for most people to read a lot of red text on any color background, or a large amount of text on a red background. Then there are users with color blindness who may not be able to see red. This could make your site inaccessible for them if the red affects too much of the legibility and appearance of your content. If your website is inaccessible, then it’s not helping your business.

We recommend using red sparingly in your design and including other appearance indicators, such as underlines or button affects, if it is used as your call-to-action color.

 


Is there a design topic you want to know more about? Let us know in the comments or contact us through email.

Keep up with all the latest developments and projects from Raving Software on Facebook, Twitter, LinkedIn, and Pinterest.