This post on best color combinations, which you are about to read, is an idea that popped in my mind when we were working on our WDShow’s website design project.
“What are the different hues of purple?”
“What would go with this shade of red?”
Do you have an amazing product/website ready but are a little light on the creative side?
Do you need to learn how the colors on your website can convince more customers?
Do you need to see the examples of the different combination of the different colors on a website?
Do you need to take inspiration from different real examples for your new web design project?
The color is the soul of your design; you will win half your battle if you choose your colors right, don’t you think?
Well, how would you design your product/brand if you do not know?
“But, do I need to know?”
Yes, of course.
To lessen your burden, I have scrutinized all the websites within my professional sphere. The result is an assortment of the best color combinations after hooking around 764+ websites. We have considered all the aspects of web-design in curating this list. We have especially considered CRO as one of the important metrics in selecting this list of 80 websites.
I have compiled few of the great color combinations that are proven winners. All you need to do is browse through the post.
Also, I have prepared a list of handy tools if you want to get creative and come up with your very own color combination.
You can go to these following websites, and check out their trending color schemes. You simply have to choose the one whichever appeals to you the most.
Disclaimer: In this post, I am not mentioning the hex codes of each site. Reason being, these websites may go under re-design anytime. In case you need my assistance with the hex codes of any website, please buzz me over comments and I shall help you with anything possible.
Compilation of Best Color Combinations found over 80 Websites
Another set of dull colors; with a twist, however! They have used minimal colors- two shades of turquoise, white and a twist of bright orange.
They say opposites create symmetry, and symmetry is pleasing to the eye!
You can observe here that they have used two set of colors in their color palette. Bright black and red in one, and pale white and green in the other. The contrast of these colors creates an appealing symmetry!
Another great use of contrast! Their background is essentially brown, two dark shades of brown to be precise, and white for their content.
Choosing a color palette of all delicate shades of different colors adds a hint of sophistication. Just as the soft shades of green, mustard and gray have done here!
Certain colors are a hit, no matter how you use them, like red and blue. They selected blue here and complemented it with light shades of white. You can see the serene and peaceful effect for yourself!
When we see this color combination of black, gray and a hint of blue, we know it means business! Usually, corporate websites use such palettes because they are simple, elegant and powerful.
This site has used black for its font and two different hues of white in its background. It is interesting to see how they have used the brighter shade of white to bring out the font. The calculated use of pastel yellow adds a zing to the entire flavor of the website. Such peppiness works ideally for food or health sites.
This site is one of the best instances of how the same shades of different colors can create an attractive effect. Although individually the colors might seem dull, the overall perception is that of vibrancy.
This website is an example of how different shades of the same color are attractive as well. They have used just green and no other color. It may sound and look simple, but you can see simplicity is powerful too.
One of the largest mail engines believes white and gray(black) are the best colors to stay vibrant. Use of soft blue in the call to action button makes it impressive.
This is the original word that came to my mind as soon as I saw this color mix. Use of such vibrant colors directly speaks to the youngsters or the young at heart! Products\brands targeting this group of people can use this color combination in their web design.
- 365 Days of Astronomy Podcast
The color scheme of bright pink, dark pink and old rose pink which is brought out with the deepness of black creates an illusion of familiarity. You can use it for woman-centric websites or add softness to your product\brand.
- London Creative+
They have used yellow and black in their original form. No shade, no tint. The result is boldness. Colour combinations like this suit well to products\ brands that want an artistic or new-age image.
Another great use of funky colors! The bright pinks and blues accompanied with black, gray and white will surely make a dynamic and lively website. What is also worth noting is their use of a funky green in the font.
The use of a light green with a soft, warm orange creates a stark contrast. It stands out and pleases the eyes!
They have used bright white background and bright shades of green, blue and red. Sort or reminds you of the rainbow, doesn’t it?
Well, rainbows are flamboyant. So is this stylish color mix!
Vibrant and cool colors are used to demonstrate aggressiveness and global approach. Use of bright colors through out the site gives a very positive feel. Color psychology at its best.
They divided their website using pastel blue and white. It is neat, easy on the eyes and simple. Very simple layout makes it easy for the user.
They have too used colors to divide their website into sections. The dull or deep colors such as this do not distract the readers from the content.
If you are yet not able to get the best mix for your website, here are few more websites which I liked. You can directly go through their websites and checkout their colors.
You can see the various hues of blue here and how wonderfully the pastel green and black are used to complement them!
This color palette has given a casual ambiance to the website as a whole. Moreover, individually they bring a different quality to the site. Orange brings the zest, pastel blue- peppiness and so on.
You can see a blend of dark, pale and bright colors here. It is a vivid picture!
Great color mix of soft shades to bring a subtle effect.
Another contrast of light and dark colors to bring out or highlight the content!
These simple colors somehow create maximum effect.
They have used a color mix of black and red. A sure winner!
Shades of gray white and black that screams of elegance and style.
They used gray and black in the most creative way.
Shades of white and blue mostly that looks very fresh and a bit of black here and there.
They have used funky colors to appeal to the masses and also used it efficiently to divide the content on the page.
Blue, green and orange. They are in complementary shades, and ultimately the site looks professional.
They have smartly used the colors to divide their different sections of content and have also used the contrast of light grays and white, and the brightness of orange.
They have used an array of colors like mustard, black, blue and shades of turquoise. The overall image is that of boldness and beauty.
It uses all the lightest shades of pink, brown, green and blue, and to probably twist it a bit; they have used a deep orange. The site looks elegant!
We all love only delicious food. Do you think anything delicious other than the Red?
They have used both contrasts of light and dark shades of white and black colors, and the brightness of red to grab attention! This color combination gives the site a cosmopolitan look.
The gray, funky green, wine red, mustard and yellow used on this site makes it looks youthful and professional at the same time.
All the style and funk of yellow, blue, red and pink on a black background makes this site look streetwise!
Even though they have used an assortment of colors, they have managed to make it look elegant and skillful by using the colors as minimalistic all as possible.
They used plain black and white. However, it works wonders for them because their site has lots of pictures and less of the written word.
They used shades of brown, shades of white to give it a bold look and finally black to highlight the content.
This site is like a slice of nature. The bright shades of green orange, red are soothing. The shades of black is used for dividing the content.
Blue, orange, white- a combination that cannot go wrong.
They have used simple black, white for the background of the page, and the font is in shades of gray. If you want your content to score with your viewers, then casual is the way to go.
Shades of blues but mostly red, white and gray that divides the content neatly.
They have used white, black and pale brown to beautify and make the site more readable.
It uses black and white in the background and for the font funky green and shades of gray.
Another appealing combination of shades of black, white gray and bright red.
It uses black, shades of white and gray in the background and the font is in funky blue.
It uses shades of black, red yellow and pale yellow; the site looks de-cluttered and looks to-the-point as they have used the colors to separate content.
The next nine websites are from the collection of designer Mr. Guilherme Pangnotta. He is a renowned designer and developer who has worked on a variety of projects. He has also won several awards for his unique designs.
Many shades of gray, black and white and the font is in gray and bright blue; the result is a sophisticated site.
Shades of blue , grey, white black, orange and green funky that add the fun quotient to the site.
This combination of yellow, white and black in the background is soothing, but by keeping the font in bright blue and gray, the site gets uniquely stylish.
This color scheme is simple. Shades of black and pale white, that is all but they have used these two primary colors in a creative way.
Shades of black, white, pale brown, green, blue and red for background and font. Admittedly, many colors, nevertheless, the site looks elegant and lovely.
Again a simple color combination. They have used shades of black for the background and used white and blue in font for that “contrast effect!”
Another eyeball grabbing site! It uses white, dull white in the background and the font is in funky purple and black.
Shades of blue light dark and bright light orange pink and green; the charm of contrast!
Dull white for the background and the font is in black, dark purple and blue that separates the different kinds of content from each other.
It is a site with minimal content, and that is why they opted for less number of colors and simple colors, which are light shades of white and gray.
The way they have used black, gray, dull white, and light blue in the background have made the site uncluttered and stylish!
It is a beautiful site. The shades of brown, light dull green are complementary to each other.
It looks like that of dreams!! The shades of light blue, white and dark gray, are easy on the eyes.
The colors they have chosen are bright red, dull white, bright purple and turquoise. A great color mix and great use of contrast!
The dull yellow, bright blue, and gray in the background are an example for simplicity can be appealing.
The site has a theme, and they have used colors keeping the theme in mind. Colors like these- pale pink and mustard, dull white and dark blue- are a mix that will instantly get attention.
The site is casual, and so are the colors- light brown, black, light sky blue and bright white
It has less of the written word, and that is why they have opted for minimal colors, which are brown, green and dull white.
These light shades of green, blue, white and purple are gentle to the eyes and have a relaxing effect.
Bright shades of dark and light blue, light pink and purple; the use of blue is strategic.
The compatibility of dull pink, wine red brings a certain amount of sophistication to the website and the shades of brown bring uniformity.
The mustard, light red, light pink, and dark green is used in a fun way.
Dark and deep purple, light red and black are coming together here to give the site a professional look.
They have used two sets of colors, bright and dark. The contrast of red and blue, and white and gray is superb.
They used black in the background and shades of brown. Another example of how you can make an awesome design with just one color too.
The way they have used white in background and shades of brown are the epitome of elegance and creativity!!
They have used red, dark gray, brown and a dull yellow that adds a touch of surprise to the site.
Deep blue, dull yellow and shades of gray that don’t take your attention away from the content.
Shades of blue, dull white, dark purple, orange and dim fluorescent; there is no way one could have made this more youthful.
Golden grey, white and black makes this website look glamorous.
These are 80 of the websites with most eye-catchy color palettes from around the web. This list covers all the favorite and fruitful color combinations used in web design that will help you lock in on a color mix for your brand or client. If not so, it will at the very least give you an idea of what works and what doesn’t.
Wait! Don’t go anywhere just yet!
I also thought that some of you might want to create a trend rather than just follow one. If you prefer to be original and create a new color scheme for your brand or website, well I can introduce to you a few tools that will help you do just that!
Tools To Create A Unique Color Mix:
First up is the highly innovative and efficient- Material Palette. You just need to get on the site and choose colors that tickle your imagination. In a matter of seconds, the website generates a website design with the colors of your choice. You can make a few tweaks here and there, but if you are satisfied with the results, you can download it and use. Handy and easy-to-navigate!
Old is indeed gold. This standard tool can never go wrong. The color wheel of this tool will not let you down. The magic is its focus on detail and the various style options. The color theme you will end up with using Adobe Color will look professional and unique.
This designer tool can be your one stop for all your color woes. Whether you want to look for the best color combination for your new website, you can simple preview it before you actually decide. It is a very handy tool as it only provide the preview of your website with the colors you pick but also shows examples of some inspiring work done with the same colors.
These are a few personal favorite tools of mine. If you would wish to understand a little more about them or want to discover more amazingly helpful tools, you can find them here.
Now that you have got an idea, how few of the best 80 websites go with their colors. I am sure that you will get the best of the above color combinations.
The rest of you who would rather just get their designs done professionally, then do get in touch with the maestro’s at Business Labs. You will find all your business goals sorted there, from design to strategy to revenues!
If you need any an opinion or advice, you can speak with experts at Businesslabs. Don’t hesitate at all! After all, it is free!
Please do share your insights with us or any more great inspirations which I have not included above. We do reply to all the comments, at the best possible.
All the best for your best websites 🙂