Menu close icon Menu open icon
X
Modern Website Color Schemes cover

Modern Website Color Schemes and When To Use Them

Web Design

09 Aug, 2022

Our 8 Favorite Modern Website Color Schemes and When To Use Them

“We can just stick with the old colors. It doesn’t make a difference, right?”

Sure! Color’s just a pretentious little add-on. It’s only 38% of visitors that stop engaging with a website if the content is unattractive.

Modern website color schemes matter much more than you think.

Colors tell your visitors a lot about your site, its message, and its purpose. The right colors also engage your visitors visually, not only looking more attractive but decreasing bounce rates.

Modern eyes need modern website color schemes. That old color scheme doesn’t hit the spot anymore, and a fresh coat of paint might be just what you need.

We’ve got the low-down on modern website color schemes, including the different types, our favorite combinations, typographies, and when it’s best to use them.

If you’d like to jump straight to the meat of the blog, skip beyond the basics and right to the different types.

Why Are Modern Website Color Schemes Important?

Color psychology shows us that a website’s color scheme does so much more than just “look nice”.

Human brains react to colors subliminally. We don’t even realize how much they impact our minds and decisions.

Even the color choices on a granola bar send subconscious cues. A brown, white, and green box projects “healthy and grown-up”. A bright royal blue and red box is “for kiddos”.

It’s the same for websites.

Visitors don’t even realize how much they’re swayed by tints and tones alone. For example, one company achieved an increase of 11% in clicks to the checkout area of their website just by testing color variations.

So when 39% of consumers value color as the most important visual aspect of a company website – those are just the ones that consciously realize it.

The difference between a good color scheme and a bad one can be pretty striking, and we think you’ll agree.

Good example – Sakura of America:

A bad example is, ironically, the Yale School of Art:

Beyond just aesthetics, colors are also a part of the Web Content Accessibility Guidelines (WCAG), which is the benchmark for web accessibility.

People with varying color perceptions and color deficiencies won’t view a website the same as others. It’s critical to choose the right colors to ensure that every visitor to your website can navigate and enjoy it.

And you’ll be rewarded for doing so. How accessible your website is color-wise even affects your site’s ranking on search engines.

You can test your website’s color compliance with certain online tools that check for contrast.

This is just a visual way to improve accessibility. To tick every box, read our blog on how to fix website accessibility issues.

What Types of Color Schemes Work For Websites?

Color scheme types are how colors are put together, rather than the specific colors used.

Like having contrasting hues, or several gradients of the same hue.

Color scheme types heavily rely on the color wheel:

Here’s a quick summary:

Color scheme typeDescription
MonochromaticColors that are tints and tones derived from a single source hue
ComplementaryColors opposite each other on the color wheel
AnalogousColors alongside each other on the color wheel
TriadicColors evenly spaced apart on the color wheel
TetradicPairs of complementary colors

Here they are in-depth.

Monochromatic

This color scheme uses various tints, tones, and shades but all from the same hue.

It could be any base color, but every color on the website will be a variation of this starter shade. A simple example would be red, dark red, and pink.

Here’s a concrete example via Belleview Consulting’s website:

Monochromatic Website Color Schemes on Belleview homepage

You can see that it has a diverse range of colors, but they’re all variations of the same grayish blue. Ranging from dark navy to pastel azure. 🤓

Monochromatic color combinations tie everything together with the same hue, but adding black or white to change the shade adds depth. It provides intriguing and engaging contrast, which enables you to draw the eye to certain areas of your site.

Complementary

Complementary colors are colors that complement each other well.

In other news, sugar is sweet.

A better explanation is that complementary colors are opposite each other on the color wheel. Such as:

  1. Blue and orange
  2. Red and green
  3. Purple and yellow

When used in the right way, complementary colors look striking together.

For example, Avelar Construction’s homepage:

Complementary Website Color Schemes on Avelar homepage

Complementary colors create a high contrast that is immediately noticeable to the human eye. The scientific reason behind this is a little complicated, but a quick description is that complementary colors are perceived by different parts of your eye.

They play off each other’s intensity. Using a combination of dark orange and blue, like Avelar Construction here, excites two different parts of your eye.

A classic example of “opposites attract”.

Analogous

Analogous design takes colors that are right alongside each other on the color wheel.

The exact contradiction of complementary colors, as analogous relies on similar colors looking great together.

Blue, green, and turquoise. Red, pink, and orange.

The result is a low-key, minimalistic, simple color scheme.

Here’s an example from produce and nuts provider, Nutsite:

Modern Website Color Schemes on Nutsite website

Dark green, gold, and brown are all similar earthy tones, which Nutsite uses to give off a natural, homey feeling.

Analogous colors are pleasing because they often occur in nature. Red, pink, and orange are found in sunsets. Green and blue are in ponds and lakes.

Triadic

The triadic color scheme uses colors that are evenly spaced across the color wheel.

The two most common versions of triadic coloring are:

  1. The primary colors: red, blue, and yellow
  2. The secondary colors: orange, purple, and green

Although many more can be made by utilizing tertiary colors like red-violet, yellow-orange, and blue-green.

Integrated Healthcare Association offers a subtle example of triadic coloring:

Triadic Website Color Schemes on IHA website

Triadic color combinations don’t offer the same amount of contrast that complementary ones do, but they still catch the eye with the variety of hues used.

This slight lack of contrast also makes triadic colors more balanced.

It’s a combination of compatibility and uniqueness.

Tetradic

Tetradic color schemes are simply two pairs of complementary colors.

An example would be a color scheme of red, green, blue, and orange. Or blue, orange, bright yellow, and purple.

They can be used equally, but a common way to execute tetradic color is with one of the four chosen as a dominant color so as not to overwhelm the eye.

Ajna is an excellent example of a tetradic color scheme:

Showcasing Tetradic Modern Website Color Schemes on Ajna website

With a combination of the complementary colors blue/orange and pink/green, Ajna immediately grabs the eye and doesn’t let go.

It gives the appearance of oversaturation. It’s bold and striking.

Tetradic coloring stimulates your vision from every side of the color wheel – exciting, engaging, and vibrant.

Our 8 Favorite Modern Website Color Schemes + When They Work

Alright, so on to the colors themselves.

These schemes change over time, going in and out of fashion. It’s important to be on the pulse of what’s trending, maybe even pushing a few boundaries.

A recent study showed that 22% of visitors look for eye-catching colors, while 21% will leave a site due to outlandish colors. So to a modern audience, balance is crucial.

What is the most popular color scheme for a website?

Your color scheme will depend on the industry, your company’s goals and brand identity, and the vibe you’re going for.

Let’s dive in.

1. Bold and earthy

Contrasting bold colors with black offers a striking (but safe) combination.

Black tied together with muted shades of orange and green, with splashes of red and blue, engages the viewer while simultaneously not going over the top.

This is used perfectly by Oakland Thrives:

Modern Website Color Schemes on Oakland Thrive's homepage

An emphasis on black and orange softens the overall look, but the dashes of color add vibrancy.

Modern Website Color Schemes on Oakland Thrives website

The main colors used are:

  • #dfb854 Ronchi
  • #0c0c0c Smokey Black
  • #acb924 Bahia
  • #1292d2 Pacific Blue
  • #b01122 Venetian Red

This color scheme conjures up a strong but welcoming feeling that’s perfect for non-profits and charities.

Bold and earthy color schemes also look great for food-related websites, like restaurants and catering businesses.

Although this combination might be a bit too bold and dark for some, such as healthcare and financial websites.

2. Light and bright

Light, bright, and colorful. This color scheme immediately conveys happiness and light-heartedness.

This is usually done with bright primary colors offset with large amounts of white.

Hello, Wonderful uses this scheme and uses it well. A muted color scheme that’s perfect for family-oriented sites:

Modern Website Color Schemes in latest posts section of Hello Wonderful

Light and bright color schemes allow for vibrant use of color while keeping things soft by utilizing whitespace in abundance.

Modern Website Color Schemes on Hello Wonderful

The key colors used are:

  • #ff73b8 Hot Pink
  • #6bb0dd Malibu
  • #ffb997 Mandys Pink
  • #f5f5f5 Whitesmoke
  • #72e6b0 Medium Aquamarine

This type of color scheme delights the eyes with vibrant, exciting colors that aren’t overwhelming. Adding additional whitespace between the colors not only calms the colors down but also makes what colors are there brighter in contrast.

Light and bright color schemes are perfect for family-oriented sites, and most eCommerce sites, such as clothing retailers.

More buttoned-up industries may want to steer away from this one.

3. Energetic and creative

Looking into modern website color schemes that radiate energy?

Energetic and creative colors excite the visitor and send a tingle up their spines.

Make Please’s beautiful website pulses with energy:

Modern Website Color Schemes on Makeplease website

Bold and bright complementary colors, mainly purple and yellow, with dashes of earthy green.

The main colors used are:

  • #fbdf4e Energy Yellow
  • #974dc0 Deep Lilac
  • #2a7f53 Sea Green

This color scheme serves Make Please perfectly. The boldness of the purple and yellow bring to mind creativity and expression. The green brings a feeling of down-to-earth, hand-crafted style.

Any business with a bold emphasis on creativity and energy would benefit greatly from this scheme. Artist portfolios, creative service job boards, food delivery, and florists would all work with this scheme.

Businesses that aren’t going big, bold, and outlandish may want to steer clear.

4. Cool and sophisticated

Modern website color schemes don’t have to be in-your-face. We’ve taken a look at the trending website color palettes for more buttoned-up brands.

Check out these cool, sophisticated, and oh-so-neutral colors. Financial Connections uses it excellently:

Modern Website Color Schemes on hero slider

Using a combination of blue, teal, beige, white, and black accent colors creates a cool, professional look.

It uses color without being overbearing.

Modern Website Color Schemes on Financial Connections site

The colors used are:

  • #005999 Cobalt
  • #e8dcd6 Pot Pourri
  • #3b3a39 Kilimanjaro
  • #ffffff White

A website always benefits from some color, but the cool and sophisticated scheme uses it sparingly. The dark blue adds engagement without detracting from the photography.

This scheme is ideal for the finance industry, as well as healthcare and corporate. It’s easy on the eyes and gives an immediate air of trustworthiness and professionalism.

It should be avoided for any website that’s trying to be loud and proud, like creative projects and edgy, alternative products.

5. Classy and cultured

Looking to strike the perfect balance between subtle and vibrant?

Try the classy and cultured.

This theme uses a combination of a white background and beautiful wine-inspired colors.

Check out how The Humphreys Group uses it:

Modern Website Color Schemes on Humphreys Group homepage

This color scheme maintains a tight air of professionalism while still incorporating a beautiful analogous theme of red and purple.

Modern Website Color Schemes on Humphreys Group website

Here are the main colors used:

  • #881c56 Rose Bud Cherry
  • #c62c38 Mahogany
  • #f9f7f5 Seashell
  • #ffffff White

Subdued white and cream combined with a rich red and purple immediately give the impression of button-up expertise and elegance.

And all the while still grabbing attention.

This color scheme casts a wide net when it comes to who can use it. Financial businesses, consultancies, nonprofits, catering, and even luxury retailers like jewelers benefit from this scheme.

Any business aiming for an in-your-face attitude and energy better stay away. The same goes for bubbly family-oriented sites.

6. Hot pink and blue

Called “Orchid” by some, combining bright pink with blue is a surefire pairing.

It isn’t too out there, but at the same time, stimulates visitors with a candy-like look.

Mars Venus engages its visitors with lively pink and blue coloring:

Modern Website Color Schemes on Mars Venus website

Light blue and pink are nearly complementary colors, but more similar than blue’s opposite orange, making the pair striking but alike.

Modern Website Color Schemes on Mars Venus website

The color palette uses these shades:

  • #beeae9 Mabel
  • #dc0480 Medium Violet Red
  • #f6e1e1 Tutu

Gone are the days of monochrome meaning futuristic. The most modern website color schemes love this retro look and its variations. One variation of this with purple instead of blue is used by revenue intelligence company Gong.

Modern Website Color Schemes on Gong

A wide range of websites can use this scheme, as evidenced by our two examples. Self-help, inspirational content, tech content, creative work, beauty, and eCommerce all use this scheme successfully.

A few industries should avoid this one, such as environment-centered companies, and construction and maintenance.

7. Eye-catching blue

You can probably tell by now that modern website color schemes really skew towards blue.

200 out of 500 logos are blue. Blue’s also the world’s favorite color.

The modern eye loves blue – and this color scheme takes advantage of that.

Generation Thrive grabs your attention and doesn’t let go with its blue color scheme:

Bright, bold blue that overtakes the entire page. And it adds an intense contrast with spots of yellow.

Here are the colors used:

  • #102e86 Smalt
  • #facc15 Turbo
  • #ffffff White

It’s no surprise that people love blue. Blue represents feelings of calm, trustworthiness, dependability, and honesty.

Industries that benefit from this color scheme are vast, including corporate, tech, travel, nonprofit, and retail.

In fact, one of the only industries that should steer clear is the food industry, because blue is the only color in the spectrum that’s a proven appetite suppressant.

8. Gray with a splash

We’ve looked at color enhancing a predominantly white page. This is about color over a dark page.

Have you ever used “dark mode” on your computer?

Bright green tied to dark charcoal creates a page that’s vibrant and invigorating but still dark enough to be easy on the eyes.

Alluma takes full advantage of this winning combo:

Muted gray with a splash of bright green. “Night mode” while still feeling bright and sunny.

The main colors used are:

  • #425563 San Juan
  • #00c75d Malachite
  • #ffffff White

This vibrant look gives lowkey energy to a business that wants to stimulate and motivate without overdoing it.

Gray with a splash would be great for businesses looking to inspire, like consultancies, charities, and fitness companies. The striking green element would also lend itself perfectly to environmental businesses and projects.

When to stay away? When you want to overdo it.

Out-there brands aiming to advertise their alternative image should leave the mild color schemes for others.

How To Pick a Modern Website Color Scheme For Your Site

Modern website color schemes cover a wide range of tastes and industries.

What’s the best background color for websites looking to convey strength? How about the best font color?

There are so many trending color palettes for websites it’s a little overwhelming to choose one.

There isn’t one solid answer. But here are a few points of consideration.

Be consistent with your brand

Consistency with your brand should be your number 1 consideration.

Brand consistency enhances trust with your customers, improves brand recognition, and builds overall company awareness.

Pick a color scheme that aligns with your brand’s theme, logo, and pre-existing color scheme to enhance brand consistency.

As a result, it’ll look fantastic, too.

Stay in tune with your products, industry, and values

Food delivery company? Steer away from appetite-suppressing blue.

A business with a strong eco message? Go for green colors rather than bright red, which can seem threatening to the environment.

Your industry, products, and values play a huge role in your website’s color scheme, so keep them at the forefront of your mind when making your choice.

Don’t go overboard

If you account for your brand, its logo, and your industry and end up with twelve colors, it’s time to rethink your decision.

Modern website color schemes should be between three to five colors.

Most of the time, a few of those colors are different shades of the same hue, too.

Focus on a few key colors rather than shocking your visitors’ eyes with a boatload.

Make it attractive to your target market/demographic

It pays to study your audience and demographics.

Market research benefits your entire marketing strategy, and your website is no different.

Different people like different colors. Baby Boomers have been shown to like pale blue. Gen X likes violet and red.

Millennials are big on various shades of pink.

Do your research into your audience to choose the perfect colors to engage and compel your target demographic properly.

Use a color wheel and comply with color theory

Let your creativity run wild – but don’t forget hard scientific findings.

Blue and orange contrast and complement. Red, pink, and purple are similar enough to blend and harmonize.

Color theory and the color wheel are based on the way human eyes perceive colors, so it’s as close to objective as we can get with colors.

Try a website color scheme generator to boost your creativity

Need some inspiration to get you going? Try a color scheme generator.

Online tools and color palette generators like Colormind allow you to generate a series of colors to create a random color scheme template. Just hit the “Generate” button and adjust the saturation to get your creative juices flowing.

Does it still seem a bit overwhelming to pick the best color scheme?

Don’t worry, we have one more surefire tip.

Turn to an Expert Eye

Your website’s color scheme will communicate your website’s purpose and vision, and be a crucial deciding factor on whether or not a visitor stays.

It takes less than 50 milliseconds for a visitor to judge your website and deem it worthy of their attention. So let’s grab their attention.

Trusting your website in the hands of expert website designers and developers will help you pick the perfect modern website color scheme and build a website that will seriously impress your visitors.

Why not contact State Creative to have a chat? We love to talk colors.

For specific information all about the design of a website for a nonprofit organization, check out our blog. Or, if you want some more tips to engage a visitor beyond colors, check out our website engagement ideas.

Share This