SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
Canva vs Photoshop: Best Design Tool for Non-Designers (2021)
Written by:
Nayomi Chibana
Color is such a fundamental part of the way we perceive the world that we often take it for granted. Think about it: From the youthful and vivid orange on someone's attire to the gray and gloomy sky above us, colors have the power to mold our perceptions of others and even the circumstances we find ourselves in.
This is why one of the most powerful tools in a designer's arsenal is color. It can either make or break a design; it can be the determining factor in engaging viewers or sending them promptly on their way.
As a non-designer, I often find it difficult to find just the right colors for my amateur projects. Whether I'm creating a simple image to support my content or more elaborate projects such as a slide deck or infographic, I frequently spend a good amount of time looking for the perfect color scheme. I ask myself questions like: Do I want my design to be inviting? Provocative and bold? Or intelligent and elegant?
Unless you're a seasoned designer, it takes time and effort to find a color combination that works within your website's design principles, which is why the design team at Visme decided to provide our users with a handy list of beautiful color schemes from websites that have been recognized by Awwwards, the most prestigious award for Web designers and developers.
After receiving plenty of positive feedback on our first color combination guide, we knew that our audience would appreciate another round of gorgeous palettes to choose from.
You can easily apply these to any of your Visme projects by using the hex codes provided to the right of each image, as seen in the GIF above.
RELATED: 50 Beautiful Color Combinations (And How to Apply Them to Your Designs)
Warm and cool hues are combined in this colorful yet not overwhelming palette. From an appealing and bright bluish-green to an earthy terracotta, this color scheme is well-suited for youthful and modern designs.
Shades of blue and violet are combined with some eye-popping red and orange accents in this combination. Notice how the contrast between the vivid blue background and red-orange accents immediately draws the eyes to just the right places, from the top of the page down to video at the bottom.
Feelings of being surrounded by a comforting blue sky and a nurturing scene of the outdoors are immediately evoked by this very "down-to-earth" color scheme. Ideal for designs related to nature and sustainability, this pleasant color combination may come in handy for projects that emphasize environmental consciousness.
A dark imperial blue and emerald green come together in this scheme to create a clean and refreshing palette. Reminiscent of the ocean or any water-related setting, this combination is ideal for designs intended to convey a calm and reliable image.
This eye-catching combination of coral red and turquoise, along with other shades of blue, is both vibrant and audacious. The cooler blues are wonderfully offset by a bold feature color, making this a perfect color scheme for any edgy and modern-looking design.
A common technique used by modern sites, this page creates an appealing contrast by combining a black background with bold accent colors. In this case, variations of red, such as vermillion and auburn, are complemented by a unique Russian green.
This elegant color scheme brings together dark muted tones to create a clean and sophisticated look. Its shades of gray and blue are ideal for more conservative designs.
Shades of dark reddish brown combine with deep Tuscan red and old lavender to create a unique palette that draws you in with its warmth and depth. This scheme is ideal for elegant pieces looking for a dash of energy and richness.
This dark and mysterious color scheme with a vibrant blue accent follows a prevailing Web design trend: The use of dark background colors with bright and bold accent colors.
An appealing combination of pinks, reds, blacks and grays, this modern-looking palette evokes sensations of luxury, sophistication and minimalism.
This beautiful combination of candy pink, green-yellow, lavender gray and pastel brown is ideal for designs looking to project a vibrant and inviting image.
It's hard to look away when faced with a minimalist yet striking design such as this. The dark smoky black background coupled with a striking electric blue make this a winning color scheme, useful for a variety of projects.
Using the red Polish flag as a basis for its color scheme, this attractive website combines a dark scarlet red with dark pink over a light gray background. Its lively and creative and, at the same time, refined in its use of a minimalist color scheme with different shades of the same hue.
This colorful combination of goldenrod, vermillion, dark blue and Dutch white brings to life this artsy and creative design for an online archive of musical works.
This unique blend of skin tones and more elegant colors such as dark imperial blue and ruby makes this the ideal color scheme for designs with nuanced messages. Reserved yet approachable; sophisticated yet fun: These are the kinds of gray-area messages that are effectively sent with this eye-pleasing combination.
This eye-catching blend of blue sapphire, gunmetal gray and platinum on the one hand and peach-orange and tan on the other make for a modern and sleek color scheme. Used here to project a futuristic image, the cool, metallic colors are effectively tempered by more human, earthy tones.
This in-your-face combination of Portland Orange, vivid yellow and jade on a dark gray, almost black background screams for your attention. Daring and full of energy, this color combination is perfect if you're going for a contemporary and audacious look.
Dark sienna, charcoal and a burst of pale red violet make this color scheme a must-have for those looking for an elegant, futuristic yet dynamic look and feel. This color combination is versatile enough it can be used in projects ranging from modern-looking corporate reports to magazines and editorial content in general.
Eggshell white, dark vanilla and taupe gray with jelly bean red highlights come together in this minimalist yet warm and inviting site. The burst of energetic color throughout the design makes this site elegant and inviting at the same time.
Dark cerise, royal purple and dark slate blue are blended in this beautiful and engaging site. The deep cerise acts as an accent color over the dark purple background, leading the viewers' eyes to the navigation menu as soon as they arrive on the site.
The shades of blue and violet in this site are especially pleasing to the eye and evoke both energy and peace at the same time. Blueberry and sky blue are artfully combined with amethyst to give life to a refreshing and eye-pleasing color combination suitable for any design which aims to incite positive emotions.
If you're looking for a more muted and corporate look, this color scheme brings together shades of green, blue and brown that convey both professionalism and reliability. Phthalo Green, dark slate gray and pewter blue are just some of the colors used here.
A range of blues, from a bright lapis lazuli blue to aqua blue, make this a reserved yet beautiful color scheme. It can be used in a variety of different visuals, from muted corporate projects to design-related ones, as in this case.
A beautiful myrtle green and keppel come together here with azureish white and plain white in a simple but effective combination.
This bright and elegant color scheme brings together a very saturated light cold blue with other shades, such as dark slate blue and pale cornflower blue. This combination is elegantly complemented by a bright and vivid shade of pink.
This playful and colorful scheme combines several vibrant hues: bright turquoise, tangerine yellow and dark orchid.
This sleek and ultra-modern site boasts an elegant and eye-catching combination with effective contrast. The bright yellow-green combines well with the black and gray in the background.
This is another example of a site that effectively uses a bright accent color to delineate a path for the viewers' eyes. In this case, the bright yellow draws the eye first to the title, then the path up the mountain and finally to the call-to-action buttons at the bottom of the page.
This combination of ocean green, aquamarine and sea green perfectly communicates the concept of modernity and at the same time, life and fertility, which is totally in sync with some of the words in the site's central message: digital, nurture and bloom.
This earthy combination of green with a range of blues, from pale cerulean to teal blue, is perfect for conservative designs intended to project an image of stability, reliability and abundance.
This lively site brings together a bright raspberry pink with softer colors such as pastel blue and light pastel purple. The result is a wonderfully fresh and lighthearted color scheme.
This unlikely blend of a range of dark pinks with a blues makes this a unique and engaging combination that can be used for a range of projects in different fields.
This fresh and citrusy blend of light greenish-yellows, lime green and black is a favorite among brands related to high-adrenaline sports and energy drinks.
The bright turquoise background and orange call-to-action button on this site may be a bit loud for some visitors, but the combination definitely conveys high-energy emotions, which go along with the image in the background.
This range of pinks and reds with a bright blue call-to-action button creates plenty of visual interest and draws attention to itself immediately.
This bold and unique combination of royal blue and gold, with vivid cyan highlights, captures the eye. Its unexpected and somewhat out-of-the-box thinking help make this website a winner.
The cyan, blues and oranges on this page make this a particularly inviting and energetic design that can be applied to projects with an optimistic and uplifting message.
This wintery red and blue combination evokes both coolness and warmth at the same time, similar to images related to the winter holidays.
This bright and rich color combination brings together a vivid yellow, blue and pink in this beautiful minimalist design, which can be used in lively yet professional projects.
This site pulls off an attractive design with just a few elements and a well-chosen color scheme. Turkish rose, middle green and yellow geometric shapes over a black and gray background are enough to catch the viewer's eye.
This effective color combination uses shades of blue and red to create a sense of boldness and ardent professionalism, ideal for designs looking to convey power and competence.
Even if you're not familiar with the term flat design, you've probably seen it before: Websites with no drop shadows, no gradients, no bevels; in short, no three-dimensional elements.
While the site above adds a bit of a shadow effect to the boy on the right, it would technically qualify as flat design 2.0, which is nothing more than the addition of a few very subtle three-dimensional effects.
As seen here, flat design colors tend to be very bright and super saturated.
This unique combination of a coffee tone with sky blue and different shades of brown makes this a soothing and comforting color scheme: Something reminiscent of your favorite coffee house or lounge.
This combination of cameo pink, UCLA blue and and granite gray brings to mind the kind of attire used by well-to-do, preppy college students. Although this makes sense considering the site's target audience, this scheme can also be used in any design looking for both seriousness and a bit of liveliness.
This Spotify site makes perfect use of a grape-colored accent against a very dark desaturated violet. This color scheme can be used for any design where you have a few elements or a central message you really want to pop.
Oxford blue with a few bright blue and red highlights make this a very traditional and corporate site. Blue and green, which convey professionalism and stability, are commonly used colors for corporate reports.
This blend of gold, purple and black bring to mind words such as wealth and extravagance. Accordingly, this combination can be applied to designs related to fashion, luxury and high-end products.
This beautiful combination of viridian green and telemagenta over a dark background creates heightened visual interest and draws the viewer in at first glance. Bold yet professional, this color combination, when used correctly, can even be applied to corporate designs.
Whereas the previous color scheme was eye-catching--but not too bright--this combination is purposely loud, to the point that it might repel some viewers. When looking to make a bold statement, though, this combination may work well when done right, as in this case.
This relaxing yet cheerful combination of lemon, yellow, mint and dark cyan make this an ideal color scheme for any message looking to convey energy, optimism and, at the same time, harmony and growth.
[…] Sourced through Scoop.it from: visme.co/blog […]
[…] RELATED: 50 Gorgeous Website Color Schemes […]
LOVE these!!
Thanks, Abby!
Awesome collection. Thanks!
Thanks! I also love these: https://visme.co/blog/color-combinations/
Brilliant! Many thanks. I am about to change and update one of my websites so found all this information very useful.
Thanks! Glad you found it useful.
[…] shouldn’t be chosen at random, however, as different colors can evoke different feelings. We have other articles here at Visme you can check out on the topic to help you decide what color scheme […]
[…] Source: visme.co/blog […]
this is just awesome thanks alot
Thanks, Christy! Glad you found it useful.
These color themes…really helped me a lot.
U have an awesome collection.
Thanks a ton. and keep up the good work.
Thanks, Rajiv! Glad you found it useful.
Nice to read the information that you have shared with us. Keep doing the great work up.
Thanks! Glad you enjoyed it.
V useful . Thanks for sharing
Thanks! Glad you found it useful.
Thanks for share! Glad you enjoyed it.
this is great!!!!! nice combinations
Thanks! Glad you liked it.
this is great!!!!! ^^!
that was awesome on schemes of color
Thanks! Stay tuned for some new ones coming up.
I love the 19 scheme! I will use it in the future!
x
Thanks, Carine! Glad you liked it.
this is great!!!!! ^^!
Thanks!
Thank you for the color codes on each website. I want to try it for covers and my website, too. I’m the type of person who kept on changing website colors and themes. Do you think I should stop it?
Thanks for the feedback, Lisa. I definitely think it’s best to maintain a consistent visual identity, and that includes color schemes as well. You can check out our post on how to create a brand style guide to help you stay on brand across all your visual content: https://visme.co/blog/brand-identity/ And if you find a need to rebrand at any point, here’s also a useful post on that: https://visme.co/blog/rebranding-strategy/
Thank you! I’m trying to find the perfect colors for my new website 🙂
Thanks for the feedback! Hope this helped you find just the right color scheme.
Excellent.
Thanks a lot, this is very helpful
wow..awesome staff…am a web and graphic designer as well,so this information is so great..keep up the great work..
Thanks! Glad you liked it. You’ll probably like our latest post on rebranding: https://visme.co/blog/rebranding-strategy/
Thank you so much i like green contrast with black on my website and also please advise me which color is more better.
Thanks, Shan. You have good amount of contrast here with the black, white and neon green accent color.
Awesome Awesome Collection 🙂
Loved every one of them … few are quite unique and few of them are quite weird also… but looks good 😀
Gave me a nice perspective to look at colors while designing a website 😀
Thanks !!!
Thanks, Arun! Glad you liked them and hope they’ll be useful for your website.
So I recently changed the color palette on my portfolio website and after a few experiments, I finally settled on a color scheme I like, more or less. (I say more or less because I tend to get bored FAST and want to change up my color scheme.) I was looking at this list and I’m pretty drawn to #44. Love using blue and pink together since they’re my fave colors.
When designing ANYTHING, it’s important to test it ouut on how it looks on different monitors though. For example, the newer high res monitors that my company’s design team uses has wayyy better color accuracy than my laptop. It’s a big issue when we are presenting something new to clients and they don’t see what we see. You can’t always guarantee that your clients necessarily have the newest tech and that the colors are displayed properly.
Choosing a color theme and developing a mood board is so important BEFORE you start the design of your site. Colors should be what you like, but more importantly something that showcases your brand. I think its awesome when brands go to bold colors, even those that seem irrational. It really makes them stand out amongst their competitors. Great read! Thanks!
Yes, I think that says a lot about how colors impact a brand. I believe that certain colors appeal to certain emotions, such as McDonald’s and Wendy’s using the red and yellow colors to provoke hunger and cravings. If a business can fine-tune their color strategy, I think that it would noticeably benefit their success rate.
Great 🙂 really cool and helpful
Thanks
Mark
The 2nd color of the #7 theme seems to have the wrong hex color. When I put in #379683 it is a greenish color. I used a color picker and it seems like #938E94 is closer to the color it is supposed to be. You might want to take a second look at it. Also thanks for the examples. It’s one of the better color theme lists.
Thank You 🙂
..
Thanks for sharing. Awesome collection.
Have been learning about colour psychology for my proposed website. Thought I had it nailed. Yes, blue or green had to be the primary colour. Then I saw your 50 really good colour combination examples. I like numbers 5, 18, 24, 29 and 44. Probably/maybe/not sure if my overall favourite is 18. A day of indecision ahead!
Such vibrant colours! Love it!
Wow! I never leave comments on any website but here I just have to! Thank you for these colors! 🙂 Helped me a lot! Thanks!
Wow thanks a lot, this is very helpful, Ive been stuck for days trying to get the best color combination, this really helped
As a graphic designer I always consider “Accessibility Requirements for People with Low Vision”. Has this been considered in these colour schemes or would you use CCS’s for this group of people to change them on the fly?
I was wondering the same thing – I have a client that wants a color scheme to one of these, but when running through a program they aren’t accessible. What do you mean by “would you use CCS’s for this group of people to change them on the fly?”
Really, a well-curated list. No doubt most of the entries follow well-established principles of the colour theory of either being analogous, triads, tetrads or complimentary.
I like all the color scheme. Great Job!
good
Wow this is really amazing and happy to have such ideas from you. Attractive combination I seen ever.
It is very difficult to select between them, Lol
So amazing website color schemes. Nice tutorial and so helpful.
Very good article! We will be linking to this particularly great post on our website.
Keep up the great writing.
Thanks. Please let us know when live so we can also share with our audience.
Thank you for compiling this awesome list, Nayomi! Definitely bookmarking this, so our creative team has a go-to resource 🙂
Thanks, Crystal. Glad you found it useful. Stay tuned for more practical tips and brand new content.
Exactly what I needed. Bookmarked
Thanks, Petros. Glad you found it useful.
I like this article . thanks
Great post
All of it are simple yet stunning. Need to use this as reference for my upcoming templates.
Thanks. Glad you found it useful
Great collection thank you! Off to try a couple myself 🙂
Thanks, Matt. Glad you found it useful.
great!!!
Amazing!
great post thanks very much! 🙂
You’re welcome
Good collection for web designers. i like earthy and natural color styles as they are more attractive and human friendly.I am still searching for best colors for my digital marketing serices website.
Hi Tariq. Thanks for sharing. Hope you found just the right color scheme for your website.
thanks for the tips
you’re welcome.
Like a Lot of your great articles, I wish this could be downloaded as a PDF – I would like to use this more when choosing website colours and flicking through 25 double sided pages. Thanks
Hi Robert. You are welcome to download and save as a PDF. Simply right click, choose Print, and instead of Print, click on Save as PDF.
Awesome Thanks!
Thank you. Its a good collection.
Hey there! This post could not be written any better!
Reading this post reminds me of my old room mate! He always kept
talking about this. I will forward this post to him.
Fairly certain he will have a good read. Thank you for sharing!
great job… very beautiful color combination you did. very useful for everyone who wants to put a nice color on their web page.. thanks for giving.
Hi Nayomi,
This is really wonderful stuff…..was very helpful…
Thanks
Sathya
One of best article.Thanks for sharing
Hi, Nayomi
What a wonderful collection of colors, I really liked it. I am gonna use one of them for my new website.
Thanks for sharing.
Genial.
I like all the collection, it is wonderful
Thanks
I found this collection very useful. I had been looking for sophisticated, pastel color schemes and thats it!
Thanks! Glad you found it helpful 🙂
I really enjoyed your collection because it’s really creative and inspirational. Thanks to your collection, I have many good ideas
awesome color combination thanks for the great collection…
I found number 30 inspiring. I used it in a website project about bicycle tourism and it looks great, however I added a pastel green
Wow,,
amazingly awesome article dear,
Thanks a lot for sharing such an awesome list.
Your’s this list is like a boon for many website development companies or the ones who deal in this category as well. I am also working with a digital marketing firm and offer website development also.
Your this article is very much helpful for us.
Thanks for sharing.
Thanks Madhuri 🙂 We’re glad you found it useful!
One of the best collections I’ve seen in a long time!
Thanks Quinn 🙂
Great article to read. You have collected a wonderful website colors. These combinations are great. Even I am trying to implement these colorful combinations to my website. Always color combination decides the look & feel of the websites. Once again thanks for sharing this blog with us.
Thanks so much Anwitasinha 🙂
Thanks for sharing! This is one of the best collections I have seen…!!!
Thanks Nathan! Glad you found it useful 🙂
What a wonderful collection of colors, I really liked it. I am gonna use one of them for my new website.
Thanks for sharing.
Thank you for published in your blog, I have learned of valuable information keep many post blogging like that.
Great Tips! It is interesting to see peoples likes and dislikes concerning colors. Thanks for sharing!
that was awesome on schemes of color. Thanks for sharing
Heyy.. This is a cool article.. never knew different color combinations can do such wonders. Would certainly bookmark this article for future reference.
What’s up to every single one, it’s truly a pleasant for
me to pay a visit this site, it contains useful Information.
Awesome Schemes of colours.very nice article
It’s not my first time to pay a quick visit this
site, i am browsing this site dailly and obtain nice information from here all the time.
This is really good article.i learned many things from this.
This is a great reference for color schemes… I am going to use this in my course to teach businesses how they can have a strong branding just by getting the colors right
Such an amazing information, Thank-you for sharing..
What a beautiful collection of colours. This is a Great article for different colours. Very helpful information for Web and Graphic designers. Thank you so much
Thank you because it is very helpful to me
wow, nice colors. i am just finding colors for my website header and footer but i am unable to choose the perfect color. can you please give me a suggestion? which color i give? i dont have any ideas about colors.
WOw I am going to try this in my future work
This is GREAT!!!!! Thank you!!!!!
Thanks for sharing.
its is really the nice color combination.
Thanks for sharing…..
This is the most beneficial blog and updated me with new facts. I really feel happy by reading your blogs.
Thanks for this amazing post! Reading this helped me update my knowledge on how to use Website color schemes for great visual designing.
Amazing collection. Thanks!
Awesome post! Thanks for sharing the knowledge and keep up the good work.
wow they look so fresh and lovely thanks for suggestion
Helpful post thanks for the hard work.
Hey,
Website designs are the main part. Most people need traffic and for traffic people need a good look. You have provided nice color schemes. Thanks for the post.
The 30 scheme is amazing.😍 Thanks for this article!
Thanks for these colour schemes. I always have trouble putting colours together – ones that look nice in my head, don’t turn out so great in reality!
Visme has helped us use color in ways we never thought of. Thanks a lot.
Thanks for sharing this collection of color schemes.
Very interesting. I personally like “Striking and Simple”, “Close to Nature” and “Striking Citrus Colors”
Thank you
Amazing Content. Really helped. Thank you so much. U da best.
Great article specially for those building their first website. Thanks!!!
Nice, very helpful in picking the right matching color.
Simple but significant. Thanks for the stunning article. it’s very useful
Very nice article about the color theme ideas and picking right color.
Top collection of colours, looks beautiful if implemented in our websites. A fantastic article which is useful for website designers. Thank you for this colourful blog. Keep it up.
Thank you so much for this article! I teach high school Interior Design and this has helped my students actually see how they can use a variety of colors (more than they are used to) to make their vision come alive!
Awesome stuff!