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.
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.
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.
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.
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.
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:
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:
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.
This is probably one of the coolest websites I’ve ever seen. Let’s take a look:
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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:
As well as a color wheel with special features, one of them being finding a complementary color of any other color:
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:
Using colorhunt.co, you can sort color schemes that people vote for by popular, trendy, new or random:
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!