{"id":118,"date":"2018-08-19T17:43:14","date_gmt":"2018-08-19T17:43:14","guid":{"rendered":"http:\/\/m.pebblerd.com\/illustrator\/?page_id=118"},"modified":"2018-08-19T17:43:14","modified_gmt":"2018-08-19T17:43:14","slug":"10-beautiful-websites-color","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/illustrator\/sources\/10-beautiful-websites-color\/","title":{"rendered":"10 Beautiful Websites Color"},"content":{"rendered":"
\n

10 Beautiful Website Color Palettes That Increase Engagement<\/h1>\n

\"\"<\/a><\/span>\u00a0by<\/em>\u00a0David Zheng<\/a><\/p>\n

Last updated on July 3rd, 2018<\/p>\n

\n

CRAZYEGG<\/a>\u00a0\u00bb\u00a0BLOG<\/a>\u00a0\u00bb\u00a0DESIGN<\/a>\u00a0\u00bb 10 BEAUTIFUL WEBSITE COLOR PALETTES THAT INCREASE ENGAGEMENT<\/p>\n<\/div>\n<\/div>\n

\n
\n

Is the color scheme you\u2019ve chosen for your website triggering a desired response?<\/p>\n

Does your website color palletes are good?<\/p>\n

Everyone has favorite colors they tend to gravitate towards when it comes to their work or otherwise.<\/p>\n

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.<\/p>\n

Good color choices take careful planning.<\/p>\n

It can influence how a visitor interprets what they see as much as a site\u2019s layout and typography \u2014 and when done well, it can have a positive impact on each visitor\u2019s evaluation of the brand as a whole.<\/p>\n

In this article, we\u2019ll 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\u2019 attention.<\/p>\n

See how to use our tools to know wich color is working better<\/a><\/p>\n

Why is color scheme so important?<\/h2>\n

Before we jump into the process of selecting a color scheme for your site, it\u2019s important to understand exactly why your color scheme matters so much.<\/p>\n

After all, you might be thinking that it\u2019s the content that really matters.<\/p>\n

And that\u2019s not untrue.<\/p>\n

\n

But your color scheme can have a major impact on how visitors interact with your content, and how they perceive your brand as a whole.<\/p>\n

<\/i>Click to tweet<\/span><\/span><\/a><\/p>\n<\/div>\n

So as you select the palette you use for your site, aim to accomplish the following five goals:<\/p>\n

1. Create brand recognition<\/h3>\n

Your site is essentially your company\u2019s home online.<\/p>\n

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.<\/p>\n

After all, many of your visitors won\u2019t be ready to make a purchase or other major conversion during their first visit \u2014 and they need to remember your company in order to come back and take those actions.<\/p>\n

Fortunately, color\u00a0increases brand recognition by 80%<\/a>.<\/p>\n

So if your company already has an established color scheme, it\u2019s essential to include this in your site\u2019s design. This will make it much easier for visitors to immediately connect it with other places they\u2019ve seen your brand.<\/p>\n

Plus, if your color scheme is consistent across your entire site, they\u2019ll know they\u2019ve come to the right place when they return, regardless of the exact page they land on.<\/p>\n

Beyond telling users who your company is, your web design also plays a major role in users\u2019 snap judgments about your brand.<\/p>\n

According to one Google study, users form their opinions on a website within\u00a050 milliseconds<\/a>.<\/p>\n

And not surprisingly, those opinions are primarily based on design.<\/p>\n

In fact, in one survey,\u00a046.1% of people<\/a>\u00a0said a company\u2019s web design is their top criteria for discerning that company\u2019s credibility, and\u00a042% of shoppers<\/a>\u00a0said they base their opinion of a website on design alone.<\/p>\n

\"color<\/a><\/p>\n

Of course, web design involves much more than just color.<\/p>\n

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\u2019s assessment of your company.<\/p>\n

2. Shape how visitors feel about your site<\/h3>\n

In another study on how site consumers\u2019 first impressions are formed,\u00a090% of initial assessments\u00a0<\/u><\/a>are based on color alone.<\/p>\n

To a certain extent, the reason for this is clear.<\/p>\n

After all, color is one of the easiest aspects of a page to \u201cunderstand.\u201d It can be assessed almost instantaneously and doesn\u2019t require visitors to evaluate copy or other messaging.<\/p>\n

But it\u2019s also important to consider the role that the\u00a0psychology of color<\/u><\/a>\u00a0plays in these snap judgments.<\/p>\n

\n

Colors have the power to elicit an emotional response, and different emotions are associated with different colors.<\/p>\n

<\/i>Click to tweet<\/span><\/span><\/a><\/p>\n<\/div>\n

Many companies take advantage of these connections, as illustrated by the\u00a0logos in the following chart<\/u><\/a>.<\/p>\n

\"color<\/a><\/p>\n

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.<\/p>\n

This ties directly into the \u201cpersonality\u201d you want your brand to have.<\/p>\n

In one study on brand personality, psychologist and Stanford professor Jennifer Aaker concluded that\u00a0five core dimensions<\/u><\/a>\u00a0play a role in a brand\u2019s personality:<\/p>\n

\"color<\/a><\/p>\n

Brands can sometimes mix traits, but for the most part, their \u201cpersonality\u201d is centered primarily on one. A company that sells camping gear, for example, would identify with \u201cruggedness,\u201d while a fashion brand would likely aim for \u201csophistication.\u201d<\/p>\n

And as you can see in the logo chart above, color can play a major role in showing consumers what your brand\u2019s personality is like.<\/p>\n

Although a view may not consciously realize that a company\u2019s red logo is designed to create a feeling of excitement, it can still do exactly that.<\/p>\n

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.<\/p>\n

For example, blue is often considered\u00a0the safest choice<\/u><\/a>. This is, in part, because it\u2019s the most common \u201cfavorite\u201d color among the majority of the population.<\/p>\n

In fact,\u00a057% of men<\/u><\/a>\u00a0and 35% of women say it\u2019s their favorite color.<\/p>\n

\"color<\/a><\/p>\n

So if you\u2019re 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.<\/p>\n

It\u2019s also worth noting that blue is also commonly associated with feelings of trust, authority, and reliability.<\/p>\n

But that doesn\u2019t mean it\u2019s the best choice for\u00a0every\u00a0<\/i>site. It all depends on the feeling you want to convey to your visitors.<\/p>\n

For example, if your brand centers on health and wellness,\u00a0green could be a better option<\/u><\/a>\u00a0for creating that association. And if you want to get your visitors excited and drive them to take action quickly,\u00a0red could be more effective<\/u><\/a>\u00a0for helping you accomplish that goal.<\/p>\n

So as you select colors for your site, consider the emotional reactions they might drive in your visitors.<\/p>\n

For example, if you\u2019re trying to create a sense of tranquility for your yoga studio\u2019s website, red might not be the best choice \u2014 and it\u2019s best to know that before you invest serious money into your design.<\/p>\n

3. Develop a sense of order<\/h3>\n

Aside from the emotional responses the individual colors you choose might evoke, it\u2019s also to consider the way the colors within your site interact with one another.<\/p>\n

The best way to do that is by looking at a few basic principles of\u00a0color theory<\/u><\/a>.<\/p>\n

\"color<\/a><\/p>\n

If you\u2019ve ever taken an art class or looked at any design-related resources, you\u2019ve probably seen something similar to the color wheel in the graphic above.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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

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.<\/p>\n

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\u00a0following three examples<\/u><\/a>:<\/p>\n

\"color<\/a><\/p>\n

A monochromatic color scheme falls on the opposite end of the spectrum from the previous type. As the name implies, it\u2019s made up of one main color, but the intensity and lightness of the shades vary.<\/p>\n

These palettes are some of the easiest to create and the \u201csafest\u201d to implement because varying shades of the same color rarely ever clash or feel too busy.<\/p>\n

So if you\u2019re going for a relatively simple look on your site, a monochromatic color scheme\u00a0like these three<\/u><\/a>\u00a0could work well for your brand:<\/p>\n

\"color<\/a><\/p>\n

Finally, a complementary palette falls somewhere between analogous and monochromatic schemes in terms of variety.<\/p>\n

It\u2019s 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\u2019t overwhelm visitors.<\/p>\n

If you want to include some variety in your color scheme without making your site appear too busy, a complementary color scheme\u00a0like one of these<\/u><\/a>\u00a0could be the perfect choice:<\/p>\n

\"color<\/a><\/p>\n

Of course, these three aren\u2019t the\u00a0only\u00a0<\/i>types of color schemes you can create. In fact, the best palette types vary based on who you ask.<\/p>\n

At Kissmetrics, for example, a\u00a0triadic color scheme<\/u><\/a>\u00a0is listed as one of the main options.<\/p>\n

\"color<\/a><\/p>\n

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.<\/p>\n

So as you select your colors, remember that the types listed above aren\u2019t definitive rules. They can give you a general idea of the overall feel you want your site to have, but they\u2019re by no means the only ways to create a palette that works for your brand.<\/p>\n

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.<\/p>\n

For example, take a look at this\u00a0screenshot from StudioPress:<\/u><\/a><\/p>\n

\"color<\/a><\/p>\n

Which elements on the page do you notice first?<\/p>\n

The red banner, buttons, and links, right?<\/p>\n

That\u2019s because the red accent color is used sparingly \u2014 so the elements that use it stand out as the most important on the page.<\/p>\n

The other content, in varying shades of gray, provides a complementary backdrop and makes for an easy reading experience. But it\u2019s clear even at first glance which elements are intended to stand out.<\/p>\n

The same holds true for\u00a0this example<\/u><\/a>\u00a0from Give Beyond Me.<\/p>\n

\"color<\/a><\/p>\n

Even though this color scheme is extremely different from (and much brighter than!) the previous StudioPress example, it\u2019s equally effective at singling out important elements.<\/p>\n

Once you\u2019ve selected your color scheme, you can use this same approach on all of your pages. And make sure to stay consistent throughout your site.<\/p>\n

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.<\/p>\n

This way, as visitors move through your pages, they\u2019ll always have a sense of how to navigate your content and find the most important elements.<\/p>\n

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\u2019ll be at driving users to convert.<\/p>\n

4. Make certain elements stand out<\/h3>\n

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

You can maximize this impact by keeping the\u00a0Isolation Effect<\/u><\/a>\u00a0in mind as you determine how to use your color scheme on your pages.<\/p>\n

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.<\/p>\n

For example, take a look at this landing page from T-Mobile:<\/p>\n

\"\"<\/a><\/p>\n

What\u2019s the first thing you\u2019d be inclined to click on this page?<\/p>\n

If you\u2019re like most people, the answer is probably that hot pink \u201cGet the details\u201d button.<\/p>\n

Of course, hot pink is naturally an attention-grabbing shade. But it\u2019s even\u00a0more\u00a0<\/i>attention-grabbing thanks to its contrast with the rest of the primarily white page.<\/p>\n

If the same element were placed on a light pink background, it wouldn\u2019t be nearly as striking.<\/p>\n

Now, take a look at this landing page example from\u00a0MailChimp<\/u><\/a>:<\/p>\n

\"color<\/a><\/p>\n

The bright blue button stands out because it clearly contrasts with the light orange background. Even if the gray text doesn\u2019t immediately catch visitors\u2019 attention, there\u2019s no way they\u2019ll miss the call to action itself.<\/p>\n

So if you know that you want to achieve this level of contrast, keep this in mind as you select your palette.<\/p>\n

Make sure that the colors you choose give you the ability to make certain calls to action\u00a0stand out on your pages<\/u><\/a>\u00a0without clashing with the rest of your design.<\/p>\n

This approach is in line with most consumers\u2019 preferences, too.<\/p>\n

In two studies,\u00a0Aesthetic Response to Color Combinations<\/u><\/a>\u00a0and\u00a0Consumer Preferences for Color Combinations<\/u><\/a>, researchers found that while consumers prefer color combinations with similar shades, they also favor palettes with a highly-contrasting accent color.<\/p>\n

The first study showed that \u201cpair preference and harmony both increase as hue similarity increases.\u201d But, \u201calthough 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.\u201d<\/p>\n

\n

The more your accent color contrasts with your background, the more your visitors will like your palette.<\/p>\n

<\/i>Click to tweet<\/span><\/span><\/a><\/p>\n<\/div>\n

In the second study, researchers found that, \u201cpeople 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.\u201d<\/p>\n

So although your accent color should have a strong contrast, it\u2019s okay \u2014 and even preferable \u2014 if the rest of your palette is made up of relatively similar shades.<\/p>\n

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.<\/p>\n

5. Simplify design-related decisions<\/h3>\n

When it comes to running a website or a business (or both!), it\u2019s always a good idea to look for ways to simplify basic processes.<\/p>\n

After all, the less time you spend on basic tasks, the more time you\u2019ll have to spend on processes and decisions that have a bigger impact on your success.<\/p>\n

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.<\/p>\n

This is especially true if you take the time to document your palette in an easy-to-use way\u00a0like this business did<\/u><\/a>:<\/p>\n

\"\"<\/a><\/p>\n

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.<\/p>\n

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.<\/p>\n

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\u00a0to use or test<\/a>, all of the HEX and RGB codes are already right in front of you.<\/p>\n

For more complex palettes, you can also create custom naming conventions that work for your team, like\u00a0UXPin did<\/u><\/a>.<\/p>\n

\"\"<\/a><\/p>\n

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 \u201cbase.\u201d<\/p>\n

So the colors in the top row are \u201cbase-blue,\u201d \u201cbase-gray,\u201d and so on.<\/p>\n

But below that, they also include varying shades of each color, with names that signify their difference from the base, like \u201cblue-darker-15\u201d and \u201cgray-lighter-25.\u201d<\/p>\n

Beyond providing plenty of options, this method also eliminates design inconsistencies.<\/p>\n

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\u2019s exact name.<\/p>\n

This way, even if they added hundreds \u2014 or even thousands \u2014 of pages, they could be confident that each one was made up of the same shades of their chosen colors.<\/p>\n

This provides a cohesive user experience and shows each visitor that they\u2019ve come to the right place, regardless of the page they initially land on.<\/p>\n

How many colors should you include?<\/h2>\n

One common question that site owners have about creating color palettes is how many colors they need to include.<\/p>\n

Unfortunately, there\u2019s no definitive answer to this question.<\/p>\n

That\u2019s because different designers and site owners have different opinions on what a visually appealing page looks like.<\/p>\n

Of course, we can all agree that a page with tons of contrasting, bright colors, like this example from\u00a0Pine-Sol\u2019s old site<\/u><\/a>, feels too busy.<\/p>\n

\"color<\/a><\/p>\n

But where exactly is that line drawn?<\/p>\n

And what\u2019s the minimum you can use?<\/p>\n

That\u2019s where things get a little more subjective.<\/p>\n

But in general, your palette should include different colors for three\u00a0main elements<\/u><\/a>:<\/p>\n