4 Steps For Finding The Ideal Website Color Scheme | W3 Lab

4 Steps For Finding The Ideal Website Color Scheme

Website color schemes range from colorful and bold artistic expressions to the most minimalist grey-scale websites with a pop of only a single color.

Before we dive into the text and technicalities, let’s look at a few examples of unique and eye-catching website color schemes.

Sirin Labs

the sirin labs homepage colors
The Sirin Labs homepage

Immediately, you notice the sleek design and the black and white. Looks pretty sophisticated, doesn’t it?

Despite it not being colorful, it is everything but boring. They used turquoise as the accent color, putting it on the buttons and also on the text when you hover over it. But this is not all.

sirin labs homepage further colors
Scrolling further down the Sirin Labs homepage

As you scroll down, you’re in for a surprise. They used other colors, bold ones at that. The yellow looks great with that shade of dark turquoise, and the pinkish hue in the row below compliments this part of the page.

Lo-Flo Records

the lo-flo records homepage colors scheme
The Lo-Flo Records homepage

This website is as interactive as it is pretty. Before you load in, there’s a cute little animation with a sound effect, and then you see the homepage.

Artistic, with bold colors and sound effects when you hover over the links. Shades of blue and orange are used as accents on an almost white background.

more colors on lo-flo records homepage
Scrolling further down the Lo-Flo Records homepage

As you scroll down, geometric objects start turning into images and audio elements, and if you hover over the orange buttons, they will turn the shade of blue that is used as an accent. Note how they used complementary colors.

I found it really interesting that they decided to keep the photos of the artists black and white, it is quite unique to have b&w photos among colorful shapes and elements.

Lulu and Georgia

Here’s something more subdued and minimalist. This furniture website keeps it simple, let’s look at what greets you when you open their website:

the lulu and georgia homepage colors
The Lulu and Georgia homepage colors

Very minimalist, isn’t it? Compared to the previous two examples, some might even say it’s boring, but they’re going for this look on purpose. Why? Because it works.

They’re all about soft colors, earth hues, and simplicity, which is what their buyers are after. Let’s scroll down a little:

more lulu and georgia homepage colors
Scrolling further down the Lulu and Georgia homepage

Call it simple, but uniformity is actually really hard to achieve. Look at how nothing stands out and how balanced everything is. Beige, orange and brown tones dominate their website, with a lot of white space, so the accent is on the furniture and photos.

History of Icons

This is probably one of the coolest websites I’ve ever seen. Let’s take a look:

history of icons cool website
One of the coolest websites

The homepage opens and you’re greeted by a bunch of colors, none primary. There are different shades of fuchsia and teal and a bit of white. Undeniably unique shades that you don’t see every day, even less together.

great colors on website
Great colors on a website

As you start to scroll down, you’re presented with the history of icons. The 80s are teal, the 90s are fuchsia, 2000s a cool shade of green, and 2010s a deep blue. Despite such a multitude of colors, no part of this website looks overdone and like an eyesore. It shows you that there are still unique website color schemes out there that are not overdone to death.

It helps a lot that their background is black, so at no point do your eyes start hurting.

How to find a color scheme for your own website?

The aim of the aforementioned examples was to show you the ways in which colors can be used. Black and white with a pop of turquoise, a website with a unique graphic and blue and orange accents, a simple furniture website with more than meets the eye, and a combination of rarely used shades. All different and special in their own ways.

Here are 4 steps for finding website color schemes:

  1. Find your primary color
  2. Find your secondary and neutral color
  3. Background color
  4. Useful sites for finding website color schemes

1. Find your primary color

If you’ve owned a business for a while now, it is highly probable that there’s a color you already associate with your business, which makes this step easier and faster.

This color will be not the background, but the color of important buttons (such as download and CTA buttons), special text (text promoting something), important links (menu links), and so on, you get the idea, the super important stuff that you want the user to notice.

If your brand is concerned with health and food, the accent colors frequently used for these websites are green and its hues. Brands related to luxurious cars and clothes usually go with good old black and white, while brands that are oriented towards products for youths have colorful and vibrant website color schemes.

a color wheel
A color wheel | Source

Blue is most often used for social media and ‘serious’ websites, such as banks, airlines, and medical sites, as it is the color of stability and trust.

Remember the second example that we used, the record company? They didn’t use orange by coincidence. It is the color of happiness, joy, creativity, and all of these nouns are associated with music. You can always look up the meaning of colors, this could be of great help when choosing your primary color.

Here’s a useful quiz that you can take that will help you find the right primary color for your brand.

But in the end, it all comes down to personal taste and your vision. Look at how the primary color of our website is purple, we could have gone for blue, which is the safest choice, but purple is so much rarer and more unique.

After you choose your primary color, it’s time to choose your secondary color and neutral color.

2. Find your secondary and neutral color

Just like primary colors are used for important buttons, secondary color is there for less important things. Its purpose is to add some more color and liven the website up a bit.

You can always go for the safe option and use a darker hue of the primary color. Remember the first example we used earlier in the article, the website of the phone company? For the secondary color, they used teal, a darker shade of turquoise.

the sirin labs bundle page design
The Sirin Labs bundle page design
 The Sirin Labs security page
The Sirin Labs security page design

Look at how unified everything is. Even the nails of the woman in the video are turquoise, and the comparison table contains all the colors that were on their homepage, which are also the colors of their product packages. Talk about unique and well-utilized website color schemes.

If you want to go for something different, you can always choose a color that contrasts the primary color, like the Lo-Flo Records website. Blue and orange are complementary, but completely different and create a unique effect.

When it comes to the neutral color, it is the color used for text and background. It’s usually white, different hues of grey and black. See which one looks best with the secondary and primary colors you’ve chosen.

3. Background color

If there’s a color you associate with your brand, you should never use it as a background color. Web designers avoid using primary colors as background colors because they’re usually bright, which makes sense because their role is to attract attention.

Artistic websites, yes, but not eCommerce and serious business websites. Bright colors being used as backgrounds would put the strain on the eyes of the visitor, and if you really like your brand’s color and want to use it as the website background, make it a darker hue and use the bright version as the primary color.

What about a video for a website background?

White is recommended as the absolute best choice, because it will make your products come into focus. Remember the third website example we used earlier, the furniture one? By making the background white, all of their pieces can stand out.

accent chair page colors
The accent chair page of the Lulu and Georgia website

Consider gender

When deciding on the primary color, it is also good to take gender in consideration, if your product is marketed towards one, that is. Companies that sell makeup and women’s clothes most often use shades of pink and red as their accent colors, and websites marketed towards men use different shades of blue and black.

In an attempt to find the favorite and most disliked colors of men and women, there have been dozens and dozens of surveys conveyed through the years.

In a survey from 2017 that over 5.700 people took over 6 years, the results showed that the favorite color of both men and women was blue, followed by green. Red was in the third place was red for men, and purple for women, and for the fourth place it was the other way around.

When it came to the most disliked color, it was brown for both genders, followed by yellow, orange and grey. Yellow, orange and brown are colors that you’ll want to avoid when choosing your background color, for sure.

colors preferences by gender
Colors preferences by gender | Source: hotdesign.com

Pretty interesting, isn’t it? Looking at this chart made me realize why all social media websites go for blue. It’s not only because of stability and because it’s easy on the eyes since we spend hours and hours on these platforms, but also because both genders are fond of this color.

Are your products marketed towards people of a specific age?

Just like gender, certain ages have their favorite and disliked colors, as well. Ages from 1 – 18 like blue and green the most, almost equally. People 19 – 24 years old like blue even more, and green, purple and red less and almost the same amount.

Blue is the favorite consistently across the board. It’s interesting that the older people get, the less they like green and start loving purple more.

the favorite color by age group
The favorite color chart by age group | Source

When it comes to website color schemes, we can conclude that if you’re marketing towards children you should use bright and cheerful colors like green with splashes of either red or orange. If your target audience is young adults, blue is the safest choice, while you can also use green, purple and red. If, on the other hand, your target audience are middle-aged people, you’ll want to use blue, purple and red.

Consider the industry you’re part of

We already mentioned how makeup websites go for red and pink for their primary colors, but there’s more.

If you visit a food-related website, you’ll notice an abundance of red, brown, white and black. This is because it is thought that the color red entices hunger, and black and white puts the accent on the food. If you pay attention, you’ll often see photos on food websites of people dressed in white with black aprons preparing the food.

Businesses that offer wellness services usually go for green, brown and light blue, all-natural colors. Financial and medical websites most often use blue, and abstain from any use of red, as it can signify danger and reminds people of blood.

4. Useful sites for finding website color schemes

If you still need inspiration for your website color scheme, you can always use a photo. By this, I mean if there’s a photograph that you really like that has an interesting color scheme, you can use it to come with the color scheme for your website.  

The website Canva.com offers such a service, look:

color palette generator
The Canva.com color palette generator

The process is as simple as it can be: all you have to do is upload a picture of photo and the generator will give you 5 colors that dominate the image. I really like how it also names the colors.

Their website also has a section for color palettes:

canva palettes
Canva.com color palette page

As well as a color wheel with special features, one of them being finding a complementary color of any other color:

canva colors wheel
The color wheel page of Canva.com

Another useful site when it comes to finding website color schemes is coolors.co, that generates a color scheme at the press of a button:

coolors.co palette
Coolors.co palette

Using colorhunt.co, you can sort color schemes that people vote for by popular, trendy, new or random:

colorhunt.co popular colors
The colorhunt.co website sorted by popular

Wrapping up

Coming up with brand colors and website color schemes may seem like a daunting task, but don’t stress. It’s not a process that should be rushed and it usually takes time to come up with the right color combinations.

Thankfully, there’s a number of factors such as gender, age, and the industries businesses are in that can help us determine the color palettes. There are also sites that are here to help us find the prettiest website color schemes for free.

Good luck building your website and thank you for reading!

Marija Milosavljević
Marija Milosavljević

Graduated as first in her class. Incredibly quiet and shy until the lag in Warframe turns her into a raging death-bunny.

Leave a Reply

Your email address will not be published. Required fields are marked *