The timeless and enduring blue hue is simple, classic and elegant. As Pantone mention, the color of the sky at dusk, it highlights the desire for a dependable and stable foundation on which to build as we cross the threshold into a new era. From the psychological perspective, PANTONE 19-4052 Classic Blue brings a feeling of peace and calmness, aids concentration and brings clarity, re-centers the thoughts.

As it’s given on the official website of Pantone, the Color of the Year 2020 can be found in the following color systems:

Also, designers are given visual references for different spheres.

Classic Blue in Fashion

Classic Blue in Beauty

Classic Blue in Interior and Home Decor

Classic Blue in Graphic Design and Packaging

For over 20 years, Pantone’s Color of the Year has influenced product development in a variety of industries, including fashion, home furnishings, industrial design, product packaging, and graphic design. The Pantone Color of the Year selection process requires thoughtful consideration and trend analysis. To arrive at the selection each year, the color experts at the Pantone Color Institute comb the world looking for new color influences. That can include the entertainment industry and films in production, traveling art collections and new artists, fashion, all areas of design, popular travel destinations, as well as new lifestyles, playstyles, and socio-economic conditions. Influences may also stem from new technologies, materials, textures, and effects that impact color, relevant social media platforms and even upcoming sporting events that capture worldwide attention.

Earlier Pantone Colors of the Year 

Сообщение Turn to Classics: Pantone Color of the Year 2020 Is Classic Blue появились сначала на Design4Users.

Factors Influencing the Choice of Color Scheme

Be sure, there is no one particular choice which would work for all the aims. The solution heavily depends on numerous factors covering not only the user’s side but also business goals, market conditions, and current design trends. Let’s review the essential factors which have to be considered regarding the issue.

Readability and legibility

These terms are both directly connected to the perception of the content presented with text. Readability defines how easily people can read words, phrases, and blocks of copy. Legibility measures how quickly and intuitively users can distinguish the letters in a particular typeface.

These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. Among many other factors, the color scheme chosen for the interface plays a crucial role in the effective process of text perception. For example, as well as with physical objects perceived on different backgrounds, black copy shown on white or light background seems to be larger than the white copy on a dark background. Poor readability results in poor user experience: users aren’t able to scan the data, even more – even if the data is relevant but not readable, users feel the inexplicable tense struggling with the text or may even miss the critical information.

Does it mean that interfaces with a light background are more readable? Not always. One of the famous gurus of user experience design Jacob Nielsen mentioned: «Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more in color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.» So, any color scheme may be readable enough if the designer studies the peculiarities of copy perception on different backgrounds and works carefully on the font choice.

Museu landing page

Hair beauty website design

However, some scientific studies dating back to the 1980s show that big bulks of text light background appear to be a more effective choice for the majority of users. Studying how advertising carriers worked, D. Bauer and C.R.Cavonius shared their explorations in the paper “Improving the legibility of visual display units through contrast reversal” (1980). In particular, they found that participants were 26% more accurate in reading text when it was featured with dark characters on a light background.

Why may that be so? Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon the following way. People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels.  With a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly.

Accessibility

Accessibility is mostly defined as the ability of the web or mobile interface to reach as many people as possible and provide its functionality regardless of any discriminations. So, the decision “to use or not to use” has to be mostly grounded in users’ needs and preferences, not on their physical abilities. The color scheme is mentioned among the top factors affecting this aspect. Selecting the palette and color combinations, a designer needs to take into account the users of different ages, special needs, or disabilities which can also determine the choice of color for the background and layout elements. User research becomes a great help providing UX designers with data that helps to get closer to the target audience.

Landing page for a babysitting service uses the light background for all the parts with text content for a high level of readability

Clarity

Clarity defines the ability to see and distinguish all the core details on the screen or page. First of all, it deals with simplicity and intuitiveness of navigation: being able to scan the layout and find zones of information and elements of interaction, users don’t need to put much effort into getting what they need. If this aspect is not tested properly, it may lead to weak visual hierarchy and turn the screen into a complete mess. Contrast plays a big role here and color scheme becomes the foundation for it. To check, if the interface is clear and contrast enough, don’t forget about a good old trick of “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily reached and noticeable.

Landing page for the digital agency

Responsiveness

Responsiveness of the interface means that users get it usable and functional whatever it the device they use it on. What looks stylish and appealing in Sketch in the high-res professional monitor may transform into a dirty stain on the small low-res screen. Therefore, some color schemes looking nice at the design stage may lose their beauty in a variety of everyday conditions they are applied in. As color scheme directly influences color, shape, and copy perceptions, it should be tested on diverse devices before making the final decision.

Responsive website design for the forest camping service

Environment

Web and mobile interfaces are used in environments that may be pre-supposed as typical if the target audience is researched carefully. For instance, concerning constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in conditions of the badly-lit environment, a dark background can take the light away from the screen which has a bad influence on navigation and readability. So, the issue of color combinations, contrast and shades draw big attention here.

Slumber mobile app 

Checklist for color scheme selection

With the factors mentioned above, we offer here a short checklist of basic steps to follow while selecting a general color scheme for web or mobile interface.

1. Define the purpose of the interface. Having determined the core points of the interface utility and problem-solving capacity, you make the choice of the color scheme more reasoned. If the UI is text-driven (a blog, news platform, e-reader, etc.), light background tends to be an effective choice. Light makes the screen airy and spacious and it will be easier to concentrate purely on the copy. On the other hand, if the interface is visually driven and moves around images rather than text, a color scheme with a dark or bright background may be a good solution as the colors of the images feel deeper and the general layout gets stylish or even luxury look.

2. Analyze your target audience. Definition and analysis of the target audience are the primary things a designer should do. Knowing who is your potential user and what they will want to get from the website or app sets the solid basis for a usable, useful and attractive interface. Middle-aged and older people tend to prefer interfaces with the light color scheme as they find them more intuitive and navigable. Younger people often find well-performed interfaces with a dark background more original and stylish so that can be the way to involve target users. Teenagers and children are attracted to interfaces using bright backgrounds and funny details. The choice of color obviously depends on the nature of the interface functionality and content. But the preferences of the target audience are always a good clue to user-centered decisions.

Nature Encyclopedia app based on dark background and contrast yellow and white for images and copy content

3. Research the competition. Another aspect to keep in mind is that your product isn’t going to appear one in a blue ocean. Vice versa, it will fight for user’s attention in conditions of great and dynamic competition. The choice of the color scheme also becomes the way to make an app or website outstand and lead to such a precious first wish of interaction from the user’s side. Time spent on exploration of the existing products in the segment saves time and effort otherwise wasted on the redesign of ineffective solutions.

4. Test, test, test. The points described above are convincing about a key thing to do: as the color belongs to the factors directly affecting usability and attractiveness of the interface, every design solution should be appropriately tested, in different resolutions, on various screens, and under diverse conditions. Testing reveals strong and weak sides of the color scheme before the product comes on the market, gets discussed and loses the chance of stunning first impression if the design solution is inefficient.

Compromise Solutions

Not wishing to stick to the strict color schemes, user interface designers sometimes find compromise solutions, like the following ones.

Dark interface, white tabs for copy

As we mentioned in the review of UX design trends, this trend got especially popular for interfaces based on the dark background scheme. It features one more approach to proper readability which is often the issue of debates: applying boxes or spaces with the light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page. One of the cases, when it was applied efficiently, is Watering Tracker app designed by the Tubik team.

Giving the choice of color scheme to the user

Another approach is giving users a choice of modes. That is what we did for Upper, a to-do list app that offers the user a selection of color schemes. On the one hand, it makes the product really friendly to users and makes a choice more personalized according to not only usability issues but also aesthetic preferences. On the other hand, it takes additional work hours for designers and developers to work out all the schemes.

Useful Reading

Dark Side of UI: When Dark Is Good for Users
The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative Eye
Colour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
Why light text on a dark background is a bad idea
When to Use White Text on a Dark Background
Design Glossary: Basic Color Terminology
How Color Influences User Behavior

Originally published in Tubik Blog

Сообщение UI Design: How to Choose Between Light and Dark Theme появились сначала на Design4Users.

At first sight color science may seem not that difficult to master but diving into the details it’s obvious that there are many peculiarities which demand to be comprehended. In the article Color Theory: Brief Guide For Designers, we touched upon the basics of the science helping designers in their craft. Today we gathered a handy glossary with the essential terms of the color theory which will help graphic and UI designers get a better understanding of how color works.

Color

Before we step any further, it’s important to figure out the essence of color itself. The Merriam-Webster dictionary defines it as a phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. Simply put, color is a quality of an object which is caused due to the light being reflected or emitted by this object. Color can be verified visually by measurement of its properties such as hue, saturation, chromaticity, and value. To gain proper awareness of color meaning let’s define its characteristics.

Color Properties

Hue

The term hue is often mistaken for the color so it needs to be cleared out. First, we should understand that “color” is a general term that people use to name all the hues, tints, and tones. On the other hand, a hue is exactly the thing we mean asking “what color is it?”. Basically, it is a family of twelve pure and bold colors presented on the color wheel.

A hue serves as a basic material that can be transformed in three different ways – tinting, shading, and toning. Depending on the applied technique, a hue is modified into tint, shade, or tone.

They are easy to distinguish. A tint is created by mixing a hue with white, while a shade is a mix of a hue and black. Toning is a more delicate process because it requires adding both black and white the reason why the results may seem more natural than shades and tints.

Source

Value

As we said above colors have certain characteristics by which they can be recognized. Value is a property telling how light or dark a color is. The characteristic is defined by the level of whiteness. The more white has been added to a hue, the higher the value it receives.

Chromaticity

Chroma, or chromaticity, shows the purity of a hue. The characteristic is measured by the presence of white, grey, or black in a color. Twelve basic hues described above have the highest level of chromaticity since they don’t contain any additional elements. Colors with high chroma usually look bold and vivid.

Saturation

This characteristic has much in common with value and chroma, so sometimes they may be mistaken. Still, it’s vital to understand the differences. Unlike two previous properties, saturation doesn’t apply to mix hues with any other colors. It is about how a color looks under different lighting conditions. Saturation describes how bold or pale color is according to its look in the daylight and weak light. The property is also known as the intensity of a color.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel and helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors which are also known as hues.

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color Types

Primary colors

They are three pigment colors that cannot be formed by any combination of other colors. The primary colors serve as the basis of a whole system. The primary colors vary depending on the type of color system. A subtractive system is based on cyan, magenta, and yellow, while red, green, and blue colors form the additive system. And the painting system RYB includes red, yellow, and blue.

Secondary colors

These colors appear by the combination of two primary colors. Since each system has different basic colors, the secondary colors vary too. Here is a schematic explanation of secondary colors appearing in each system.

RGB:

• green+red=yellow
• red+blue=magenta
• blue+green=cyan

CMYK:

• yellow +magenta=red
• magenta+cyan=blue
• cyan+yellow=green

RYB:

• yellow+red=orange
• red+blue=purple
• blue+yellow= green

Tertiary colors

The mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet or yellow-orange.

Cool, warm and neutral colors

All the colors we described above can also be divided into three types: cool, warm and neutral.

Cool colors are the ones on the green-blue side of the color wheel. They are called cool since they bring the feeling of cold. Warm colors are opposite to the previous due to the warm associations which they possess. Yellow, orange, and red are the hues relating to the warm type. Last but not least, neutral colors are absent on the color wheel including gray, brown and beige.

Health Blog using a warm palette

Color Systems

RGB

RGB color system considers red, blue, and green as primary colors. The system is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

RYB

RYB (red, yellow, blue) is also known as a painting color system often used in art education, especially in painting. It served as a foundation for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed.

CMYK

The system CMY has been modified with the appearance of the photomechanical printing. It received the key component meaning black ink and the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown. Today this color system is mostly used in the printed design.

Source

Color schemes

The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes, aka color harmony, which works effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

Binned Logo Animation

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is the opposite of analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

Home Budget Dashboard

Split-Complementary

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

Financial Service Website

Triadic

When the design requires more colors you can try a triadic scheme. It is based on three separate colors that are equidistant on the color wheel. To save the balance in this scheme, it is recommended to use one color as a dominant, the other as accents.

Dating App Landing Page

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

Business Card App

Let’s sum up with the prosaic quote by RyPaul: “The whole point is to live life and be – to use all the colors in the crayon box.” Learn how to use colors effectively both in your life and work and the results will please you.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally published in Tubik Blog

Сообщение Design Glossary: Basic Color Terminology появились сначала на Design4Users.

One of the time-consuming still vital stages in UI creation is color choice. Designers sometimes can spend hours picking up the right color palette. In this article, we’ll provide six useful tips helping designers choose powerful colors for UI and make this process easier and more productive.

Tip 1. Learn 60–30–10 rule

This rule, or technique, came from the interior design, so it is often applied for house decorating. The idea is simple. To bring the balance into the composition, the colors should be combined in the proportion of 60%–30%–10%. The biggest part should go to the dominant hue, the third of the composition takes secondary color and 10% percent goes to the color which helps to make the accents.

Such a proportion is thought to be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing the appropriate proportion designers can successfully combine the colors without risks of turning UI into a colorful mess.

Digital Agency Landing Page

Tip 2. Contrast is a friend

Color contrast is a key part of any visual composition. It brings the individuality for each UI element and makes all of them noticeable. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. Moreover, copy content in this UI will look illegible which makes the interactions with a product almost impossible.

Designers control the level of contrast depending on the goals it is supposed to accomplish. For example, if you need users to pay special attention to the specific UI elements, it’s a good idea to apply two highly contrasting colors such as blue and red. High contrast is often used for CTA buttons design.

However, speaking of UI as a whole composition, a high level of color contrast may not always work well. If copy content and the background colors contrast each other too much, it will be difficult to read or scan the text. That’s why designers are recommended to create a mild level of contrast and apply high contrasting colors only for highlighting elements. User testing on various devices can help designers to make sure of the effectiveness of their solutions.

Urban Sketcher App

Tip 3. Consider the psychology of colors

As we’ve mentioned in our previous articles, psychology is one of the basic studies helping in a design workflow. There is a branch of psychology showing the influence of colors on human mood and behavior called color psychology. It states that our mind reacts to colors while we usually do not notice it. When human eyes perceive color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions.

Each color has its own influence on our mind and the knowledge of the possible reactions can help designers to transfer the right message and call users to make the expected action. Here is a short list of color meanings.

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness, sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.

In addition, designers need to remember that visual perception is quite individual for everyone. Such factors as age and gender have a great impact on color preferences, so it’s vital to know the target audience’s peculiarities. You can find a detailed description of color meanings and preferences in our previous article.

Dance Academy Website

Tip 4. Don’t forget cultural differences

Each culture has its own traditions and beliefs, so before you choose the colors, you need to make sure that they will be interpreted the way you mean. The thing is that sometimes one color may have absolutely opposite meanings in different countries. For example, in European countries white color signifies purity and it is often used at weddings while in many Asian countries this color means death and sorrow. Incorrect usage may lead to misunderstandings which could be fatal for a product. By acknowledging the specialties of culture’s color perception designers decrease risks of being misconceived.

Tip 5. Strive to color harmony

Harmony is what UI design strives to. To make users feel pleased and comfortable, designers try to bring the balance into user interface design. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. Harmonic colors contribute to a nice first impression from the website or application.

After years of searching, designers distinguished the basic color schemes that work effectively. Let’s see what they are.

Monochromatic. Color harmony is based on one color with various tones and shades of it.

Analogous. The scheme applies colors located right next to each other on the color wheel.

Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.

Split-Complementary. This scheme works similarly to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red.

Triadic. It is based on three separate colors that are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.

Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.

Tip 6. Steal ideas from nature

Mother nature is the best artist and designer in the world. Color combinations that we can see in the natural environment are always close to perfect. People enjoy watching sunsets and dawns, autumn forests, and winter mountains since they are full of natural color combinations.

So, why don’t you try to borrow a few ideas? Go for a walk or search for beautiful nature photos and you will definitely find the inspiration.

Big City Guide

The success of a digital product depends largely on the colors chosen for its UI. The right colors help users feel comfortable with a product. Designers can put people in the frame of mind that compels them to take action just by applying the appropriate color palette. Make your choices wisely.

Recommended Reading

Color Theory: Brief Guide For Designers

Color in Design: Influence on Users’ Behavior

Color in UI Design. Look on the Bright Side

Dark Side of UI. When Dark Is Good for Users

3C of UI Design: Color, Contrast, Content

Design for Diversity of Cultures: Perception of Colors

Originally written for Tubik Blog

Сообщение UI Design Tips: How to Choose Colors for Interface появились сначала на Design4Users.

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges, and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary, and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color models

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which the color wheel is formed: additive and subtractive.

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

Source

Additive vs subtractive

You should remember the major difference between these two systems: additive is for digital screens and subtractive for print media. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

Color Harmony

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes that work effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

Night in Berlin App

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

Rome Illustration

Split-Complementary

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

Be Bright App

Triadic

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

Toonie Halloween Stickers

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

MoneyWise App

Color theory is a complex science that requires more than one day to learn. However, it is vital to understand the basics so that you could create an effective design with the knowledge of what you’re doing.

Recommended reading

Here are some materials we could recommend for those who would like to get deeper into the topic:

Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally written for Tubik Blog

Сообщение Color Theory: Brief Guide for Designers появились сначала на Design4Users.

The color meaning can vary depending on the culture of the target audience. Moreover, sometimes one color may have absolutely opposite meanings in different countries. This is the reason for designers to acknowledge the specialties of culture’s color perception while creating the design for a foreign country. Today we’ll find out the meaning of basic colors and how they are interpreted in different cultures.

Western culture

Western culture is widespread around the world including European countries, the USA, and Canada. Many historical events have united these far and different countries into one big culture. The color meaning in Western culture was based on some common traditions and beliefs.

Here is the list of the basic colors and the meanings which they are typically associated with.

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.

Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

By Tubik

Eastern and Asian cultures

East and West are two opposite points of the world so no wonder that the traditions of these cultures are often contradictory. So, if you are creating the design for the Eastern countries, you need to keep in mind the fact that color meanings aren’t similar to the Western.

Here is the list of the basic color connotations for the East.

Red. The color is associated with Eastern countries in the first place. Red is thought to be the most positive color bringing happiness and prosperity, so it is often used everywhere in the East.

Orange. It is a positive color as well as the red. In many Eastern countries, orange symbolizes courage and love.

Yellow. It associates with things like being sacred and independent.

Green. The color believed to bring health and eternity (religious).

Blue. In Eastern Culture, it represents wealth and the betterment of self.

Purple. Similar to the West, it is associated with wealth, nobility, and royalty.

Black. In many Eastern countries, it is the color of health and prosperity. However, in Thailand and Tibet, black is the color of evil.

White. Unlike Western culture, white is linked to death and mourning. People wear white clothes for funerals.

By Nick Slater

Chinese culture

China is one of the biggest and ancientest Eastern countries. Its nationality is rich in traditions, myths, and beliefs. There are some peculiarities in the color interpretations in China which designers should consider.

Red. It is a traditional Chinese color. People wear red on the biggest occasions such as the New Year and weddings. Red symbolizes good luck and long life to the people.

Orange. This color Chinese people associate with good health.

Yellow. An interesting fact is that yellow can be associated with vulgarity. When the Chinese say “yellow picture” or “yellow book” discussing types of publications or media, it’s in reference to this type of image and websites.

Green. Hats colored green for men in China mean the man’s wife is unfaithful.

Blue. While in Western culture it is a masculine color, the Chinese consider blue as feminine.

Black. It is the color of boys in China. Black associates with masculinity.

White. The color represents death and bad luck.

Design project by Yi Mi Xiaoxin

Indian culture

Colors have always played a large part in the Indian culture and have deep significance for people. In Hinduism, colors are often related to certain gods and bring various associations. Proper use of the colors is vital for Indians because they are believed to create the appropriate environment to keep people cheerful.

Here are the meanings of colors in India.

Red. It’s the color of purity, so brides wear red clothes. Red is also associated with the goddess Durga who has a red tongue and almost red eyes. In Southern India, the red color stands for violence and disruption.

Orange. Orange is the most common color. Orange represents the “sacral chakra” according to the Hindus belief. The orange also is associated with courage and sacrifice.

Yellow. The color in the Hinduism symbolizes sanctity. Yellow also is connoted as the color of commerce.

Green. In India 30% of the population is Islamic and the green color is respected in Islam. Also, green has the connotation of a new beginning and happiness.

Blue. It is the color of Krishna, a central god in Hinduism. Blue symbolizes strength and is often used by sports teams.

Purple. It is the mix of red and ochre which symbolize wealth and nobility in India.

Black. This color is associated with a lack of desirability, negativity, and inertia.

White. Indians wear white at funerals and it’s the only color widows are allowed to wear. Similar to Western culture, it is the color of peace and purity.

By Ranganath Krishnamani

Latin America

It is thought that Latin America and the USA have a lot in common since they are neighbors. Nevertheless, the only thing uniting these cultures is the word “America” in their names. The ancient civilizations and folks such as Maya and Inca have formed this culture with their myths and knowledge.

Here is how Latin Americans interpret the colors.

Red. It is often associated with war, especially in combination with black. In Mexico, red is a religious color.

Orange. It is the color of the sun and the earth (because of the reddish-orange ground color in many countries).

Yellow. In many Latin and South American countries, it is associated with mourning.

Green. The color is the symbol of nature, although in some countries it is the color of death.

Blue. For the Catholic population, blue is associated with religion (Virgin Mary’s robe and headscarf were blue). In Mexico, it is the color of trust and serenity, and, in Colombia, blue is the color of the soap.

Purple. In Brazil, purple has connotations of mourning and death.

Black. It’s the color of masculinity and it is often worn by men.

White. Similar to the USA, white means purity and peace.

By MUTI

By DKNG

Every culture is unique and has its specialties. So, if you are creating a design for a foreign country, you should learn more about its culture in order to avoid misunderstandings with the target audience.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Сообщение Design for Diversity of Cultures: Perception of Colors появились сначала на Design4Users.