26 inspiring color schemes for shops, landing pages, personal sites
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.
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.
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.
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:
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:
Retail sale of food
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:
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:
internet and mobile service providers
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.
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.
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.
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.
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 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 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
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 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
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
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 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 uses highly contrasting colors to highlight the functionality of your application.
19. Highlight color
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 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 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 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
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
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 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 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 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 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.
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 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.
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.
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.