10 Beautiful Website Color Palettes That Increase Engagement

by David Zheng

Last updated on August 16th, 2018

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

Does your website color palletes are good?

Everyone has favorite colors they tend to gravitate towards when it comes to their work or otherwise.

But a skilled designer understands the importance of evaluating a color scheme based on the brand, the meanings of the colors, and the products or services being promoted.

Good color choices take careful planning.

It can influence how a visitor interprets what they see as much as a site’s layout and typography — and when done well, it can have a positive impact on each visitor’s evaluation of the brand as a whole.

In this article, we’ll take a look at why selecting the right colors for your site matters, as well as ten different color palettes from real sites that are effective in grabbing visitors’ attention.

See how to use our tools to know wich color is working better

Why is color scheme so important?

Before we jump into the process of selecting a color scheme for your site, it’s important to understand exactly why your color scheme matters so much.

After all, you might be thinking that it’s the content that really matters.

And that’s not untrue.

So as you select the palette you use for your site, aim to accomplish the following five goals:

1. Create brand recognition

Your site is essentially your company’s home online.

That means it needs to be an accurate representation of your brand. And beyond that, it needs to be memorable enough that users will return after their first visit.

After all, many of your visitors won’t be ready to make a purchase or other major conversion during their first visit — and they need to remember your company in order to come back and take those actions.

Fortunately, color increases brand recognition by 80%.

So if your company already has an established color scheme, it’s essential to include this in your site’s design. This will make it much easier for visitors to immediately connect it with other places they’ve seen your brand.

Plus, if your color scheme is consistent across your entire site, they’ll know they’ve come to the right place when they return, regardless of the exact page they land on.

Beyond telling users who your company is, your web design also plays a major role in users’ snap judgments about your brand.

According to one Google study, users form their opinions on a website within 50 milliseconds.

And not surprisingly, those opinions are primarily based on design.

In fact, in one survey, 46.1% of people said a company’s web design is their top criteria for discerning that company’s credibility, and 42% of shoppers said they base their opinion of a website on design alone.

color website palettes 1

Of course, web design involves much more than just color.

But given that color is one of the most obvious elements on your site, and one of the only ones a user can discern within those initial 50 milliseconds, your palette can make or break a user’s assessment of your company.

2. Shape how visitors feel about your site

In another study on how site consumers’ first impressions are formed, 90% of initial assessments are based on color alone.

To a certain extent, the reason for this is clear.

After all, color is one of the easiest aspects of a page to “understand.” It can be assessed almost instantaneously and doesn’t require visitors to evaluate copy or other messaging.

But it’s also important to consider the role that the psychology of color plays in these snap judgments.

Many companies take advantage of these connections, as illustrated by the logos in the following chart.

color website palettes

For example, brands who want to create a sense of creativity and imagination tend to incorporate purple into their imagery, while brands who want to establish a sense of balance and calm lean towards black and white.

This ties directly into the “personality” you want your brand to have.

In one study on brand personality, psychologist and Stanford professor Jennifer Aaker concluded that five core dimensions play a role in a brand’s personality:

color website palettes 3

Brands can sometimes mix traits, but for the most part, their “personality” is centered primarily on one. A company that sells camping gear, for example, would identify with “ruggedness,” while a fashion brand would likely aim for “sophistication.”

And as you can see in the logo chart above, color can play a major role in showing consumers what your brand’s personality is like.

Although a view may not consciously realize that a company’s red logo is designed to create a feeling of excitement, it can still do exactly that.

And while each color can serve to create a specific feeling or reaction, certain colors are better choices than others for the majority of brands and websites.

For example, blue is often considered the safest choice. This is, in part, because it’s the most common “favorite” color among the majority of the population.

In fact, 57% of men and 35% of women say it’s their favorite color.

color website palettes 4

So if you’re looking to appeal to a wide audience, this could be a great choice for your site. In fact, this might be why some of the most-visited sites today, like Facebook and Twitter, use it for their logos and branding.

It’s also worth noting that blue is also commonly associated with feelings of trust, authority, and reliability.

But that doesn’t mean it’s the best choice for every site. It all depends on the feeling you want to convey to your visitors.

For example, if your brand centers on health and wellness, green could be a better option for creating that association. And if you want to get your visitors excited and drive them to take action quickly, red could be more effective for helping you accomplish that goal.

So as you select colors for your site, consider the emotional reactions they might drive in your visitors.

For example, if you’re trying to create a sense of tranquility for your yoga studio’s website, red might not be the best choice — and it’s best to know that before you invest serious money into your design.

3. Develop a sense of order

Aside from the emotional responses the individual colors you choose might evoke, it’s also to consider the way the colors within your site interact with one another.

The best way to do that is by looking at a few basic principles of color theory.

color website palettes theory

If you’ve ever taken an art class or looked at any design-related resources, you’ve probably seen something similar to the color wheel in the graphic above.

The most common concept illustrated within this wheel is the relationship between primary colors (red, yellow, and blue), and the secondary and tertiary colors that are formed by mixing them together.

But beyond that, this wheel can help you create color harmony or a visually pleasing arrangement of colors. A harmonious palette can help you establish a sense of balance and order.

There are three widely-accepted types of color schemes you can use to establish this type of harmony: analogous, monochromatic, and complementary.

An analogous color scheme is made up of colors that fall side-by-side on the color wheel. This is one of the most difficult palettes to do well since the colors can easily overpower one another.

That being said, analogous color schemes are also some of the most vibrant. So if you want to create a colorful, visually interesting site, you might do well with a palette similar to the following three examples:

color website palettes 5

A monochromatic color scheme falls on the opposite end of the spectrum from the previous type. As the name implies, it’s made up of one main color, but the intensity and lightness of the shades vary.

These palettes are some of the easiest to create and the “safest” to implement because varying shades of the same color rarely ever clash or feel too busy.

So if you’re going for a relatively simple look on your site, a monochromatic color scheme like these three could work well for your brand:

color website palettes 5

Finally, a complementary palette falls somewhere between analogous and monochromatic schemes in terms of variety.

It’s composed of colors that lie directly opposite of each other on the color wheel. So while it involves more colors, those colors naturally complement each other and won’t overwhelm visitors.

If you want to include some variety in your color scheme without making your site appear too busy, a complementary color scheme like one of these could be the perfect choice:

color website palettes 6

Of course, these three aren’t the only types of color schemes you can create. In fact, the best palette types vary based on who you ask.

At Kissmetrics, for example, a triadic color scheme is listed as one of the main options.

color website palettes 6

This color scheme involves using three colors that are situated 120 degrees from one another on the color wheel. In the graphic above, those colors are orange, green, and purple.

So as you select your colors, remember that the types listed above aren’t definitive rules. They can give you a general idea of the overall feel you want your site to have, but they’re by no means the only ways to create a palette that works for your brand.

Regardless of the type of palette you go with, you can use it to create a hierarchy of the most important content on each of your pages.

For example, take a look at this screenshot from StudioPress:

color website palettes 7

Which elements on the page do you notice first?

The red banner, buttons, and links, right?

That’s because the red accent color is used sparingly — so the elements that use it stand out as the most important on the page.

The other content, in varying shades of gray, provides a complementary backdrop and makes for an easy reading experience. But it’s clear even at first glance which elements are intended to stand out.

The same holds true for this example from Give Beyond Me.

color website palettes 8

Even though this color scheme is extremely different from (and much brighter than!) the previous StudioPress example, it’s equally effective at singling out important elements.

Once you’ve selected your color scheme, you can use this same approach on all of your pages. And make sure to stay consistent throughout your site.

Use certain colors for your body sections and copy, slightly different colors for your navigational elements, and standout shades for your calls to action and other important buttons and links.

This way, as visitors move through your pages, they’ll always have a sense of how to navigate your content and find the most important elements.

Creating a sense of hierarchy makes it easy for users to interact with your site the way you want them to. And the more effective you become at accomplishing this goal, the more successful you’ll be at driving users to convert.

4. Make certain elements stand out

As I mentioned in the previous section, a defined color website palette can be helpful for signifying that certain elements are important.

You can maximize this impact by keeping the Isolation Effect in mind as you determine how to use your color scheme on your pages.

The general idea behind this psychological principle is that the more an item stands out, the more likely it is to be noticed and remembered.

For example, take a look at this landing page from T-Mobile:

What’s the first thing you’d be inclined to click on this page?

If you’re like most people, the answer is probably that hot pink “Get the details” button.

Of course, hot pink is naturally an attention-grabbing shade. But it’s even more attention-grabbing thanks to its contrast with the rest of the primarily white page.

If the same element were placed on a light pink background, it wouldn’t be nearly as striking.

Now, take a look at this landing page example from MailChimp:

color website palettes example mailchip

The bright blue button stands out because it clearly contrasts with the light orange background. Even if the gray text doesn’t immediately catch visitors’ attention, there’s no way they’ll miss the call to action itself.

So if you know that you want to achieve this level of contrast, keep this in mind as you select your palette.

Make sure that the colors you choose give you the ability to make certain calls to action stand out on your pages without clashing with the rest of your design.

This approach is in line with most consumers’ preferences, too.

In two studies, Aesthetic Response to Color Combinations and Consumer Preferences for Color Combinations, researchers found that while consumers prefer color combinations with similar shades, they also favor palettes with a highly-contrasting accent color.

The first study showed that “pair preference and harmony both increase as hue similarity increases.” But, “although pairs with highly contrastive hues are generally judged to be neither preferable nor harmonious, figural color preference ratings increase as hue contrast with the background increases.”

In the second study, researchers found that, “people generally like to combine colors that are relatively close or exactly match, with the exception that some people highlight one signature product component by using contrastive color.”

So although your accent color should have a strong contrast, it’s okay — and even preferable — if the rest of your palette is made up of relatively similar shades.

This means that creating a palette that includes one strong, attention-grabbing accent color is not only effective for isolating certain elements but is also a great way to create a combination that many of your visitors will like.

5. Simplify design-related decisions

When it comes to running a website or a business (or both!), it’s always a good idea to look for ways to simplify basic processes.

After all, the less time you spend on basic tasks, the more time you’ll have to spend on processes and decisions that have a bigger impact on your success.

And establishing a palette is a great way to cut down on the time it takes to create new pages. When you have an established color scheme, you make basic design choices much easier, both for yourself and for your designers and developers.

This is especially true if you take the time to document your palette in an easy-to-use way like this business did:

When you create a user-friendly document of your palette, you create an at-a-glance resource with all of the possible options for each element.

This way, if you (or your designers) are having trouble determining which color to use for a CTA button, you can simply reference the document for a complete list of your options.

So instead of racking your brain for all of the various possibilities, you can choose from a pre-set list of colors. And once you select a few to use or test, all of the HEX and RGB codes are already right in front of you.

For more complex palettes, you can also create custom naming conventions that work for your team, like UXPin did.

In this case, each of the colors at the top is the main shade the brand wants to use on their site. To keep things simple, they refer to these colors with the prefix “base.”

So the colors in the top row are “base-blue,” “base-gray,” and so on.

But below that, they also include varying shades of each color, with names that signify their difference from the base, like “blue-darker-15” and “gray-lighter-25.”

Beyond providing plenty of options, this method also eliminates design inconsistencies.

For example, if someone on the marketing team wanted to incorporate a lighter shade of blue into a landing page than the base color, they could easily explain this to the design team by asking for the color’s exact name.

This way, even if they added hundreds — or even thousands — of pages, they could be confident that each one was made up of the same shades of their chosen colors.

This provides a cohesive user experience and shows each visitor that they’ve come to the right place, regardless of the page they initially land on.

How many colors should you include?

One common question that site owners have about creating color palettes is how many colors they need to include.

Unfortunately, there’s no definitive answer to this question.

That’s because different designers and site owners have different opinions on what a visually appealing page looks like.

Of course, we can all agree that a page with tons of contrasting, bright colors, like this example from Pine-Sol’s old site, feels too busy.

color website palettes pine sol

But where exactly is that line drawn?

And what’s the minimum you can use?

That’s where things get a little more subjective.

But in general, your palette should include different colors for three main elements:

  • Background. This will be the most-used color on your site and will set the general tone and feel.
  • Base. You can use this color to break up the background and create different sections within your pages.
  • Accent. This will be your least-used color in terms of the space it takes up on your site, but will be used for some of your most important elements and give your pages personality.

These elements are all important regardless of the type of palette you choose.

To illustrate how this can work, let’s take a look at what a site might look like using the analogous, complementary, and monochromatic examples from above.

Using the first analogous palette, there are a few ways you could design a page:

color website palette background color

Both of these options are built from the same exact palette but create very different overall looks. And although opinions on whether either “work” or not are subjective, it’s easy to see that both break up the page and call attention to the accent-color element.

With the palettes from the complementary example, then, your options might look something like this:

Again, you might like these options, or you might hate them — but in a general sense, they accomplish what they’re designed to do, which is provide a user-friendly experience.

Using one of the monochromatic schemes, your pages would turn out more subdued, like these:

These pages are much simpler than the previous examples. But the fact that they don’t have quite as much variety doesn’t render them any less effective at making up easy-to-use pages.

So as you design your site, you should aim for a minimum of three main colors.

From there, it’s essentially a matter of taste and what works best for your company’s brand.

In addition to the number of colors you should use, there are also varying opinions on how prominently each color within your palette should feature on your site.

For example, some web designers prefer to follow the standard “60-30-10 rule” that was originally popularized by interior designers.

This design approach involves three different colors that take up varying portions of a space.

  • 60%: Primary color. This color should create the overall unifying theme of the design.
  • 30%: Contrast color. This shade should contrast with the primary color to create visual interest.
  • 10%: Accent color. This should complement either your primary or secondary color and stand out in the space.

When applied in a home, this principle creates a result that looks something like this:

color website palette 10

That said, if you opt to use this rule as a starting point, it’s important to remember that you’re choosing colors for a site, not a room in a home.

In many cases, this means that you can make bolder choices. For example, while you might not want to use the following palette in your kitchen, it could make a great landing page:

That’s because when an interior designer selects colors, they don’t need to worry about drawing attention to certain parts of a room, so the contrast isn’t an essential convert.

While some homeowners might prefer “pops of color,” they aren’t necessary to create a cohesive feel in a room.

As a result, a room palette might look something like this:

This shades of blue and green complement each other nicely, and could make for a visually pleasing living room or bedroom.

But as for a site?

They’re probably not ideal.

Consider a page with that first shade of blue as the background. Which color would you use for the body copy on that page?

That’s a tough choice — because none of those colors would work.

They’re all too similar to the background color, which would make for an extremely poor reading experience.

For example, take a look at the varying levels of contrast in the following blocks of text:

color website palettes high

The “Low” text is technically readable. But reading it isn’t a pleasant experience — and that’s what you’d end up with if you used a palette similar to the one we just looked at.

In fact, I wouldn’t expect many users to stick around longer than a few seconds on a page with that palette.

But does that mean a site made up of blues and greens can’t be done well?

Of course not!

Just take a look at this adjusted palette based on that same shade of blue, with additional blues and greens:

The biggest difference here is the amount of contrast between the lightest and darkest shades.

Although the basic colors didn’t change, this palette would result in a much more user-friendly site, because the text would be a lot easier to read.

So if you decide to base your choices on the 60-30-10 rule, remember: you’re designing a website, not a home.

And beyond that, it’s important to note that these percentages aren’t definitive rules.

You can add colors and adjust proportions depending on your design preferences, as well as your site’s complexity.

After all, a page with multiple sections, various calls to action, and different navigation bars will likely require much more variety in color than a simple, straightforward landing page.

So again, it comes down to what works best for your site.

At this point, you’ve likely realized that while there are a few general best practices for creating a color palette, your options are virtually limitless.

And while that means you have tons of freedom over your design, it can also make it difficult to identify a logical starting point.

That’s a common issue for many businesses who are launching a new site or a redesign — which is why we’ve put together a list of ten palettes you can use as inspiration.

So whether your company is a bakery, a SaaS company, or a retailer, you should be able to find something here that helps you in the design process.

Let’s get started:

1. Mea Cuppa

Our first example comes from bakery and coffee bar Mea Cuppa

The colors used in this palette are:

  • #191919
  • #DFE2DB
  • #FFF056

This color scheme is primarily neutral, with black and gray giving it a classy and elegant feel. But the yellow pop of color lightens the mood and lends a more “fun” tone.

Overall, this creates an appropriate tone for an upscale mobile cupcake bakery.

The lesson here is that even one contrasting color can elevate a minimal color scheme and make for a unique, impactful site.

2. The Big Top

Next, let’s take a look at recruiting and career site, The Big Top:

The colors used in this palette are:

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

This is a great example of an analogous color scheme, with varying shades of red and pink making up the bulk of the page.

Color schemes like this are among the simplest to create, as they can be adjusted by manipulating their tone, shade, and tint. In doing so, you create light 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

Our third example comes from Twitter visualization tool Tori’s Eye.

The colors used in this palette are:

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

This is a great example of a mostly monochromatic color scheme. Here, we see the effects of a simple yet powerful color palette centered around shades of green.

This color scheme is often easy to pull off, as one shade of a color will almost always work with another shade of the same color.

If you’re looking to create a similarly cohesive feel for your site, aim to reduce the number of unique colors you use, and maximize the number of shades you use for each.

In this example, Tori’s Eye also incorporates pops of blue and red. But one of these colors could be eliminated to make the page even more harmonious.

4. Event Finds

Next, take a look at this page from event-planning tool Event Finds:

The colors used in this palette are:

  • #558C89
  • #74AFAD
  • #D9853B

This is another almost monochromatic site, and you can see the effect of using many tints of one hue in the above screenshot.

Event Finds also achieves striking contrast by using a bright orange color for important call to action buttons. Given that orange and blue are directly across from one another on the color wheel, it’s no surprise that this combination works well on the page.

5. Cheese Survival Kit

The company Cheese Survival Kit sells exactly what you’d imagine: kits with “essentials” like cheese boards, honey, crackers, jam, and cheese knives.

The colors used in this palette are:

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

For many websites, the logo is designed first, and the color scheme is dictated from there. This is evident in the Cheese Survival Kit website, which is centered around the logo’s shades of gray and red.

These contrasting colors also make for an impactful visual impression.

From there, the yellow accent color nicely highlights important details. It’s used sparingly, as bright colors typically should be, and as a result, it doesn’t overwhelm visitors.

A splash of color here or there will draw the visitor in. But when used everywhere, it loses its impact — and the Cheese Survival Kit site expertly avoids this mistake.

6. Nordic Ruby

Our next example is Nordic Ruby, a conference and spa retreat for designers and developers.

The colors used in this palette are:

  • #7D1935
  • #4A96AD
  • #F5F3EE

This site uses a neutral background, along with highly-saturated colors for a large chunk of the elements.

The plum color is featured prominently in the header, as well as in lower sections, but is kept in check by the light gray background. The teal shade also serves as a nice contrast, calling attention to important calls to action like the “Register Now!” button.

7. Lake Nona

Lake Nona is a planned community of neighborhoods, schools, recreational facilities, retail centers, and entertainment venues.

The colors used in this palette are:

  • #E44424
  • #67BCDB
  • #A2AB58

Considering that the community places emphasis on a healthy, sustainable lifestyle, it makes sense that they’d go for a palette that evokes a fresh, natural feeling.

The heavy use of shades of green subtly highlights their prioritization of wellness, and the blue elements complement those shades nicely.

The red accent, then, livens things up and keeps the page from feeling at all dull.

8. LemonStand

LemonStand is eCommerce platform designed to help web developers, agencies, and brands create customizable online stores.

The colors used in this palette are:

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

This website features a triadic color scheme, with blue being the primary color. Shades of blue and gray make up the bulk of the page and establish a sense of professionalism.

The pops of yellow and red, then, are extremely effective in creating contrast, and the yellow buttons in particular direct visitors to important calls to action.

Again, because these bright colors are used sparingly, they have much more potential to elicit an action than those that make up more elements on a page.

9. Mint

Next, let’s take a look at this landing page from personal finance app Mint.

The colors used in this palette are:

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

As a personal finance software provider, Mint needs to establish a sense of professionalism to earn the trust of its audience.

In this case, they were able to do just that — while using fresh accents of green and orange to prevent their brand from coming across as boring.

The use of subtle gradients and shadows gives the page an extra “polish,” and the accents are noticeable enough to inspire desired actions, without overwhelming visitors.

10. Odopod

Our final example comes from digital design agency Odopod.

The colors used in this palette are:

    • #191919
    • #DF3D82
    • #FFFFFF

Leave it to a design agency to create one of the boldest examples on our list.

Pink is an uncommon background color choice — and for a good reason. When done poorly, it can easily be overwhelming.

But that doesn’t mean it can’t be used tastefully, as this site illustrates. And because it isn’t an obvious choice, it can immediately differentiate a brand and make it stand out from its competitors.

The trick to making it work is simply reducing the number of other colors in the palette, and pairing the strong background with subdued colors for the rest of the page.

In this case, Odopod chose to pair the hot pink background with largely black and white elements. The result is a site that feels extremely unique, without being garish or unprofessional.


Choosing the right website color palette for your web design project takes time and skill, as well as a strong understanding of the particular product or service you’re marketing.

And above all, your color scheme needs to resonate with your target audience.

Aim to select shades that will convey the feelings you want potential customers to have towards your brand, and you’ll be much more successful in designing a site that will help you reach your marketing goals. Start A/B testing your pages to find out what’s working and what’s not.

What factors do you consider when selecting a color scheme?



Get updates on new articles, webinars and other opportunities:

David Zheng

David Zheng is the Editor in Chief at CrazyEgg, Founder of GrowthWit and WiseMerchant and the Head of Growth at BuildFire. He helps influencers, ecommerce brands, venture backed startups, and Fortune 500 companies grow their traffic and revenue online.


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.


Your email address will not be published.

  1. Tilak says:
    September 17, 2017 at 5:00 am

    Thanks for valuable information, I am definitely using this for my website

  2. Urvashi says:
    August 31, 2017 at 1:50 am

    I was looking for some color ideas for my new eCommerce site. I have found some really nice ideas here and among them NordicRuby is my favorite.

  3. Walter Lewis says:
    April 16, 2017 at 2:33 am

    Thanks for this post really helpful for building a color pallet, which I tend to struggle with…

  4. Bozdar says:
    November 9, 2016 at 7:27 am

    I was matching colours on my blog and then I found your article. It helped me a lot to mix and match some colours. Thank you very much. 🙂

  5. 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

  6. 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

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

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

  8. 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.

  9. 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.

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

    I will try the first one , looks cool!

  11. 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.

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

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

  13. 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.

  14. 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.

  15. 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.

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

    any idea for a construction company?

  17. 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.

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

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

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

    nice post. i totally liked it.

    • Kathryn Aragon says:
      June 15, 2015 at 3:54 pm

      Thanks, Amit!

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

    very nice!

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

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

    • Kathryn Aragon says:
      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.

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

    Nice, thanks!

    • Kathryn Aragon says:
      April 18, 2015 at 10:52 pm

      You bet, Soffian.

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

    Very good collection, thanks a lot..

    • Kathryn Aragon says:
      April 4, 2015 at 10:06 am

      You bet.

  24. kataskevi istoselidon says:
    March 28, 2015 at 10:35 am

    Thanks for these great examples

    • Kathryn Aragon says:
      March 28, 2015 at 2:03 pm

      Glad you liked them, Kataskevi.

  25. 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

    • Kathryn Aragon says:
      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.

  26. Abu bakar sediq says:
    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.

  27. 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!

    • Kathryn Aragon says:
      January 1, 2015 at 2:11 pm

      Glad to hear it!

  28. 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.

    • Kathryn Aragon says:
      December 18, 2014 at 10:22 am

      Glad you liked it Prashant!

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

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

    • Kathryn Aragon says:
      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.

  30. 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.

  31. 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 🙂

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

    interesting article. I also found an article which helped me chose my color scheme. 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 🙂

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

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

    • Kathryn Aragon says:
      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 🙂

  34. 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 🙂

    • Kathryn Aragon says:
      April 13, 2014 at 8:48 am

      Great to hear it, Krish. Good luck!

  35. 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.

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

    i need to know about color scheme?

  37. 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.

    • Kathryn Aragon says:
      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.

  38. 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.

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

    Nice collection….

  40. 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.

  41. Dhruv R Thaker says:
    July 31, 2013 at 9:06 am

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

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

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

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

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

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

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

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

    Great design ideas!

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

    nice examples.

  47. 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.


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

  48. 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!

    • Kathryn Aragon says:
      April 7, 2013 at 6:05 pm

      Good catch, Rachel. All fixed. 🙂

  49. Patrick Dinneen says:
    November 28, 2012 at 12:23 pm

    could you tell me what colours work best for a photography website? I have heard dark surround.
    My site is photoblog.ie

  50. Visueel Advertising says:
    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.

  51. 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 🙁

  52. 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.

  53. 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.

        • Kathryn Aragon says:
          May 1, 2015 at 8:24 am

          Bravo, Mike.

  54. 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 (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.

      • Kathryn Aragon says:
        September 23, 2014 at 10:56 am

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

  55. 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.


    • 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

@AndreaFine @CrazyEgg is an awesome tool! #semrushchat

Netvantage Marketing


What makes people leave your website?