blog

Standout Color Schemes That Work Well on the Web

Website Color Scheme

 

Sitting in a kindergarten art room, what is the one item you’ll be sure to find posted on the wall? A color wheel. I have fond memories of mixing paint with my fingers, taking a harsh red and softening it with white to create pink. I also have memories of frustration, with so many choices of colors to choose and such intricate rules to learn. Often, my experiments would end with a mushy brown.

 

Color theory does not come intuitively to many, and it’s a subject that can take years to conquer. Here’s a no-frills crash course, with proven standout color schemes, that will work to attract consumers to your site.

 

To start, choose a base color. Don’t just pull one out of thin air. Sit down, brainstorm and think about the following things your base color will communicate:

 

  • Target Audience – A party supply store and a funeral home likely won’t have the same base color. Viewers can perceive brazen purple as insensitive to those that just lost a loved one. Similarly, black and grey do not communicate it’s time to celebrate Aunt Petunia’s 65th birthday.
  • Previous Branding – Are you attached to your logo? While logos can always undergo alteration, that often comes with an extra design bill. In addition, if your brand is already known in the market, changing your logo can confuse consumers. For these reasons, it’s important to design around your established logo when considering your base color.
  • Competitors’ Color Scheme – Almost every minimalist design is black and white. While that aesthetic directly reflects the ideals of minimalism, at this point it’s overdone. An easy way to stand out is to pick a color scheme that deviates from the norm in your industry. You don’t want your website to be a carbon copy of your competition.
  • Priorities – Do you want your website design to have a clean look or do you want it drenched in your brand’s personality? The color immediately sets the tone for your brand.

 

These ideas are not meant to overwhelm, just to get the juices flowing. Below are have handpicked color schemes to help put these ideas into visuals:

 

Black, Red and White


Previously we discussed how black and white is clean and simple though a bit overdone. Instead, take this aesthetic a bit further by injecting a bold red into your design. The black and white on this site make information clear and easy to access, while the red highlights promotions and widget buttons. This color scheme allows the consumer to get lost in the details of their product offerings, while seamlessly locating shipping information or signing up for their newsletter.

 

Website Colors

 

We can also see how this color scheme communicates the brand message. It gives off a no-frills, serious vibe while also grabbing a bit of attention from the red.

 

Bright Blue, Red-Orange and White


Use your site to showcase how bright and bold can be cohesive when implemented properly. The blue of this site immediately attracts the viewer’s eye. Although, by keeping the main color palette to just a few colors, the mind does not become overwhelmed.

 

paypr

 

White is usually utilized to showcase blank space. Don’t be afraid to turn that idea upside down and use white as your text. It focuses the viewer’s attention on the text. Also, notice how simplifying your message by only including important information makes it easy to draw in consumers.

 

While blue and orange don’t usually coexist peacefully, the varying tones in the “start one-month free trial” widget connect the brand logo with the brazen blue background and the contrasting pop is eye-catching.

 

Earthy Green, Dark Blue and White


See how you can strongly convey your brand as natural and earth-focused by using a cool neutral palette. Immediately this site’s homepage invokes the feeling of being in a forest and they just so happen to be a festival brand.

 

grosse

 

Scrolling through their homepage the colors turn from green and blue to complimentary mustard yellows and lighter hues of blue. Again, we see a site with clean lettering that allows us to access festival information quickly and seamlessly.

 

Vibrant Purple, Pink and Blue


Try touting a design that’s corporate without feeling stuffy. The color combination of this site is fun and inviting, while balanced with a sleek design.

 

futuramo

 

The header text is an unexpected muted neon green. A header is a great place to add a pop color, without making the overall website scheme loud. The white text also appears striking due to the contrast with the purple, making for a cohesive though still very readable presentation.

 

Lemon Yellow, Mint Green and Dark Cyan


qed

 

A captivating color scheme might pair perfectly with your company. This site conveys yellow as a sunny color that immediately conveys optimism. The serene mint green and dark cyan balance out the mood to create a relaxed yet cheerful tone. The website is devoted to guiding you and your business team through your mental landscape, an arduous task, with a potentially rewarding outcome. This site is another shining example of how color can reinforce your brand message — we’re here to point you to a sunnier future.

 

Colors are deeply emotive and your website color scheme is imperative to catch the eye of a new consumer. While it can seem daunting to create a design that has the right tone, the above examples are great guides to show how differing colors can come together and strengthen your brand.

 

About Author

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Need Help with a Project?

Need Help with a Project Common Form