By Jeff Kline

Blog

7 Color Trends for Nonprofit Web Design in 2015

Thursday, September 3, 2015

Welcome to the "decade of vibrant color."

That's how web designers are defining today's digital environment. Through innovations in resolution and pixel density, our computer and phone monitors are now able to display richer, more vibrant colors. And with so many color options, quite a few trends have emerged in the past year.

Color plays an important role on your nonprofit website. It can evoke emotion, emphasize your brand and drive action. If you haven't given your website colors much thought in the past, now is the time to start.

In today’s post, we’ll discuss 7 exciting web color trends that are popping up in 2015, as well as examples of how nonprofits (and several for-profits) are using the trends.

1) Neon Colors 

Fluorescent colors are back from the eighties and bright as ever! Whether you use one of these glowing hues as your primary color or just as an accent, this is one sure way to give your website a modern look.

The Jersey Cape Vacation Guide site has an energizing color palette of neon green, yellow and blue.

 Neon Color Trend - Jersey Cape Vacation Guide 

 

2) Monochromatic Color

A monochromatic color palette consists of multiple shades of a single color. This can be a powerful way to emphasize your brand color. It's clean and minimalistic, yet bold and memorable.

The bold use of yellow on the SQRL app website demands your attention. It's hard to look away.

Monochromatic color trend - SQRL

 

3) Muted Color

By adding white to a vibrant hue, you can create mellow “muted” colors. These toned-down brights are great for flat design elements and retro-inspired designs. It’s an elegant way to use very rich colors on your nonprofit website.

The Fox Cities Chamber of Commerce website uses muted shades of cheery colors to maintain a professional look. 

Muted color trend - Fox Cities Chamber of Commerce website

 

4) High Contrast

In 2015, minimalistic designs have begun incorporating small pops of bright color. The reason this look is so fresh is because of the extreme contrast between the clean neutral backgrounds and the bright accent colors.

On the Vibrant website, the contrast of neon yellow against a completely grayscale design creates an interesting and engaging look.

High contrast color trend - Vibrant website

 

5) Super Gradients

If you've been following the flat design trend, you know that gradients have been ruled an outdated trend. But recently, designers have been breathing new life into the gradient by using ultra bright colors. Instead of colors that fade to gray, we're seeing gradients of pinks and purples, blues and greens, and yellows and oranges.

This new incarnation of the gradient been given the buzzword Super Gradient.

The website for LOUBSOL ski goggles uses a vibrant super gradient background.

super gradient trend - loubsol website

 

6) Color Overlays

Color overlays can be used on top of photos to soften or dramatize an image. And if an image doesn't fit very well with your website's color palette, a color overlay is the perfect solution. This is a great technique for creating a clean and cohesive web design.

On the website for Charles County Economic Development, a blue and green color overlay is applied to the image rotator.

Color Overlay - Charles County Economic Development website 

 

7) Color Hover States

To add an extra level of sophistication to your web design, you can add a color hover state to buttons and grid layouts. This is a really cool micro-interaction that helps to create a delightful user experience for visitors.

On the Visit Clarksville website, different colors are used in the hover state for each menu item.

color hover states

 


 

Popular Web Colors

Now that we've gone over the biggest color trends of the year, you're probably ready to start picking which colors you'll use on your awesome new nonprofit website! Here are three resources that provide you with the hex values of today's most popular web colors.

Google Material Design Guidelines: Color

Google recently introduced its Material Design Guidelines, which is essentially Google's own branding guide that they are sharing publicly on the web. There are some great design principles to be found, including an entire section of colors and  their hex codes, as well as how to use them effectively.

google material design colors

Another great tool that's based on Google's Material Design is www.materialpalette.com.

 

Awwwards: Trendy Web Color Palettes

This blog post by the Awwwards team showcases 20 trending website color palettes.

awwwards blog - trendy website color palettes

 

Flatuicolors.com

This webpage features 20 beautiful colors that work great with flat design.

flatuicolors

 


 

And a few more interesting reads:

The Future Of Color In Web design
This is a blog post by Jerry Cao, who is also the co-author of an ebook titled Flat Design & Colors...which is where they coined the phrase "decade of vibrant color."

Colour Trends In Web Design for 2015
This article on Creative Bloq provides a deeper look at the year's color trends.

 


 

Your turn

We hope you've enjoyed learning about the latest web color trends. (We certainly enjoyed writing about them!) 

Now it's your turn to share. Do you know of a nonprofit website that's using color in an interesting way? Post in the comments section below!

 

Download your website RFP template

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing