People still argue whether content is king. If you ask me, I completely agree with them and my opinion is based on my own experience. Regardless of whether it is dominant or not, there is something that is equally important! What is this, you ask? I know everyone likes to say, “Don’t judge a book by its cover.” But how else are you going to grab someone's attention if not with an original cover? Obviously, once you've captured someone's attention, the rest of your efforts can be spent on content. We will talk about web design colors and how to manage them.
You only make a first impression once
There is always one specific action that you want your site visitor to take. This is the action you place the most emphasis on. This could be a subscribe button, a “next” button, or a “buy” button.
Whatever the button, always remember that whether they click on it or not depends on the feelings that the visitor experiences when they are on your site.
In this article, you will learn about the 5 most popular colors that will make your website interested and intrigued by visitors.
Pinterest uses a lot of red shades
Without a doubt, red is considered the hottest color. If you look at Pinterest's color palette, you'll immediately notice that red is their main color.
Red is often associated with love. It is a strong and dynamic color that can make you feel in love with anything that is near this color.
This color is often found in promotional designs as its intensity creates a sense of urgency.
Additionally, this intense color can make site visitors feel excited or encouraged. But at the same time, it can discourage you from being on it, so you always need to be careful.
Use red for emphasis in your web design. It goes well with white, gray, light blue or silver colors.
Practical example of using red:
The human eye sees red when it looks at light with a wavelength between 630 and 700 nanometers. Light above this range is called infrared, and is not perceived by the human eye, but it can be identified as heat. - Wikipedia
Greater use of the red color palette (by jimjim421):
10 associations with the color red:
- blood
- war
- fire
- masculinity
- passion
- seduction
- compulsion
- energy
- bravery
Amazon loves deep orange:
Orange is a warm and active color, but not as intense as red. Orange is a warm color rather than a hot color.
Filled with energy, this vibrant color encourages, rather than forces or compels, people to take action. Orange is only sometimes perceived as intense - it encourages actions such as buy, subscribe, sell or follow. It is recommended to use orange if you want to leave your guest feeling motivated, happy, creative, and enthusiastic after visiting your site.
Practical example of using orange color:
Increased use of the orange palette manekineko:
10 associations with orange:
- optimism
- definition
- fire
- warning
- autumn
- religion
- endurance
- compassion
- Halloween
- organism
Blue color facebook creates a feeling of security:
You can find many business and corporate websites using the color blue. We associate this color with something reliable, safe, and evokes a feeling of trust and experience. Thus, it is not surprising that every businessman who cares about the impression he will leave on his company’s website prefers to use the color blue. Blue creates sensations completely opposite from those that red leaves. Blue calms us down and we don't have to worry about having too much of it.
Practical example of using blue color:
I bet you didn't know:
A survey that was conducted in Germany and published in 2009 found that blue was the favorite color of 46 percent of men and 44 percent of women surveyed. — Wikipedia
Greater use of the blue color palette by entitydesigns:
10 associations with blue:
- truthfulness
- friendliness
- magic
- guys
- gratuitousness
- police
The power of green on
Feeling unusually optimistic right now? Let me guess - were you looking at something green? Perhaps you just looked at a green plant - this undoubtedly calmed you down and made you look at things more optimistically.
Anyone who is somehow involved with ecology has more opportunities to use green in the creation of their websites. Note the $100 bill. Green is the dominant color here! Sites like Groupon also have quite a bit of green in their branding since they deal directly with money. The color green is very refreshing and relaxing, leaving people feeling balanced and inspired. It represents balance and harmony in design.
Practical example of using green color:
I bet you didn't know:
In some languages, including Old Chinese, Thai, Old Japanese, and Vietnamese, the same word can mean both blue and green. There are no natural sources for green food coloring that are approved by the US Food and Drug Administration. - Wikipedia
Greater use of green by Skybluue2u:
10 associations with green:
- money
- greed
- envy
- nature
- spring
- health
- youth
- grass
- hope
Yahoo! and the color purple in their logo
The color purple is most often associated with concepts such as imagination, creativity, dignity, nobility and abundance. Bright shades of purple are mostly associated with spring and romance, while darker shades are associated with luxury and wealth. Purple color is used in beautiful and fashionable bedding designs because purple is more calming than any other color. It is considered a feminine and romantic color rather than a masculine color. When looking at things purple it seems clearly artificial, this is because this color is very rare in nature. Just like red, people find purple too strong and bright, it makes them feel forced to do something, as if pushing them to take a certain action. Therefore, it would be effective to combine this color with black or white colors.
Practical example of using purple color:
I bet you didn't know:
In April 2007, scientists suggested that early archaea may have used a purple pigment similar to chlorophyll to absorb energy from the sun. If this were true, then vast areas of oceans and coastlines would be purple. This theory is called the "Purple Earth Hypothesis". - Wikipedia
Increased use of purple
10 associations with purple
- wealth
- generosity
- nobility
- sophistication
- romance
- art
- exotic
- spirituality
- luxury
- femininity
1WD makes smart use of monochrome colors
Generally, monochrome colors such as white, black, taupe and light gray should be used as backgrounds in design development with existing and well-placed accent colors that are brighter and more saturated. Take a look at the site, 1stwebdesigner - 1WD. They also use orange as a bright accent color - but only in harmonious combination with dark gray and light gray tones. And, of course, white, ( background color site). The color black will always represent modernity, mystery, elegance and strength. Gray is a neutral color that represents something calm and almost unknown, like a shadow. Since gray can sometimes look dirty, white will create the opposite effect. White equates purity, openness, simplicity and minimalism.
Practical example of using monochrome color:
I bet you didn't know:
Digital monochrome photography covers only the shades of black that the camera sensor can perceive. When post-processing color images, it is possible to transform perceived brightness by combining the readings of multiple channels. - Wikipedia
Greater use of the monochrome palette by Munsteri
10 associations with monochrome colors
- power
- elegance
- space
- softness
- innocence
- pessimism
- depression
- boredom
What's your favorite color? And what sensations and emotions does it evoke in you?
Translation – Duty room
Guys, we put our soul into the site. Thank you for that
that you are discovering this beauty. Thanks for the inspiration and goosebumps.
Join us on Facebook And In contact with
Scheme No. 1. Complementary combination
Complementary, or complementary, contrasting colors are colors that are located on opposite sides of the Itten color wheel. Their combination looks very lively and energetic, especially with maximum color saturation.
Scheme No. 2. Triad - a combination of 3 colors
A combination of 3 colors lying at the same distance from each other. Provides high contrast while maintaining harmony. This composition looks quite lively even when using pale and desaturated colors.
Scheme No. 3. Similar combination
A combination of 2 to 5 colors located next to each other on the color wheel (ideally 2–3 colors). Impression: calm, inviting. An example of a combination of similar muted colors: yellow-orange, yellow, yellow-green, green, blue-green.
Scheme No. 4. Separate-complementary combination
A variant of a complementary color combination, but instead of the opposite color, neighboring colors are used. A combination of the main color and two additional ones. This scheme looks almost as contrasting, but not so intense. If you are not sure that you can use complementary combinations correctly, use separate-complementary ones.
Scheme No. 5. Tetrad - combination of 4 colors
A color scheme where one color is the main color, two are complementary, and another one highlights the accents. Example: blue-green, blue-violet, red-orange, yellow-orange.
Scheme No. 6. Square
Combinations of individual colors
- White: goes with everything. The best combination with blue, red and black.
- Beige: with blue, brown, emerald, black, red, white.
- Grey: with fuchsia, red, purple, pink, blue.
- Pink: with brown, white, mint green, olive, gray, turquoise, baby blue.
- Fuchsia (deep pink): with grey, tan, lime, mint green, brown.
- Red: with yellow, white, brown, green, blue and black.
- Tomato red: blue, mint green, sandy, creamy white, gray.
- Cherry red: azure, gray, light orange, sand, pale yellow, beige.
- Raspberry red: white, black, damask rose color.
- Brown: bright blue, cream, pink, fawn, green, beige.
- Light brown: pale yellow, creamy white, blue, green, purple, red.
- Dark Brown: Lemon Yellow, Blue, Mint Green, Purple Pink, Lime.
- Tan: pink, dark brown, blue, green, purple.
- Orange: blue, blue, lilac, violet, white, black.
- Light orange: gray, brown, olive.
- Dark orange: pale yellow, olive, brown, cherry.
- Yellow: blue, lilac, light blue, violet, gray, black.
- Lemon yellow: cherry red, brown, blue, gray.
- Pale yellow: fuchsia, grey, brown, shades of red, tan, blue, purple.
- Golden yellow: gray, brown, azure, red, black.
- Olive: orange, light brown, brown.
- Green: golden brown, orange, light green, yellow, brown, gray, cream, black, creamy white.
- Salad color: brown, tan, fawn, gray, dark blue, red, gray.
- Turquoise: fuchsia, cherry red, yellow, brown, cream, dark purple.
- Electric blue is beautiful when paired with golden yellow, brown, light brown, gray or silver.
- Blue: red, gray, brown, orange, pink, white, yellow.
- Dark blue: light purple, light blue, yellowish green, brown, gray, pale yellow, orange, green, red, white.
- Lilac: orange, pink, dark purple, olive, gray, yellow, white.
- Dark Purple: Golden Brown, Pale Yellow, Grey, Turquoise, Mint Green, Light Orange.
- Black is universal, elegant, looks in all combinations, best with orange, pink, light green, white, red, lilac or yellow.
Color is certainly an important source of emotion. Colors can set the right tone and convey the right emotions to visitors, can excite, evoke a variety of feelings and stimulate action. It is an extremely powerful influence on users.
When choosing a color scheme for a website, it is important to do it correctly, 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 according to the prevailing colors, and also get acquainted with some useful tips to use colors effectively when creating a website.
So, let's get started with the magic of color...
Color theory: basic principles. Ability to combine 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 properly combine colors when creating a website, I would recommend familiarizing yourself with the basics of color theory.Consider the color wheel.
A little history: The color wheel was invented by Isaac Newton. Having substantiated the theory of light and colors in 1666. It was this that formed the basis for the formation and development of modern optics, small and integral part which is web design. Newton used a triangular glass prism to decompose White light into seven colors (into the spectrum), thereby proving its complexity (the phenomenon of dispersion), he discovered chromatic aberration.
The color wheel is an indispensable attribute of many designers and artists around the world. This is perfect proof of the theory that genius 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 right color scheme, you need to use any two colors opposite each other, any three colors equally spaced to form a triangle, or any of the four colors forming a rectangle (two pairs of colors opposite each other). Color schemes remain correct regardless of 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 blue (#0000FF in HTML or #00f in CSS). They cannot be obtained by mixing other colors. Additional 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 create 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. When combined with each other, they create 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 creates a feeling of comfort among your website visitors.
Colors in different cultures: symbolism
When choosing a color scheme for your website, you need to take into account the fact that color can have all kinds of meanings in different cultures. The cultural implications for color symbols can be very strong, so you need to be aware of the site's audience.Let's find out what meaning colors have in different cultures:
- China: color of the bride, good luck, celebration
- India: clean
- South Africa: mourning colors
- East: joy (in combination 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, sky color and spirituality
- China: immortality
- Hinduism: the color of Krishna
- Judaism: Holiness
- Christianity: The Color of Christ
- Catholicism: colors of Mary's clothing
- Middle East: protection
- In the world: the color of safety
- Feng Shui: Yin, water, calm, love, healing, relaxation, trust, adventure
- West: sadness, depression
- Europe: happiness, hope, joy, cowardice in danger, weakness
- Asia: imperial color
- Egypt: mourning
- Japan: courage
- India: traders
- Buddhism: wisdom
- Feng Shui: Yang, Earth, auspicious, sun rays, warmth, movement
- Europe: autumn, harvest, creativity
- Ireland: Protestant (religious)
- USA: Halloween (with black), cheap goods
- Hinduism: Saffron (Peachy Orange) Sacred Color
- Feng Shui: Yang, Earth, goals, enhances concentration
Brown
- Colombia: sales obstacle
- Australian Aboriginals: earth colors, ceremonial ocher
- Feng Shui: Yang, Earth, Industry
Green
- Japan: life
- Islam: hope, virtue
- Ireland: a symbol of the entire country
- Europe/USA: Spring, New Birth, St. Patrick's Day, Christmas (with red)
- USA: money
- India: Islam
- Feng Shui: Yin, wood, healing, health, calming
Violet
- Thailand: mourning (widows)
- Catholicism: death, mourning, crucifixion
- Feng Shui: Yin, the color of physical and mental healing
White
- Europe: marriage, angels, doctors, hospital, world
- Japan: mourning, white carnation symbolizes death
- China: mourning, death,
- India: misfortunes
- East: funeral
- Feng Shui: Yang, metal, death, ghosts, mourning, balance, confidence
Black
- Europe: mourning, funeral, death, riot, calm
- Thailand: misfortune, evil
- Judaism: misfortune, evil
- Australian Aboriginals: 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 evoke feelings and look at some ready-made solutions.Mainly associated with excitement, courage and desire. Red is the color of love, strength, energy, leadership and excitement. It is a strong color and you should be aware of some of its negative emotions: danger, anxiety.
Patience, peace, calm, reliability, love, stability. One of the most favorite colors, especially among men. This is associated with stability and depth, professionalism, and trust.
The color most often associated with liveliness. Energetic, gives a feeling of happiness. In addition, it is associated with curiosity, entertainment, joy, intelligence, and caution.
Cheerfulness and creativity. Associated with friendliness, confidence, playfulness, courage, and resilience.
Violet
Traditionally associated with power, nobility and wealth. Wisdom, independence, nobility, luxury, ambition, dignity, magic and mystery.© V.I. Shuvanov
Light and color are essential for effective advertising. Psychologists believe that light challenges a person and calls him to action. Shades of lighting evoke different moods in him. The combination of various lighting elements should provide such a play of light and shadow as to help show the product in a more favorable light, and vice versa, to weaken the perception of its least effective attributes.
Psychological studies have shown that a store window with lighting of 800 lux aroused the interest of 5 out of 100 passersby, with illumination of 1,200 lux, 20 people “lingered,” and illumination of 2,000 lux attracted the attention of 25 passers-by. It has been established: the weaker the light source, the thicker the shadow it causes, which results in the visitor’s fatigue in his efforts to examine the light and dark sides of the advertised product.
When preparing a poster, booklet or other printed advertising, it is very important to think through the design well: position the text correctly, find an effective picture and choose the one color scheme, against which the product advertisement will be perceived in the best possible way.
According to the results obtained in the course of numerous psychological experiments, scientists concluded that color in a certain way influences a person’s perception of body weight, room temperature and assessment of the distance of an object.
Thus, red, yellow, orange colors visually bring the object closer, increasing its volume and, as it were, “warming up” it. Light blue, blue, violet, black - visually move the object away, make it smaller and “cool” it. Therefore, when choosing a particular color to advertise a product, you should evaluate it in terms of these parameters.
The perception of color depends on the emotional state of a person. This is precisely what explains the fact that a person, depending on his emotional state, is attracted to some colors, indifferent to others and does not accept others. These patterns were discovered by Max Luscher in the middle of the 20th century. When creating his color test, Luscher proceeded from the fact that a person’s perception of color was formed as a result of lifestyle and interaction with environment over a long period of historical development.
At first, human life was determined mainly by two factors that were not subject to arbitrary change: night and day, light and darkness. Night meant conditions when vigorous activity could cease. The day required active action - searching for food, basic arrangement. Hence, the dark blue color was associated with the peace of the night, and yellow with the sunny day and its worries. The red color was reminiscent of blood, flame and related situations that required high mobilization and activity.
The attitude towards color was determined by the nature of life activity of many generations, gaining stability, and any manifestation of life activity, in turn, was always accompanied by one or another emotional state. Therefore, the attitude towards color has always been and remains emotional.
In addition, Luscher made another important conclusion for the advertising industry - color not only causes an appropriate reaction in a person depending on his emotional state, but also shapes his emotions in a certain way.
Semantics of color
Red - instills determination, is able to evoke in a person a strong desire to perform one or another action and, in relation to the topic of our conversation, to make an energetic effort and buy, for example, the advertised product. This color, like no other, can quickly attract attention and fix the eye on the subject of advertising. The semantics of this color is “attention, don’t pass by, act for the sake of action: boldly, thoughtlessly, give in to your first feelings.” The color red also has a certain sexual charge. This is especially necessary to take into account those who advertise products addressed to men, for whom red has always been a symbolic color.
However, do not overestimate this color: it is good in moderation. Thus, a small detail of an ad or catalog highlighted in red will be appropriate and will immediately attract attention, while its excessive use can cause aggressiveness and even irritation with the subject of the advertisement in the consumer.
Orange - helps to induce a surge of vitality, gives an optimistic tone. The ancients considered it the color of health and creativity. This color is best used in advertising medicines, children's products, as well as health and education services. Orange color adds activity, but at the same time gives a feeling of inner balance and spiritual harmony.
Yellow - sets up communication skills. This is the color of openness and sociability. It also helps to bring balance to runaway emotions, find inner peace, and calm emotional unrest. In addition, yellow is capable of “endowing” an object with intelligence, therefore, for example, advertising of high-tech products is best done in yellow color. This color will be successful in advertising children's products, services of travel agencies, as well as advertising and PR agencies.
Green - softens everything, relieves the severity of experiences. This color has a healing, relaxing effect. And it will be appropriate and effective in advertising medicines, water purification systems, dental clinics and pharmacies, veterinary hospitals, health and environmental protection centers.
Pink - an excellent assistant in the field of personal relationships: it enhances feelings, makes us more attentive, affectionate and sensitive. The range of use of this color can be the widest: from advertising perfumes, products for women and children to the services of marriage agencies and family centers.
Blue - also tunes in to the area of feelings, but more sublime, more platonic than mundane. This is the color of friendly affection, kinship of souls. Blue is the color of peace and universal harmony. It makes it possible to feel an invisible connection with the Universe and is able to give the subject a holistic appearance, and the issue or matter - globality and a favorable outcome.
Blue - helps you concentrate on what’s most necessary: don’t get lost in details, don’t get scattered. A blue detail in a catalog or advertising brochure will immediately attract attention and, unlike red, will never cause negative emotions.
Violet - the color of inner concentration. This color promotes internal deepening: it will help to abstract from everything unnecessary in this moment and concentrate on the main problem. Another interesting detail is that purple stimulates the brain well and promotes solving creative problems. It is no coincidence that purple is so loved by creative people. Therefore, if you are advertising a product with which you want to emphasize the creativity of the product or are focused on providing services to the creative elite, a detail in purple will be simply necessary!
Black - the color of self-immersion: it helps to isolate yourself from everything, isolate yourself and concentrate on solving a particular problem. At the same time, this color can induce melancholy and despondency. In black comes a feeling of loneliness and isolation from the outside world. That is why it is better not to use this color in print advertising. This recommendation, of course, does not apply to fonts and tables. It is in relation to them that, with rare exceptions, it is better not to experiment.
White- the color of complete openness, readiness to perceive the world in all its diversity. This color is also good because it does not cause any unpleasant sensations. One has only to note that the mono-use of this color in print advertising can create a neutral effect when the advertising consumer is simply informed of information about the product, without establishing any emphasis or priorities.
It is interesting that each country has its own attitude towards color, and even has its own national and cultural specifics, which must be taken into account when developing an advertising campaign in a particular country.
In America, red is associated with love, yellow with prosperity, green with hope, blue with loyalty, white represents purity, tranquility, peace, and black is a symbol of complexity and emergency. In Austria, the most popular color is green, in Bulgaria - dark green and brown, in Pakistan - emerald green, and in Holland - orange and blue.
In general, the closer to the East, the more importance is attached to the symbolism of color. Thus, in China, red means kindness and courage, black means honesty, and white, unlike the symbol of purity and holiness generally accepted by Europeans, is associated with meanness and deceit. Therefore, when developing an advertising campaign, say, in China, you need to choose the right color scheme, otherwise there is a chance of being misunderstood.
As for Russia, our favorite color has always been red, which from time immemorial has been associated with wealth and love. Until now, the key colors that decorate the Russian flag remain red, white and blue (a symbol of purity and spiritual improvement).
The symbolism of color in Japan is interesting, although here everything is somewhat more complicated due to the fact that a lot depends on the shape color image. Very interesting data regarding the influence of color and graphic solutions on human emotions. It is generally accepted that vertical or horizontal straight lines are associated with calm, clarity and even solidity, while curved lines are associated with grace and ease. However, this is only true under certain conditions. For example, the more often vertical and horizontal lines and the more contrasting the colors chosen to depict them, the more unpleasant sensations they produce.
Simple and symmetrical forms are “read” much faster than others. The most difficult to perceive are fantastic, sophisticated forms, devoid of obvious associations. They attract attention, but can cause an unpredictable attitude.
It has been established that the symbolism of the reflection of the form corresponds to real sensations. For example, a zigzag line “^” conveys the impression of a sharp change, concentration of force, rapid release of energy. This is how all nations graphically depict lightning. Unbalanced forms cause feelings of discomfort; a person strives to mentally complete and complete unfinished forms.
The strong emotional impact of certain shapes and color combinations was noticed and mastered in ancient times. Color and shape were purposefully used for psychotherapeutic purposes. The perception of color and emotional attitude towards it depends mainly on the emotional state of a person. It turned out that certain emotional states of a person correspond to his stable relationship to color and color combinations: one color is preferred, another does not evoke any special emotions, and a third is completely rejected.
| Color | Symbol of visual-sensory perception | ||||
| Distance | Size | Temperature | Spiritual mood | Hygienic impact | |
| Green | far | reduces | neutral, very cold | very calm | fresh |
| Red | close | increases | warm | annoying, disturbing | - |
| Orange | very close | increases | very warm | exciting, exciting | - |
| Yellow | close | - | very warm | exciting, exciting | - |
| Brown | very close | - | neutral | - | filthy |
| Violet | very close | - | cold | aggressively anxious, discouraging | - |
Color theory in web design is a broad topic that requires a lot of practice to understand the features of its application. The choice of color also depends on the environment and the specifics of the web designer’s work, since we look at colors and shades somewhat differently than illustrators and artists.
We have already partially devoted our materials to color in web design and Photoshop. But today we want to talk and look at colors and color palettes a little in general terms, where and how it is easier and more convenient to select their combinations, what to pay attention to and more. In general, we have collected several resources for selecting colors, found interesting ready-made palettes, and also want to delve a little deeper into some aspects of color theory.
Color theory in a few paragraphs
When designing a website, we have 16.8 million colors to choose from. And all of them have to be combined and selected, and if you imagine how many options for such combinations exist, then... it’s almost endless. But the colors have meaning. Imagine you are given your favorite thing. You are pleased, you are happy. Now imagine that a thing is a thing, but its color is the one you hate the most. For example, a shade of mixing green, yellow and gray. Oh, you will be excited, you will be strengthened, but the joy will fade away.
The colors have meaning. They give tone and have an emotional impact in the same way that font has a huge impact on human psychology.
Primary colors are the main ones for shades. The human eye perceives three basic colors: cyan, yellow and magenta. Any color that you see in front of you now consists of a combination of these three, but in different amounts of brightness, shades and other things. Yes, yes, printing takes place in these colors.
On the Internet, on the contrary, RGB (red, green, blue) and its hexadecimal values are used.
RGB (59, 89, 145) or #3b599b - blue Facebook
RGB (0, 0, 0) or #000000 - black
Every two characters in the 16-digit code indicate a primary color: red - 3b, green - 59, blue - 9b.
Cold-warm
Colors also range into cool (lots of blue and green) and hot (lots of red and yellow) shades. Hot colors in web design evoke feelings of warmth and passion. They are aggressive and bold, but they also symbolize that some things need to be stopped, so they are used for critical messages, icons and other things.
Cool colors bring coolness, suitable for winter, night, sad or aquatic themes. They carry loneliness and cold, fear. But at the same time, they are non-aggressive and calming.
Temperature
The temperature of the images can also be changed, which changes the level of orange. Thus, we turn the picture into a warmer and more joyful one. Just as the world looks happier when the sun casts its yellow-orange rays on it. A decrease in temperature, on the contrary, makes the image colder and less attractive, as if conveying nature on a cloudy day.
Shades and shadows
Shades are created by adding white to a color, similar to how you add black to create a shadow. Tints and shadows allow you to create monochromatic colors and palettes by adding varying amounts of white and black.
For example, let's take the base color #8dbdd8 (light blue). The images below show a monochrome palette in which the two shades on the right and left are the result of adding different amounts of black and white.
Saturation, Hue, Light
Colors are also distributed according to saturation, hue and luminosity. Saturation allows you to make the color richer and darker. When we say "light blue" or "dark green" we mean saturation.
The color tone determines the difference from the main color of the rainbow (there are seven of them). That is, for example, “greenish-blue”. Neither this nor that, but just the tone.
Luminosity determines a color in relation to pure white, how bright or dull it is. Something similar to saturation, but depends on a different parameter.
Color schemes
If we look at color schemes, there are only four of them: monochrome (shades of the same primary color), complementary (from two colors that are on opposite sides of the color wheel), analog (three colors that are next to each other on the color wheel), triad or triadic ( three colors that are at the corners of the triangle drawn on top of the color wheel).
Designing a flower layout
This is a brief theory and subsequently we will simply refer to this material. But also when starting to learn web design, it is this theory that is important, although often your eyes may realize that something looks completely different from what is described in the numbers. It looks blue, but you feel like it's not saturated enough. These are already features of the nature of development of each person. This is why many web designers dedicate themselves to color palette design, much like how some dedicate themselves to studying typography. They test different shades, saturations, temperatures in combination with other variations and see when, what and how it works.
However, when it comes to web colors, there is a concept called "web safe colors". It appeared when displays could not reproduce 16 million colors. But if there are such safe colors, why do you need anything else? But, you see, it’s nice to know why they exist at all and how they influence the choice of colors in general.
It is worth understanding that because we can use any colors, the best web projects are obtained by using the main group of colors. And yes, trust your eyes. If they don't like what they see, then try changing it.
When help is needed
If you have design difficulties at the zero stage, then ideas for color solutions can always be found on the Internet. Just visit a site with color palettes and customize it, then collect the colors you want and work with them in Photoshop. For example, explore webdesign-inspiration or awwwards, sort by color and find inspiration.
Color explorer
It is a library and workshop for creating a color palette. The library has sets of palettes for print and web. You can choose a color and see multiple shades and variations of tones.
Сolor son th eweb
Selects all colors and shades for the color you specify. In addition, the resource offers colors for combination and combination, a monochrome palette, analogue, variations in saturation, tones, luminosity and more.
Copaso
Allows you not only to select a color using several parameters at once, but also to then assemble a palette according to a given color. In the first version we created color, and in the second we created a palette and a range of color shades and tones.
Сolorotate
This is one of the few mobile applications, which allows you to work with color palettes on your smartphone or tablet. But there is also a version for the PC browser. A special feature of the project is working with color in 3D. We are offered a cone of flowers. Each point for mixing the shade moves within the limits of its own triangle, and the cone itself can be rotated as conveniently as possible.
In addition, there are sets of ready-made palettes for Christmas, monochrome, modern, citrus and others.
Сolourlovers
The site has been a catalog of custom color schemes for a long time. As a rule, it includes colors flat design, as well as numerous patterns, textures, backgrounds that are freely available.
Color palettes can be selected from photographs and images. We have already talked about this and about resources for this too. The idea as a whole is interesting and very useful, read it at your leisure.
Color profiles
But meanwhile, choosing a palette is not so bad. The most current topic in web design is the choice of color profiles. We touched on this topic a little earlier (link at the beginning of the material), but here’s what we want to note now. Each monitor can be calibrated to a specific color profile. This is done, for example, in Windows 10 -> Control Panel -> Color Management. Accordingly, certain colors may appear differently on different monitors.
The topic, as we have already said, is confusing and therefore many web designers are not always sure whether they have chosen the right color. SRGB is recommended more often, but is not necessary or absolutely the best solution and choice. This also applies to images that are saved with built-in profiles, and website layouts. In other words, this topic can take a long time to understand.
But, meanwhile, many designers try not to think about them at all and do their work with the default settings on the computer and in Photoshop. And this is also true, because even If you coordinate colors with the customer/client, you still won't be able to influence the colors on the end users' monitor.
Material UI Colors
Google, when creating rules for material design, also described in detail the provisions on color. However, the rules are so simple overall that they can easily be applied to any interface, which is what made them popular.
When it comes to color choice, the Material design follows a similar style flat design. Material designs for applications and websites are freely available on the Internet, and therefore you can see sets of colors with your own eyes, create palettes and much more.
If you decide to work only with Google's color set, we recommend testing both tools to see how and how they can complement each other. Then you can additionally use the resource 0to255 , to select colors based on brightness and saturation.
Conclusion
Color on the Internet is mostly simple and doesn't take more than a couple of weeks to understand its basics and theories. But if you decide to dig deeper into this very color theory, then you will learn very, very many complexities, features, patterns, influences and solutions. Perhaps some of you will feel “dizzy” from the abundance of information; someone will decide that " he doesn’t need to know that, he poked the logo with an eyedropper and colored the site" But someone will decide to look into the theory again, and again; decides to rummage through the “basket of flowers” and shades, decides to start experimenting.
We just hope that our materials on color will help you a little in the future with your projects. They will help you find that simple way to understand how web colors work through practice, repetition, and trusting your eyes.
There are many resources for selecting color palettes, as well as sites for inspiration, but when you sit down to “draw” your own project, your head somehow... becomes empty. You sit and think: “ What blue shade should I take... a little darker or a little lighter... eh... but the customer didn’t want to think about such trifles... for him, that, of course,... trifles..."
New Year's days and leisure time are a good occasion for creativity, light imagination for your own pleasure, when, for example, you no longer have the strength to party and have fun.
Loading...
