DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

10 Beautiful Website Color Palettes That Increase Engagement

by Stephanie Hamilton

Is the color scheme you’ve chosen for your website triggering a desired response?

Everyone has favorite colors they tend to gravitate towards when it comes to their work or otherwise, but the skilled designer understands the importance of evaluating a color scheme based on the meanings of the color in relation to the product/service being promoted.

Good color choices take careful planning and when done correctly can influence how a visitor interprets what they see as much as layout and typography.

In this article we’ll take a look at beautiful color schemes and how they are successful in getting a visitor engaged with your content.

1. Mea Cuppa

  • #191919
  • #DFE2DB
  • #FFF056
  • #FFFFFF

A neutral color scheme with a pop of color (yellow) has a very classy and elegant feel – appropriate for an upscale mobile cupcake bakery. A minimal color scheme can still create contrast and give a unique, impactful visual impression.

2. The Big Top

  • #C63D0F
  • #3B3738
  • #FDF3E7
  • #7E8F7C

Analogous color schemes are some of the easiest to create and can be adjusted by manipulating their tone, shade, and tint. In doing so you created contrast which draws the eye into the design more easily. The design is elevated further by a custom color scheme on the slide navigation which adds a striking twist to an otherwise subdued palette.

3. Tori’s Eye

  • #005A31
  • #A8CD1B
  • #CBE32D
  • #F3FAB6

In Tori’s eye we see the effects of a simple yet powerful color palette centered around shades of primary colors like green and blue. This monochromatic color scheme is easy to pull of as one shade of a color will almost always work with another shade of the same color. As a rule of thumb – use more shades of fewer hues.

4. Event Finds

  • #558C89
  • #74AFAD
  • #D9853B
  • #ECECEA

You can see the effect of using tints of one hue on the website for Event Finds. Contrast is achieved through the use of a complimentary color, which in this case are orange call to actions.

5. Cheese Survival Kit

  • #2B2B2B
  • #DE1B1B
  • #F6F6F6
  • #E9E581

For many websites, the logo is designed first and the color scheme is dictated from there. This is evident on the Cheese Survival Kit website, which uses contrasting colors for an impactful visual impression. The yellow accent color serves as a call to action and is used sparingly as bright colors typically should. A splash of color here or there will draw the visitor in, but when used everywhere it loses its impact.

6. Nordic Ruby

  • #7D1935
  • #4A96AD
  • #F5F3EE
  • #FFFFFF

A neutral background works well against highly-saturated colors on the website for Nordic Ruby. Plum is used as a prominent color for the header, while a light blue serves as contrast in the form of call to actions and headings.

7. Lake Nona

  • #E44424
  • #67BCDB
  • #A2AB58
  • #FFFFFF

For a community that practices healthy, sustainable living a fresh, modern color palette is a suitable choice. This split complimentary color scheme adds just the right amount of interest to an otherwise white page.

8. Lemon Stand App

  • #404040
  • #6DBDD6
  • #B71427
  • #FFE658

This website features a triadic color scheme with blue being the primary color that is the foundation of the page and pops of yellow used in calls to action for contrast. Again, bright colors used sparingly have much more potential to elicit an action than those used frequently.

9. Mint.com

  • #585858
  • #118C4E
  • #C1E1A6
  • #FF9009

Mint.com is a website that put a lot of attention into their visual design in garnering the trust of its audience. The color palette is clean and fresh and the use of subtle gradients and shadows give the website that extra polish.  The green is soothing while the use of the complimentary orange makes calls to action stand out and inspire the desired action.

10. Odopod

  • #191919
  • #DF3D82
  • #FFFFFF

Pink is an underused background color but that doesn’t mean it can’t be used tastefully, such as on the Odopod website. When used non-conventionally, such as on a tech/design platform, the color has the ability to make your work stand out much more. Additionally, lesser used colors surprise the visitor and draw the eye.

Choosing the right color palette for your web design project takes time and skill as well as the knowledge of the particular product or service your marketing.

The best way to learn is to practice creating color schemes – whether in Photoshop or through free services such as Adobe Kuler. Create an inventory of palettes that strike your interest to draw from when the times arises.

What color schemes reasonate with you?

80 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let’s collaborate to tell your brand’s story. Visit the blog for more helpful design and business resources.

80 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Anurag Gupta says:
    August 29, 2016 at 4:35 am

    Thanks a lot ! I was looking for a simple but effective color scheme for my upcoming web project. I like this ” lake nona” one, implementing with a variation.

    Thanks Again

  2. Anonymous says:
    June 23, 2016 at 5:05 am

    Great that I came here I was looking for a new skin for my website good article thanks

  3. Anonymous says:
    June 5, 2016 at 2:14 pm

    Good combination of colors. Choices were good. I like every design. Thanks for sharing.

  4. Gary says:
    June 1, 2016 at 3:19 am

    Thanks Stephanie. This is the best article on colours I came across. Just what I needed with the examples and codes.

  5. Anonymous says:
    April 13, 2016 at 5:48 am

    I always think 2 or 3 bright colours against a crisp white background work well. Too many colours and site looks busy. Also dark colours can make site look drab and uninteresting. Keep it simple and keep it crisp so this grabs your attention when you are surfing through a number of sites.

  6. Chris james says:
    February 7, 2016 at 4:02 pm

    I will try the first one , looks cool!

  7. Anonymous says:
    February 5, 2016 at 12:48 pm

    I read this post fully regarding the comparison of most recent and earlier technologies, it’s remarkable article.

  8. Ravi Jay says:
    January 11, 2016 at 1:29 pm

    Amazing color schemes! Love the blend of traditional with non traditional colors.

  9. Emily says:
    November 30, 2015 at 2:15 pm

    In a world of colour everywhere I am now turning back to black and white. Seems to have more impact compared to HD images. However, having said that you cant beat a quality HD photo. I suppose it boils down to whatever works best for the product or service you are promoting.

  10. Anonymous says:
    November 22, 2015 at 5:39 am

    It’s bright orange for me! although its a bit easy jet! Anything but boring old blues and greys. Sometimes black and white can be more effective.

  11. Anonymous says:
    November 22, 2015 at 5:35 am

    I think depending upon the business bright fresh vibrant colours are essential to grab attention to casual surfers. Its never failed for me.

  12. ySABEL says:
    November 5, 2015 at 8:07 am

    any idea for a construction company?

  13. Michael says:
    August 18, 2015 at 4:24 pm

    I love this article. I am just learning website design. I Started designing my website few days ago. I jst finished the wireframe and the prototype. And now im really confused on how to bring it to live with colour. Im SCARED and really CONFUSED.

    Stumbled upon this article and its really a nice one. The Article and comments from individuals let me know how to start, pointing me in the right direction.

    My question is this…..on getting a color scheme, is there any rule as to how to use it(i mean the color from the scheme to use for header, color for body and links and so on) or I just have to keep trying it out and seeing which combination works and which doesnt work?

    A really great article. Thumbs up.

  14. Sam says:
    July 5, 2015 at 4:30 am

    Thank you so much for the awesome list. I liked it!

  15. Amit soni says:
    June 15, 2015 at 1:58 pm

    nice post. i totally liked it.

  16. elshan says:
    May 25, 2015 at 9:17 am

    very nice!

  17. Grace says:
    April 19, 2015 at 7:27 pm

    Good article! Any color palette ideas for custom leather and jewelry?

    • April 20, 2015 at 9:03 am

      Thanks, Grace. For leather, I’d go with an earthy palette: browns, oranges, maybe some green. For jewelry, you could do anything–let your target market and your tag be your guide.

  18. soffian says:
    April 18, 2015 at 2:59 am

    Nice, thanks!

  19. Nargish says:
    April 4, 2015 at 8:37 am

    Very good collection, thanks a lot..

  20. March 28, 2015 at 10:35 am

    Thanks for these great examples

  21. Emina says:
    February 27, 2015 at 6:58 am

    I was thinking of improving my blog’s appearance and found this. This is really helpful. I would like to know whether any specific palettes are good for technical and news blog.
    – Thanks,
    Emina Kepic

    • February 27, 2015 at 9:20 am

      News and technical sites tend to be black and white, with one brand color, like red or blue.

  22. January 12, 2015 at 3:53 am

    Thank’s…… Really nice….!

    • Neil Patel says:
      January 12, 2015 at 11:58 am

      Abu, glad you found it helpful. Thanks for the feedback.

  23. Colin says:
    January 1, 2015 at 2:47 am

    I now understand the importance of selecting the correct colour tones for my website. This has given me some ideas to explore for when I next update my site. Good info!

  24. Prashant says:
    December 18, 2014 at 3:30 am

    Thanks for the wonderful compilation. I used mixed colors from a couple of themes to give a refreshing look to my website.

  25. Colin says:
    November 24, 2014 at 9:54 am

    Good info, lots of food for thought. Considering changing my site colours.

    • November 24, 2014 at 10:29 am

      Glad you found it useful, Colin.

    • Neil Patel says:
      November 24, 2014 at 11:22 am

      Colin, glad you found it helpful. Let us know what you come up with.

  26. ricky says:
    November 4, 2014 at 10:44 am

    I’ve tried all of these ideas, nice article 🙂

    • Neil Patel says:
      November 5, 2014 at 2:01 pm

      Ricky, glad we could help.

  27. james niko says:
    August 5, 2014 at 12:15 pm

    Thanks for the color schemes , i think it will help me in my projects…but my opinion is if you don’t know how to use this pallets …where to put a certain color…your website wont look like you want…

    • Neil Patel says:
      August 5, 2014 at 3:49 pm

      James, great point! It’s all about customizing to exact specifications 🙂

  28. Saira says:
    June 15, 2014 at 12:00 pm

    interesting article. I also found an article which helped me chose my color scheme. http://starscontest.com/blog/fathom-the-world-of-colorful-web-designing/

    • Neil Patel says:
      June 15, 2014 at 7:12 pm

      Saira, glad you liked it. Thanks for the feedback 🙂

  29. Jason says:
    April 25, 2014 at 11:40 pm

    I like Pink but I am wary it might turn some guys away lol. Jason

    • April 26, 2014 at 9:48 am

      True that. Jason, you’re smart to consider your audience. 🙂

    • neil says:
      April 26, 2014 at 1:53 pm

      Jason, there is never any harm in testing 🙂

  30. krish says:
    April 12, 2014 at 12:07 am

    Thanks for sharing … Right Now I am Using For my new Website Design

    • neil says:
      April 12, 2014 at 2:47 pm

      Krish, glad you found it helpful. Thanks for the feedback 🙂

    • April 13, 2014 at 8:48 am

      Great to hear it, Krish. Good luck!

  31. Stephanie says:
    January 26, 2014 at 6:18 am

    Thank you so much for this article. I want to change the colors on my review site but I was not sure what colors to choose or what the colors mean. I especially liked that you put the color numbers that helped me quite a bit.

  32. Usman says:
    January 15, 2014 at 2:27 am

    i need to know about color scheme?

  33. theresa says:
    January 5, 2014 at 1:01 am

    While I also love Cheese Survival Kits palette, yellow as a call to action color? Red is proven, among others to be powerful… yellow seems unbelievable. It would be cool if you actually talked more about conversion rates in relation to color – otherwise, this article is somewhat of a farce. I read it because the title implied that you will cover conversion, and, if anything you missed out on saying some important conversion tips throughout the descriptions. I like the article, am just saying I feel slightly tricked into reading.

    • January 5, 2014 at 9:57 am

      I’m sorry you feel that way, Theresa. This article is pretty straightforward… No tricks here. I assure you, any gaps are from length constraints and nothing else.

  34. Russ says:
    October 1, 2013 at 11:45 pm

    Expand your Color Palette to Engage Your Audience
    Customer Engagement is not easy to achieve. Boring web content is
    useless. Just like a new love, web content marketing enters through your
    eyes, so the first impression is extremely important.

  35. Sujit says:
    September 21, 2013 at 9:54 am

    Nice collection….

  36. Darren Foreman says:
    August 4, 2013 at 6:18 am

    Lake Nona is a good find but the Cheese Survival Kit is the winner. I need to use those colours.

    Thanks for the inspirational post, as I find choosing colours for a website is almost as hard as choosing fonts.

  37. July 31, 2013 at 9:06 am

    Nice information about different color schemes. Hope I will improve design of the sites.

  38. ravi pal says:
    July 27, 2013 at 2:04 am

    your website is awsome and illustrations you give us are also good …..

  39. Taylor Dean says:
    July 17, 2013 at 6:17 am

    great collection you here. i really love the first one!

  40. Brandon says:
    July 16, 2013 at 11:08 am

    Thanks for the inspiration! I also use http://colorschemedesigner.com for developing different color palettes.

  41. Gary says:
    May 4, 2013 at 7:39 pm

    Great design ideas!

  42. komal.bandi says:
    April 17, 2013 at 7:46 am

    nice examples.

  43. Ashley F says:
    April 15, 2013 at 4:23 am

    Great post Stephanie. I am also a huge fan of UI design, and the ways it can affect people. In fact, I just wrote something on that the other day, with s slightly different take.

    http://madlemmings.com/2013/04/13/improve-your-website-with-a-splash-of-color/

    Content is king, but there are so many other factors we need to consider, and color is high on that list.

  44. Rachel says:
    April 7, 2013 at 12:46 pm

    You might want to double check the first hex code on #7. Looks like it’s a repeat!

  45. November 28, 2012 at 12:23 pm

    Hi,
    could you tell me what colours work best for a photography website? I have heard dark surround.
    My site is http://www.photoblog.ie
    Thanks,
    Pa.

  46. November 23, 2012 at 10:43 am

    Very interesting info, although colour schemes have to be chose also in relation with the brand, product or business.

  47. Ricky says:
    September 7, 2012 at 11:02 am

    Even, I’m looking to enhance the engagement on my site. The real problem is related post section which is not encouraging enough clicks. Although, I have followed minimal design with less distraction, I feel that I’m missing something vital to invite the clicks from the users :(.
    It would be great if you can suggest something for me 🙂

    • Russ Henneberry says:
      September 7, 2012 at 11:35 am

      What is your Pageviews/Visit stat? What is your Avg Duration of Visit stat?

      • Ricky says:
        September 8, 2012 at 11:50 am

        It is measly 1.35 pageviews/visits. Average duration is around 1.5 🙁

  48. Victor @ Indian Bento says:
    July 11, 2012 at 4:11 pm

    Good article on color schemes for websites. We recently redesigned our website (www.indianbento.com for the foodies out there), and chose a two-color white-and-pink scheme. I had read about complementary color schemes (didactic, tridactic) in a book called Slideology. I wonder what color scheme would elicit the emotions we look to highlight – Natural, Healthy, Vibrant, Modern.

  49. Jack Sparrow says:
    July 11, 2012 at 3:09 pm

    So where is the data that proves that these color schemes increase engagement? Fail. This post doesn’t belong on Crazy Egg.

    • Bob says:
      September 9, 2012 at 8:50 am

      I agree with Jack. These are really nice color schemes, but they are nice because they are balanced. It would be nice to investigate the direct influence of certain colors on for example conversion rates. Not everything that looks beautiful, is functional.

      • Mike says:
        May 1, 2015 at 1:54 am

        You are both making the mistake that numbers are more important than impression.

        Numbers are useful but massively unreliable for determining 1 aspect of a site. There are so many reasons why someone may stay on a site.

        What we can do is test how we feel. For sure if we feel good looking at these sites, so will others. That will lead them to engage with the site.

        Don’t let numbers and analytcs cloud the obvious.

  50. Reeta Luthra | Paradox of Reality says:
    July 11, 2012 at 12:45 pm

    I’m experimenting with the colour scheme of my site and find myself looking for inspiration everywhere, even magazines and billboards.

    Love the first one but not sure if it’s because of the cakes…

    • Nico says:
      September 22, 2014 at 10:10 pm

      Yeah, the cakes look tasty. 😀 Normally I would not try out a color palette like #1 for my own webpage because the colors are very simple but seeing the screenshot of the actual webpage gives me inspiration how the colors can be applied.
      To try out a color palette on my own webpage Colorizr.js (http://analog-nico.github.io/colorizr/) is a great help. The tool allows you to play with the colors and see how they actually turn out.

      • September 23, 2014 at 10:56 am

        Cool! Thanks for sharing the link, Nico. That’s very helpful.

  51. Amir @ Blue Mile Media says:
    July 11, 2012 at 10:42 am

    Nice post! Something about #5 really speaks out.

    I love finding new color palettes to play around with and get new ideas. These are some great examples.

    -Amir

    • Russ Henneberry says:
      July 11, 2012 at 12:22 pm

      I like #5 as well. There are some nice ones here.

Show Me My Heatmap

Really easy to understand the user behavior with the new @CrazyEgg reports! @qubitTV #UX #prodmgmt

Francisco Mingote

@fmingote