0
()

When someone opens your site for the first time – colors play a very important role in the way he thinks. Between 62-90% of the user’s first impression is based on color alone, according to one study .

In this post we will present 25+ fantastic color schemes for landing pages, online stores and personal sites to choose your own without wasting time.

How to choose colors for your site

An adult’s eyes can distinguish over 1,000,000 shades of color. How to choose the right scheme quickly and efficiently with so many options? This is a challenge that all web designers face when trying to create a color scheme or palette for their design.

With such a choice you can use all shades and tones individually and choose the most appropriate. You need to reduce the number of possibilities. The best way to do this is to focus on the base color.

And perhaps the easiest way to do this is to look at the most popular choices in your industry. It can help you in choosing and if you learn something about the psychology of colors and how the base color can work with your company or product.

Choice of color according to the industry

Different companies and products choose different colors to identify their brand. But why? Color is not only a more efficient way to attract the user’s attention. It is a way to communicate with him, on an emotional and even subconscious level.

Прочети още  Twitter or Facebook for your business?

In a sense, it’s a way to start building your brand in the mind of the user without using a single word. The colors do not tell the same story and the most popular basic colors for the brand depend on the industry.

colors by industry

Brand colors by industry (Source: towergateinsurance.co.uk)

What emotion do you want your customers to associate with your brand, product or service?

This is the main question you need to ask yourself to determine the basic color of your scheme.

Blue promotes:

Trust.

In industries where trust is the most important factor, both professionalism and reliability are key selling factors – blue is often used as the primary color.

It is not associated with spontaneity or emotion. Instead, it initiates a calm and logical decision-making process.

It is most popular in the following industries:

  • Banking
  • Airlines
  • Communications
  • Finance
  • Electrical utilities
  • Heavy equipment
  • Home improvement
  • Hotels
  • Pharmacy

Red promotes:

Attention and passion

Industries that rely on emotions and impulsive decisions (such as restaurants and fast food restaurants) often use red as their primary color. It is believed to stimulate hunger, and is a favorite choice among international brands.

It is most popular in the following industries:

  • Restaurants
  • Drinks
  • Retail sale of food
  • Real Estate
  • Clothing

Green promotes:

A sense of vitality.

Most people associate the color green with nature, plants and habitats. Industries that rely on the promise of better prosperity or products with natural ingredients use green.

The most popular choice is in the following industries:

  • food and drinks
  • department stores
  • Real Estate
  • chemicals
Прочети още  Web design and SEO - everything designers need to know

Black: confidence, sophistication

While some companies choose black because they feel it is a “safe” color, it is actually a major choice in industries where customer confidence and sophistication are key factors.

It is most popular in the following industries:

  • clothing
  • accessories
  • internet and mobile service providers
  • department stores
  • hotels

Do not blindly follow your taste and instincts, think about color theory and color psychology before making a decision.

How many colors should you use in the scheme of a site?

For a standard site, you can combine three to seven separate colors for a scheme.

But how many different schemes should you use for a site?

It depends on the individual characteristics and goals of your site. If it is a company site or blog dedicated to only one brand / product or company, then you should use only one scheme.

On the other hand, if your site is an online store – with different brands, for example, you can use different schemes for different products to provoke different emotional reactions.

The problem with using many palettes is that you will complicate things for each content creator, you will increase the chance of errors and complications.

When choosing a color scheme for your site – it is important to avoid overthinking and spending weeks over the task. The choice is certainly important, but the choice of colors alone will not bring more traffic to your site, or be the only thing that will affect the conversion.

26 examples of great color schemes

We searched the web to find great examples of color schemes and even categorized them to make it easier for you to find inspiration from sites like yours.

Прочети още  How to safely upgrade WordPress (Beginner's Guide)

Super schemes for online stores

Below you will find excellent examples of color schemes that suit the brand and industry.

1. Skin care products: Bright and playful

Bliss

Bliss

Here the colors are bright and playful, perfectly accompanying the company’s message of inner happiness.

2. Clothing brand: Clear and concise

Le Bonnet

Le Bonnet

This company focuses on small but intense colors, with a pale beige background to separate the products from each other.

3. Clothing site: simplicity

Revise

Revise Concept

This site uses simple colors and white space to highlight the clothes themselves.

This (minimalist) approach is a great alternative for online stores that want their products to speak for themselves instead of relying on design to do so.

4. Cutlery: reliability and professionalism

My Tableware

My Tableware

This is a German online store for cutlery and custom dishes. The site uses a simple scheme of dark blue, light brown and gray to promote a sense of professionalism and reliability, with hints of sophistication.

5. Chewing gum: natural and impulsive

Neuro

Neuro

This is a brand for caffeinated chewing gum and mints, and the purpose of the design is to help the user focus. Uses a mix of softer colors such as turquoise, light blue and beige to hint at the use of natural ingredients.

There is also an appeal to emotions and impulsive decision-making with red and orange, an excellent choice of color-accent.

6. Watches: sophistication and luxury

Prime Ambassador

Prime Ambassador

Swedish brand watches with a classy online store, with a design, oriented to highlight the products. The color combinations of golden brown and dark gray background with wooden accents bring a sense of sophistication and luxury.

These colors are perfect for promoting unique products, but would not be in place on a site selling everyday goods.

7. Pants: Creative and affordable

Alday

Alday

The site is creative and playful, with bright colors and combinations that greet the user and potential customer.

8. Fruit snacks: Elegant and emphasizing colors

Madies

Madies

These are producers of frozen and dried fruit snacks, which are aimed at fashion-oriented consumers, rather than at the mass sale of dried fruits.

The black background and yellow accents emphasize the simplicity of the design, emphasizing the elegant product.

9. Custom jeans: It’s alive!

Unspun

Unspun

They use bright red and orange to bring life to the site. Perfect for communication with the user who leads an active and colorful lifestyle.

Schemes for personal sites

Here is a selection of examples from personal or travel sites.

10. Creative simplicity

madeleina dalla

Madeleine Dalla

A photographer from New York, with a great sense of web design (and an impressive portfolio).

By subtracting the colors from the equation, she emphasizes the vivid colors of her photos from selected projects. It uses the lack of color as much as the color itself in the photographs.

11. Gray range with a splash

ali rifaiAli Rifai is a creative art director and shows it in the concept of his site. With the use of gray and only one color for accent, it draws attention to the right keywords and critical parts of the design.

12. In one with nature

ifly 50

iFly 50 is an online magazine run by KLM to celebrate its 50th anniversary.

With an emphasis on blue in the sky and water, and green in the grass and forest – the design makes the user feel in one with nature – a wonderful approach to any site oriented to nature.

13. Clean and professional

benediktas

The site of Benediktas Gylys is among the masterpieces in clean design. There is no chaos and this also applies to the choice of colors.

The main purple emphasizes professionalism, and although there are few colors – they emphasize the critical elements and illustrations.

14. Pragmatic colors

BucketListly

BucketListly uses colors pragmatically, with yellow highlights keywords, CTA and countries visited so far.

You can see how much value you can get with just one color when the design is combined with white spaces and the right concept.

15. Elegant simplicity

lars franzen

The cover photo on the site of Lars Franzen uses a dark background to bring to the fore the individuality of the people in the portrait.

16. Futuristic overlay

Dot Lung

The personal site of Dot Lung maximizes the simple color palette with overlays and clean background graphics. The purple from the background creates a coherent experience from page to page.

17. Light and dark

love for island

Love for Iceland is a great example of how the colors in the selected photo can create a mood. The bright blue of the pure ice, illuminated by the sunlight in the upper left corner to the darkness at the lower end, creates an adventurous mood for the visitor.

Color schemes for landing pages

Below we have chosen different landing pages because of the unique or effective color schemes.

18. Sharp contrasts

zenly

Zenly uses highly contrasting colors to highlight the functionality of your application.

19. Highlight color

slack

Slack use a tried and tested color scheme, with colors used to highlight important actions and other essential elements. You don’t have to complicate the design of the landing page, and this applies to colors as well.

20. Vivid colors that bring emotions

spotify

Spotify use vibrant colors to evoke emotions in the user on their otherwise simple landing page. The colors tell a whole story, and the emphasis is more on them than on the text above the CTA button.

21. Color contrasts create order in chaos

autonomy

Autonomy they use colors and contrasts to create order in their otherwise chaotic, animated design. Yellow stands out from the background and other elements.

22. An ensemble of futuristic colors

bugsnag

Bugsnag use a collection of futuristic colors that bring the feel of modern technology in an otherwise flat design. The combination of colors and shapes makes the consumer feel in 2020 and thus feel the company as avant-garde.

23. Live with color

connect homes

Landing page of Connect Homes has a combination of vivid and bright colors. The palette is a great balance that brings a modern feel.

24. Conservative colors and modern design

plink

Landing page of Plink is based on relatively conservative shades of dark blue, but balances with playful and fun animation and design in general.

25. Natural vitality

travelshift

Travelshift rely heavily on green to give a feeling of nature and vitality. Instead of highlighting key content with a bright color like orange, for example, green functions as a promise of rejuvenation.

26. Bright colors for hope

swab the world

Swab the World use a color scheme of bright and contrasting colors to give a sense of hope. This is a perfect combination for an NGO page.

Color scheme generators

If you do not want to manually select the appropriate colors, gradients and patterns or palettes, you can use online tools. There are many generators. Here are some of the best options:

Colormind

colormind pallete generator

Colormind is a generator powered by artificial intelligence, with which you can generate colors for sites, templates and more. The only inconvenience is that you can’t set a base color, and you have to randomly generate palettes every time. It can also extract colors from any image you want.

Coolors.co

Coolors.co

Coolors.co is a web and mobile application that helps you generate palettes from scratch. There are alternative shades for each color and other settings to help you make a decision.

Paletton

paletton generator

Instead of generating random schemas, Paletton gives you complete control over the palette and which colors to choose as primary. You can also choose the type of palette – whether they are two, three colors or more.

ColorSpace

color space generator

ColorSpace generates palettes depending on the primary color you enter. There is a wide range of style options.

Color blindness: How to choose a palette that is oriented to people with color blindness

It is important to consider how different people see colors when choosing their color scheme.

color blindness

Different types of color blindness

We don’t all see colors: standard. ” There are three different types of color blindness: deuteranopia, protanopia, and tritanopia.

Red-green color blindness (deuteranopia and protanopia) is the most common form. It affects an average of 1 in 12 people in northern Europe. With such frequency, it is good to think when choosing your colors.

Blue-yellow blindness is less common and affects men and women equally.

How to choose a palette, even for people with color blindness

As red-green blindness is more common, it is good to consider it first. Since these people can’t tell the difference between red, green and purple, but see different shades of yellow and blue, it’s a good idea to avoid contrasting colors that look too uniform:

  • Do not contrast green with yellow and vice versa.
  • Do not contrast yellow with red or orange.
  • Do not contrast purple with similar shades of blue.

When choosing basic colors for your logo or design – it is good to think about what message these colors will convey to people with color blindness.

Summary

The human eye can distinguish millions of different shades of colors, but you do not have to choose from all the options to choose a color scheme for your site.

By focusing on your brand and your customers – you can reduce the choice of basic colors. Once you do – you can rely on online generators to complete the palette, or choose the right colors, depending on your preferences or examples.

With the right approach, creating a schematic for your site to use as a starting point in the design process can be easily achieved.

Полезен ли ви беше този материал?

Кликнете на звездичка, за да оцените.

Средна оценка / 5. Брой гласове:

Все още няма гласове.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.