Many articles have been written about color theory and its meaning. Color plays an important role in design and can even influence people's behavior at times. Any web designer knows that the right color scheme for a site can affect its popularity, as web pages designed according to color theory make a good impression on users.
However, many designers, working on the selection of color combinations, often forget that not all people perceive colors in the same way. There are a small number of people who are colorblind, so when designing your site, you need to be mindful of colorblind users. Indeed, sometimes a very beautifully designed site may simply not work for this category of users, as they will not be able to navigate it. And this is really a problem: among men, the percentage of color blind people can reach 8%, and among women - about 1%. So it's better not to risk losing 9% of the audience and choose the color scheme of the site so that it is normally perceived by all people, including color blind people.
COLOR THEORY CAN IMPROVE SITE ACCESSIBILITY
The accessibility of a site is of great importance, as it directly affects its popularity. When it comes to accessibility, it usually means simple and clear interface. But the color scheme also affects the user experience. And if you create a design that does not take into account the needs of people with various visual impairments, then this experience will be negative, which is unacceptable. There are many reasons why you should carefully work on the color accessibility of the site:
- The right color scheme can be a competitive advantage. If the design of the site is colorblind friendly, and there is no competitor’s site, then you can attract an additional audience to your side
- Websites with accessible colors can rank higher in search engines
- In some countries, poor site design can lead to legal action, as such a site does not provide equal opportunities for people with visual impairments
- An ethical point is also important: color-blind people cannot use some sites in full, and this is a big problem for them. Therefore, you should always remember about UX
Despite all of the above, making a website accessible to people who can't distinguish certain colors isn't all that difficult. You just need to correctly use color theory and do not forget about the contrast of important elements.
HOW TO CREATE A HIGH ACCESSIBILITY WEBSITE
Of course, creating a website that will be convenient for absolutely all categories of users is an impossible task. And first of all, because it is difficult to determine exactly how color-blind people see this or that color. But that's not all: people who are not colorblind also see colors a little differently. A lot of research has been done to find out exactly how colors are distinguished by people with different types color blindness. But these studies did not give any exact results, so the question of how exactly a color blind person sees is still open.
Starting work on the design of the site, you need to immediately take care of the color visibility of navigation elements and content. There are many ways to do this, and the very first one is to use contrasting colors for backgrounds and important design elements. For example, using black text on a white background will make content accessible to all users. But black and white are not all "safe" colors - there are many more. You just need to make sure that links, buttons, and other design elements are visible and stand out from the background.
WHICH COLORS SHOULD I USE?
The very first step in creating a colorblind accessible website is choosing a color palette. The task of the designer in this case is to select successful color combinations that will include contrasting shades and provide a color hierarchy.
In this case, you need to be careful and try not to use some shades. Most colorblind people have trouble distinguishing between red/green and yellow/blue combinations. Here are some more dangerous color combinations:
- brown/green
- green/blue
- purple/blue
- grey/blue
- green/grey
- black green
- yellow/light green
As you can see, these color combinations are not very contrasting and therefore can become indistinguishable for people with visual impairments. Therefore, it is better not to use shades in the design that are too close to each other on the color wheel. For example, dull yellow and blue, which differ very poorly.
It must always be remembered that people with color blindness should always distinguish colors well, and it doesn’t matter what colors they see - you just need to make it clear for a color blind person what he sees different colors. You also need to pay attention to the fact that color blind people perceive bright colors better and almost do not see the difference between dull shades.
COMPLIMENTARY SHADES
Complementary hues that are opposite each other on the color wheel provide better contrast and increase design accessibility. It should be noted that despite the fact that green and red are complementary shades, this combination must be used very carefully, since it is these colors that color blind people distinguish poorly.
As you know, some shades are warm, and some are cold. This can also be used when choosing a color scheme. By contrasting warm colors with cool colors, you can create an attractive and at the same time accessible design. However, when choosing colors, do not forget about the contrast: for example, you can use a dark cool shade in combination with a lighter warm color.
MONOCHROME PALETTE
When working on the available color scheme, you need to always make sure that elements from unsuccessful color pairs are not used nearby. And to create a sure color-blind-friendly page, it's best to use a monochrome palette. It does not matter how the user will perceive the color - he will focus only on the contrast. In addition, monochrome is in fashion today, such palettes are very often used today on sites with a minimalist design.
TOOLS FOR SELECTION OF COLOR PALETTE
Vischeck is a simulator with which you can test web pages for color blind accessibility. With this tool, you can learn how people with different types of color blindness see a particular site and, if necessary, quickly make changes to the design.
big and very useful resource, which contains many important information about the nature of color blindness, its types and features. The site also has tests for colorblind users and tools for color checking the site.
Another tool for online checking of websites for colorblind accessibility. You can check how a palette of 216 colors is perceived by people with different types of color blindness.
CONCLUSION
Of course, the accessibility of the site depends not only on its color scheme. Yes, the site should be accessible to visually impaired people, but most importantly, it should be accessible to as many people as possible. more users. But you should always remember about color and constantly check that the color palette does not contain problematic color combinations.
From the author: Color is the most important element in web design. This is a little trick that will not only keep the user on your site, but also direct him to perform certain actions. The fact is that different colors in web design on a subconscious level can cause different emotions, and these algorithms were formed in ancient times as a result of human interaction with nature.
Many developers spend a lot of time creating language support for a website. However, few people think about the role colors play in our lives. Yet over 90% of our decisions to choose a product, click a link, click a button, etc. are based on color alone. Web design actively uses this tool to attract the attention of the user and encourage him to interact.
That is why it is so important to know the basic principles and trends of color in web design, which we will cover in our today's article. And we will start with a brilliant, in my opinion, color equation.
Johannes Itten Equation
The Swiss artist Johannes Itten is known in scientific circles as the greatest expert on the principles of color in classical and contemporary art. For a long time he studied the color palette of various natural objects, as well as works of art of all times and peoples.
Johannes Itten's color equation looks like this:
The reference points or colors of the first order of this twelve-part circle are red, yellow and blue. A triangle of colors of the first order is inscribed in a circle, on the basis of which a hexagon is built. Each color of the second order is obtained by combining two colors of the first level. Thus, we get:
Orange = yellow + red
Green = blue + yellow
Purple = blue + red
The color of the third level can be obtained by mixing the tones of the first and second order. Thus, a clear hierarchy reigns in the color palette.
Contrast and Comparison
The brain and eyes are able to clearly distinguish color shades only through contrast and comparison. It's no secret that a black square on a white background looks smaller than the same square on a black background. Thus, the black color reduces the size, while the white is able to expand and go beyond.
It is also worth paying attention to seven types of contrast comparisons. Of course black and white colors have the most pronounced contrast of dark and light. However, blue, red and yellow also form strong contrasting pairs.
The expressive potential of each pair of colors for web design manifests itself in different ways. We will talk more about the types of color contrast in the article "Combining colors in web design as effective tool Marketing".
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
Muting colors with contrast
In my opinion, contrasting web colors work best in a minimalist design. For example, the Studio Stylistik website uses turquoise elements on a black background. Each turquoise element (logo, text, image), which stands out noticeably against a black background, significantly strengthens the graphics, making it decisive.
Standout text
With the help of bright color in web design, certain words can be highlighted. This is especially true on a dim background. The bright selection of text affects the perception of the message, adds a certain emphasis to it.
In the following example, the word “Love” is visually accentuated, which is a good call to action, combined with the same color of the “Sign Up Now!” button.
Thus, using bright contrasting colors, you can create an artificial interaction between buttons and other elements of the site, draw the user's attention to the button and improve usability in general.
In this example, the inconspicuous background color blends in with the color of the product to highlight the orange button and make the action more appealing to the user.
Favorable color combinations
To determine the best color in the web design of your site, you should, first of all, analyze the target audience, and, secondly, adjust to its possible preferences. If your audience is spread all over the world, try to create local sites.
What are the secrets in color combinations? Take, for example, the stock market. In Japan, the UK and the US, a negative rolling chart indicator is red, and a positive one is blue or green.
But in Korea and Taiwan, color preferences are directly opposite. This is due to the fact that there the red color symbolizes good luck and prosperity.
Thus, when choosing a color scheme, one should focus on the characteristics of different cultures. To do this, you need to study even the smallest details of color perception by one or another people, a group of users, a specific person.
Color is emotion
Color perception is far from being a universal language, however, there are some web design colors whose impact can be predicted.
Have you ever wondered why hospital staff are dressed in neutral white or muted pastel uniforms?
Such a choice cannot be called accidental. Soft green, blue, lilac tones soothe, relax and reassure patients. Take, for example, the website of a medical college. Look at the four color options of this site. Which one do you like best?
In general, black implies rigor and professionalism, however, in a medical context, it is associated with death. Red is the color of blood, so for a medical site it is also not very suitable, hinting at injuries, not rehabilitation. Green and blue could work well. But blue, you see, is more “on topic” here, green, after all, is too bright for this topic.
Finally
If you consider yourself a caste of novice web designers and still do not have the proper experience and taste in terms of choosing colors, I advise you to refer to the appropriate video courses, which are in an understandable language, on real examples, will tell you how to choose a harmonious color scheme, as well as manage human attention with the help of color and other components of web design.
On this I will say goodbye. Subscribe to our blog updates and stay up to date with all the news in the field of web design and web development. Until we meet again, friends!
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
Color is certainly an important source of emotion. Colors can set the right tone and convey the necessary emotions to visitors, they can excite, evoke a lot of feelings and stimulate action. It is an extremely powerful user influencing factor.
When choosing a color scheme for a site, it is important to do it right, guided by the basic principles of color theory. The article discusses the most significant aspects when choosing, the basic principles of combination, the purpose of color in web design and its symbolic meaning. In addition, you will see several good examples in accordance with the prevailing colors, as well as familiarize yourself with some useful tips to use colors effectively when creating a website.
So, let's get acquainted with the magic of color ...
Color theory: basic principles. Ability to match colors
It's good when you have a sense of taste, and you can easily choose the color scheme of the site. Not all people can do this easily. For those who are not sure how to combine colors properly when creating a website, I would recommend that you familiarize yourself with the basics of color theory.Consider the color wheel.
A bit of history: The color wheel was invented by Isaac Newton. Having substantiated the theory of light and colors in 1666. It was she who formed the basis for the formation and development of modern optics, a small and integral part of which is web design. Newton, using a trihedral glass prism, decomposed white light into seven colors (into a spectrum), thereby proving its complexity (dispersion phenomenon), discovered chromatic aberration.
The color wheel is an indispensable attribute of many designers and artists around the world. This is the perfect proof of the theory that ingenious is always simple. The circle allows you to choose colors that would harmonize together. It consists of 6 primary colors: red, orange, yellow, green, blue, purple and secondary colors.
To find the correct color scheme, you need to use any two colors opposite each other, any three colors at an equal distance when forming a triangle, or any of the four colors forming a rectangle (two pairs of colors opposite each other). Color schemes remain correct regardless of the rotation angle.
Primary colors
There are three primary colors: red (#ff0000 in HTML or #F00 in CSS), yellow (#FFFF00 in HTML or #ff0 in CSS), and cyan (#0000FF in HTML or #00f in CSS). They cannot be obtained by mixing other colors. Complementary colors can be formed by combining these three colors.
Composite colors
There are also three main ones: orange (#ff9900 in HTML or #F90 in CSS), green (#00FF00 in HTML or #0f0 in CSS), and purple (#FF00FF in HTML or #f0f in CSS). You can get them by mixing red and yellow (orange), yellow and blue (green), and blue and red (purple).
Tertiary colors
To get one of the tertiary colors, you need to mix one primary color and one secondary color. The possibilities for tertiary colors are endless.
Additional colors
Complementary colors are located directly opposite each other on the color wheel: red and green, blue and orange, purple and yellow. In combination with each other, they make a striking contrast. Such combinations are usually used to highlight certain elements on a website.
Similar colors
These colors are located next to each other on the color wheel. They usually look very good together. The use of such color combinations causes a feeling of comfort in your site visitors.
Colors in different cultures: symbolism
When choosing a gamma for your site, you need to take into account the fact that color can have all sorts of meanings in different cultures. The cultural aspect for color symbolism can be very strong, so you need to be aware of what the site's audience is.Let's find out what colors mean in different cultures:
- China: the color of the bride, good luck, celebrations
- India: cleanliness
- South Africa: mourning colors
- East: joy (combined with white)
- West: excitement, love, passion
- USA: Christmas (with green), Valentine's Day (with white)
- Hebrew: sacrifice, sin
- Japan: life
- Christianity: sacrifice, passion, love
- Feng Shui: Yang, Fire, Luck, Respect, Protection, Vitality, Money, Recognition
- Europe: calm
- Iran: mourning, the color of the sky and spirituality
- China: immortality
- Hinduism: the color of Krishna
- Judaism: Holiness
- Christianity: the color of Christ
- Catholicism: the colors of Mary's clothes
- Middle East: Protection
- In the world: the color of security
- Feng Shui: Yin, Water, Tranquility, Love, Healing, Relaxation, Trust, Adventure
- West: sadness, depression
- Europe: happiness, hope, joy, cowardice in danger, weakness
- Asia: the color of the imperial
- Egypt: mourning
- Japan: Courage
- India: merchants
- Buddhism: Wisdom
- Feng Shui: Yang, Earth, auspicious, sun rays, heat, movement
- Europe: autumn, harvest, creativity
- Ireland: Protestants (religious)
- USA: Halloween (with black), cheap goods
- Hinduism: saffron (peach orange) sacred color
- Feng Shui: Yang, Earth, goals, increases concentration
Brown
- Colombia: a barrier to sales
- Australian Aborigines: colors of the earth, solemn ocher
- Feng Shui: Yang, Earth, Industry
Green
- Japan: life
- Islam: hope, virtue
- Ireland: a symbol of the whole country
- Europe / USA: Spring, New Birth, St. Patrick's Day, Christmas (with Red)
- USA: money
- India: Islam
- Feng Shui: Yin, Wood, Healing, Health, Soothing
Violet
- Thailand: mourning (widows)
- Catholicism: death, mourning, crucifixion
- Feng Shui: Yin, the color of physical and mental healing
White
- Europe: marriage, angels, doctors, hospital, peace
- Japan: mourning, white carnation symbolizes death
- China: mourning, death,
- India: misfortune
- East: funeral
- Feng Shui: Yang, Metal, Death, Ghosts, Mourning, Balance, Confidence
Black
- Europe: mourning, funeral, death, riot, serenity
- Thailand: misfortune, evil
- Judaism: misfortune, evil
- Australian aborigines: the color of the people
- Feng Shui: Yin, Water, Money, Career Success, Income, Stability, Emotional Protection, Strength
Meaning of colors
Let's take a look at how each color can feel and look at some ready-made solutions.Mainly associated with passion, courage and desire. Red is the color of love, strength, energy, leadership and excitement. This is a strong color and you should be aware of some of its negative emotions: danger, anxiety.
Patience, peace, calmness, reliability, love, stability. One of the most favorite colors, especially for men. It is connected with stability and depth, professionalism, trust.
The color most often associated with liveliness. Energetic, gives a feeling of happiness. In addition, it is associated with curiosity, entertainment, joy, intelligence, caution.
Cheerfulness and creativity. Associated with friendliness, confidence, playfulness, courage, fortitude.
Violet
Traditionally associated with power, nobility and wealth. Wisdom, independence, nobility, luxury, ambition, dignity, magic and secrets.Colors play a huge role in web design. To correctly choose the color scheme for the site, there are special services. I'm sure every web designer has at least one in their bookmarks.
Sometimes you sit and think about which shade of blue to choose as the main one for the site, a little lighter or a little brighter, or maybe darker ... And you still need to pick up additional ones for it. Of course, you can do it by eye, but it is better to use one of the special services.
I will not talk about color theory (this is too voluminous information), but will simply publish here the services that I have in my bookmarks and that I use.
I have been friends with this instrument for many years. The most convenient tool for picking colors (in my opinion). He has a lot additional features. For example, you can see an example of a light and dark page with selected colors.
It is possible to evaluate how people with color blindness and other visual impairments will see your color scheme. You can choose web-safe colors.
Adobe Kuler is the second web tool that I use quite often. The selection of the color scheme is almost the same as on the previous site, but I love it not for that. In addition to being able to create color schemes yourself, you can view and use schemes created by other people.
To do this, click the button in the upper left menu "Watch". And you will see a gallery of all kinds of color combinations.
This tool is a bit similar to Colorscheme, but has fewer features, but it is possible to see how the color blocks will look.
I hardly use this site, but since I already have it in my bookmarks, I decided to add it.
The following two sites generate a palette from an image of your choice. It's magic :)
You choose any picture whose colors you like, the service analyzes it and gives you a color palette. These two sites differ only in how to provide them with a picture.
This site needs download picture from your computer.
A very handy color picker. Based on the principle of "Like - Dislike".
As the name implies, here you can choose colors for the trendy now, flat design. The site is interesting in that by choosing a palette, you can download it for Corel and Photoshop programs.
Another fashion trend is material design. This site helps to choose color combinations for UI (user interface). Additionally, the site has a large set of icons.
08/18/16 28.2KThe task of choosing a color scheme for a site may seem impossible, especially if you do not understand and are not very good at color combinations:
If everything goes well, your site will look harmonious. If not, you will get a horror movie style picture!
If you don't use color at all on your site, it will look unattractive and quickly forgotten. If you overdo it with color, the site will look gaudy.
You need to choose the right template and color palette for the future site. These two tasks can be perhaps the most difficult when creating a site.
Knowing just a few rules will make choosing colors not so difficult.
After reading this article, you will learn how to:
- Choose the most appropriate color for the site and personal brand;
- How to combine tones to achieve a harmonious color scheme;
- Choose the best background color;
- Use color accents only where necessary.
How does color affect the perception of your website and brand?
If I ask you to think about Coca-Cola, what is the first thing that comes to your mind? Most likely, the red logo of Coca-Cola will pop up in your imagination:
It is quite difficult to think of this drink and not associate it with the color red. Red is so strongly associated with the brand that it is as important as the famous drink itself.
Red in the color scheme carries two important messages:
- The bright red labels really stand out from the rest on the soda counters.
- Each color evokes certain emotions. When we see red, we have a subconscious feeling of excitement, love and passion. These are the feelings Coca-Cola wants to evoke with its drinks:
85% of buyers admit that the main reason for buying a product was its color.
Brand awareness increases by 80% when using color.
3 steps to the right use of color on your website
When developing a website design, you need:
- Choose the predominant color for your brand;
- Choose a few accent shades to create a color scheme;
- Select a background color to complete your design.
1. Choosing the dominant color
Is the predominant color of your brand red, like Coca-Cola? It will help to evoke the necessary emotions in the visitors of the resource, provokes a feeling of excitement, love and passion in people.
This color is the first thing people should think of when they think of your company. If you already have a logo, make sure it contains your brand's main color.
How to choose the right color
Large companies do not accidentally choose one or another color scheme for the site. This is a conscious choice that is part of branding and marketing.
Each color attracts a different group of buyers, and can even influence their choice.:
Red-orange, black and bright blue attract impulsive buyers. Such color schemes can often be found in fast food chains, clothing stores and giveaways.
Dark blue and turquoise attract buyers with a limited amount of money. These colors can be found in banks and large department stores.
Crimson, azure and pink attract classic buyers. Common in clothing stores.
Use combinations of different colors to attract the buyers you need.
We have specially created a visual color schemes infographic to make it easier for you to choose the dominant color for your brand:
What color to use for your site?
Green represents wealth, health, tranquility and nature. This color is most easily perceived by the eyes and, as a result, relaxes. Green is the second most favorite color for both men and women.
Yellow is a symbol of youth, optimism and cheerfulness. Often used to get attention. Yellow can also cause tension, so use it in small amounts.
Orange is associated with friendliness, delight and creativity. Stimulates activity in people. For example, it encourages you to buy a product or subscribe to a newsletter. This color attracts impulsive buyers.
Red symbolizes passion, excitement, energy and danger. Often used to create an urgent need for a purchase in people's perception. Causes strong emotional reactions. Used in restaurants to increase appetite.
Pink is feminine, sweet, innocent and romantic. Often used in offering private services and goods to girls and women.
Purple is a symbol of greatness, wealth, success and wisdom. Often present in cosmetics. It has a calming effect on people.
Blue is an indicator of reliability, security, stability, peace and tranquility. Often used by banks and large companies. Blue color is most pleasant for both men and women.
Gray in the color scheme represents neutrality, simplicity, calmness and logic. It is associated with technology, production, accuracy, control, competence and even experience.
Black is the color of influence, luxury, experience and elegance. Often used to promote luxury goods and is associated with professionalism, strength, and precision.
Is your target audience young and energetic buyers? Or more experienced people with solid earnings? Is your product (service) aimed more at men or women? Is it only suitable for a certain age group?
Not every color is suitable to represent your business. For example, if you sell yoga mats, purple ( wealth and grandeur) and black ( strength and luxury) - not the most best options. Green suits you health, peace), grey ( simplicity, tranquility), blue ( peace, tranquility), or maybe even red ( passion, energy).
The difference in color perception between men and women
Who is your site mainly aimed at, men or women? Or maybe both of them?
Bright and muted color schemes for the site
Men prefer bright colors, while women prefer muted ones.
The experiment showed that, in general, men and women react equally to light and dark shades. But it turned out that women gravitate more to muted shades, and men to bright ones.
achromatic colors
As a rule, men prefer achromatic colors more than women. Achromatic colors are white, black and all shades of gray.
Light and dark shades
Women prefer light colors. The reason for this is their heightened perception of certain colors.
Women
Blue, purple, green.
Orange, brown, grey.
Men
Most preferred colors: blue, green, black.
Least preferred colors: brown, orange, purple.
By combining and using colors that are more liked by men, women, or both, it is possible to influence their subconscious perception of the brand.
According to color scheme research, both men and women like green and blue. Both of them do not like orange and brown. If you want to attract the attention of both men and women, you need to use blue or green as the main color.
The choice of color for your brand or product can also depend on the impression your customers want to make on others.
Often people buy certain goods or services to make a particular impression on others.
Many decisions are a reflection of what a person thinks of himself and how he wants to appear in the eyes of others. This is what other people will think of when they think about this person:
So if you want people who love nature to buy your product, use green in the HTML color scheme. Do you want to attract people who feel young and confident? Use yellow. If you are interested in people who want to look solid and rich, use black.
It is now clear?
Think of an ideal representative target audience. How does he want to appear to other people?
Yes, it affects psychology. But you need to understand this in order to create a successful brand.
How to use the main color on your site
Now that you have decided on the main color of your site, you need to understand how to use it correctly. Color draws a lot of attention, so don't try to use it everywhere you can.
Use the predominant color only in those places that you want to draw the attention of users to, or encourage them to take a certain action.
For example, call a phone number, fill out a form, subscribe to updates, etc.
The dominant color should be eye-catching, highlighting the details you want users to pay attention to:
Where to use the predominant color on the site?
- Logo;
- Menu tabs;
- "Call" button;
- Important information;
- Headings and titles;
- Buttons.
2. Choice of accent colors
To make your design more interesting and professional, you need to use accent ready-made color schemes for the site. They can highlight parts of your site that are worthy of attention: quotes, buttons, or subheadings.
Many people are afraid to use several colors at once, because it is not always intuitively clear whether they combine well. People think that in order to learn how to combine them, one must not only thoroughly study color theory, but also make a lot of mistakes.
There is an easier way available to everyone. This is a color matching program that will help you match color schemes just like the pros do!
How to use the program to select accent colors
Once you've decided on a dominant color, there's nothing easier than picking up accent colors with programs like the Adobe Color CC Tool:
Here is a short tutorial that will show you how to create a color scheme in one of two ways:
- Based on dominant color
Step 1. First, find out the code for your predominant color. For example, on the website ColorPicker.com. The color code is indicated in the rectangle directly above the square with the color palette.
After copying the code from ColorPicker.com, paste it into the " NOT X» tool Adobe Color . Make sure you paste the code in the middle column:
Paste your site's predominant color code into the box IN THE MIDDLE.
Once you specify a color, Adobe Color displays it on screen along with other complementary colors.
Step 2. On the top left side, you will see a rectangle with the following color schemes:
- Sequential;
- monochrome;
- triangular;
- complementary;
- Composite;
- Shades.
Experiment with different color schemes to see which one is right for you. All the colors suggested by the program are well combined with each other.
Step 3 Enhance the color scheme even further by moving one of the color pickers.
It is important not to move the short pointer located in the middle so that your dominant color remains constant:
CMS and website builders allow you to insert color codes ( HEX) to highlight any part of your site:
Copy the color codes ( HEX) for your site color scheme.
- Based on the photo you like
Sometimes it’s easier to look for color solutions on the Internet and be inspired by them.
You can upload any photo you like to Adobe Color and the program will automatically generate a color scheme based on it.
Step 1. Upload a photo:
Click on the camera icon to upload an image.
Step 2. Choose one of the five color moods:
- colorful;
- Bright;
- muted;
- Saturated;
- Dark.
Experiment with color moods to see which one is closer to you:
Choose a color mood.
Step 3. Make the color scheme even more thoughtful by moving one of the color pickers around the image:
Move the pointers if you want to select other complementary colors.
Step 4. The suggested color palette is located below the image. Here's how to choose a color scheme for your web design.
To see the codes ( HEX) colors, click on the color wheel located in the upper right corner:
Click on the color wheel to see the color codes:
Copy the color codes ( HEX) for your color scheme.
Where to place secondary colors
Site details highlighted with auxiliary colors are not the main accents. But they still stand out. For example, auxiliary colors can be used to highlight subheadings, additional buttons, dialog boxes, fill the background, etc.
Choose from one or two complementary colors. If there are more of them, it will be difficult for users to focus on one thing:
Where to use secondary colors on your site?
- Active menu button;
- subtitles;
- Separation of secondary information.
- Selecting a background color
Have you ever had to paint the walls in your house?
If yes, then you have some experience and you know that choosing color schemes is not an easy task.
The color should be calm enough so that you can be in the room for hours and the color does not pressure you. At the same time, you don't want the color to be boring and make the room look like a hospital.
Choosing a background color for your website is not much different than choosing paint for your room!
How to choose the right background color
If you were choosing paint for a modern clothing store and a country house, would you choose the same color?
Obviously not. These two rooms serve different purposes.
For example, for a clothing store, it is better to use bright colors to draw the attention of customers to the clothes racks. It is necessary that the color of the walls contrast with the color of the shelves with clothes, and the buyers, upon entering the store, immediately understand what to pay attention to.
And for comparison: when you come to your country house, you probably plan to relax. You want the color of the walls and the arrangement of your home to have a soothing and relaxing effect.
The background color of your site depends on what you want users to pay attention to.
Simply put, the background color directly depends on the goal that you are pursuing when creating a site.
Type 1 - Resources with a lot of content or online commerce
Have you noticed that information resources and online stores often use white or neutral color schemes for the site?
This is because the purpose of these resources is to promote ideas or products.
In such cases, the focus should be on the products or services, not the design of the site. The background color is just a base to make the content more visible and readable.
For information resources and online commerce, it is best to use a light background, bright dominant and secondary colors. The brightness of the prevailing and accent colors guarantees the uniqueness of the site, and allows you to highlight the details. At the same time, a neutral background color scheme for a sales site helps the user focus only on the content or products.
Type 2 - Corporate sites and services
While creating corporate resource one goal is to promote goods or services.
Depending on what the purpose of your site is, the background color should be different.
Brand promotion
If you want to create a memorable image of the company, use different shades of the dominant color or brand color for the background.
This is because color directly affects brand awareness ( Remember the Coca-Cola example?) When you use different shades of your brand color as a background, you enhance it and make it more memorable for customers.
If the predominant color of your site is provocative, then using it as a background can negatively affect the perception of users. In such cases, use shades with the lowest intensity:
Service promotion
If your goal is to draw attention to a service or portfolio of your work, use a white or neutral background color.
As in the case with information resources, you do not need to overload the site and distract users from the content that you want to convey. By using a white or light background color scheme for your site, you will draw attention to the content:
Type 3 – Stylish and creative sites with lots of graphics
If you are going to create a site related to creativity ( fashion, design, restaurant business, beauty, etc.), there are no restrictions for you.
For this type of site, there are no rules for using a background color. You can make the menu bar black to add drama. Or create a background using all the colors of the rainbow to cheer up site visitors:
Try to always stick to one rule: never choose a background color that makes the text on it hard to read.
The perfect background color allows the content to stand out and blends harmoniously with the primary and secondary colors. The right background color makes the user experience on the site pleasant.
When in doubt, use a white or light gray background. They may not be the most inspiring, but you will ensure that your content is clearly visible.
Conclusion and results
Do not be guided by personal preferences or flair when choosing a color scheme for the site.
Use colors that your potential audience likes, and then the resource will stick in people's memory for a long time. This will set you apart from your competitors.
The choice of color palette should by no means be random. This is a set of actions to take:
- Choose the right predominant color for the site;
- Choose the correct secondary colors for the dominant color;
- Choose an appropriate background color.
This publication is a translation of the article " How to Choose a Good Color Scheme For Your Website» prepared by a friendly project team
Good bad
Loading...